轩宇网

标签搜索

搜索到 58 篇与 Javascript前端的结果

JavaScript编写点击查看大图的页面半透明遮罩层效果实例

JavaScript编写点击查看大图的页面半透明遮罩层效果实例

这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了，具体的看看代码注释就会明白。下面就是全部代码，复制到HTML中就可以运行的。具体代码如下：<!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElement.scrollTop); background:rgba(0,0,0,0.5); background:transparent\9; filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000 ); display:none; } #mask_td {text-align:center;} </style&g...

2018年09月17日

5,274 阅读

0 评论

JS实现百度网盘任意文件强制下载功能

JS实现百度网盘任意文件强制下载功能

这篇文章主要介绍了JS实现百度网盘任意文件强制下载 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下JS代码：//get file list data var data=require("system-core:context/context.js").instanceForSystem.getList().listView.listsData; //calculate sign function base64Encode(r){var t,e,a,c,n,o,h="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";for(a=r.length,e=0,t="";a>e;){if(c=255&r.charCodeAt(e++),e==a){t+=h.charAt(c>>2),t+=h.charAt((3&c)<<4),t+="==";break}if(...

2018年09月03日

6,334 阅读

0 评论

微信小程序实现MUI数字输入框效果

微信小程序实现MUI数字输入框效果

这篇文章主要为大家详细介绍了微信小程序实现MUI数字输入框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码，供大家参考，具体内容如下效果图WXML<view class="tui-content"> <view class="tui-gallery-list">默认</view> <view class="tui-gallery-list"> <view class="tui-number-group"> <button class="tui-number-cell" bindtap="nextNum">-</button> <input class="tui-number-cell" type="number" value='{{number}}'>...

2018年08月31日

6,882 阅读

0 评论

PHP+ajax实现二级联动菜单功能示例

PHP+ajax实现二级联动菜单功能示例

这篇文章主要介绍了PHP+ajax实现二级联动菜单功能,涉及php结合ajax的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考，具体如下：如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。第一步：我们会向后台发送一个请求第二步：后台接受请求后，会返回给我们一个值第三步：将值用JS呈现在页面中HTML代码<html> <head> <title>www.jb51.net 二级联动</title> <meta http-equiv="Content-Type" content="text/html;charset=utf8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js...

2018年08月29日

4,752 阅读

0 评论

仿天猫商品品牌图片墙换一批动画特效

仿天猫商品品牌图片墙换一批动画特效

这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中，当用户点击了品牌图片墙上右下角的按钮时，所有的品牌图片会水平翻转360度，然后显示另外一批品牌图片。使用方法se在页面中引入jquery和样式文件style.css。<script src="path/to/jquery.min.js"></script> <link href="path/to/style.css" rel="stylesheet"> HTML结构该品牌图片使用一个无序列表作为HTML结构：<ul id="iconWall"> <li> <div class="img-3d"> <div class="img-back"> <img src="img/icon1.jpg" a...

2018年08月19日

8,356 阅读

0 评论

可拖拽和带二维码的登录窗口设计效果

可拖拽和带二维码的登录窗口设计效果

这是一款非常实用的登录窗口设计效果。该登录窗口通过点击按钮或超链接弹出，它可以自由的进行拖拽。在登陆框中带有二维码，可以进行扫描登录，即实用又时尚。使用方法在页面中引入jquery和样式文件style.css。<script src="path/to/jquery.min.js"></script> <link href="path/to/style.css" rel="stylesheet"> HTML结构该登录窗口的基本HTML结构如下：<div id="gray"></div> <div class="popup" id="popup"> <div class="top_nav" id='top_nav'> <div align="center"> <span>登录账号</spa...

2018年08月19日

8,301 阅读

0 评论

使用JavaScript制作打字机文本效果

使用JavaScript制作打字机文本效果

我们在看电影时经常能够看到一些炫酷的打字机效果，用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果，目前网上已经有很多打字机效果的插件。那么，实现类似的打字机效果困难吗？其实要制作一个打字机效果非常简单，下面我们就以纯JavaScript来实现一个炫酷的打字机效果。在完成这个打字机效果之前，让我们先来体验一下打字机的效果：制作打字机效果上面的效果是如何工作的呢？让我们来一步步的分析。首先我们需要一个显示打字效果的容器：<div class="printer-container"> <span id="teletype" hidden></span> </div>id为teletype的<span>元素用于显示要打印的文字。开始是它带有一个hidden属性，用于阻止文字在开始时就显示出来。另外还需要一个输入框和一个按钮，让我们可以输入要打印的文字，完整的HTML结构如下：<div class="container"> <div...

2018年08月19日

7,166 阅读

0 评论

使用jQuery和css3制作逼真的数字时钟效果

使用jQuery和css3制作逼真的数字时钟效果

本教程将教使用jQuery和css3制作逼真的数字时钟效果。这个插件的灵感来自于 pretty dribbble shot-Timer。HTML结构:数字时钟的html结构非常简单,因为大部分代码都是动态生成的，你只需要在html上写入以下代码：<div id="clock" class="light"> <div class="display"> <div class="weekdays"></div> <div class="ampm"></div> <div class="alarm"></div> <div class="digits"></div> </div> </div>div#clock包裹住div.dis...

2018年08月19日

4,711 阅读

0 评论

jQuery实现鼠标点击处心形漂浮的炫酷效果示例

jQuery实现鼠标点击处心形漂浮的炫酷效果示例

本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果。分享给大家供大家参考，具体如下：鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图：3看着是不是感觉还不错，下面是完整代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } </style> <script type="text/javascript"> $(function(){ var height=$(window).width()...

2018年08月19日

9,176 阅读

0 评论

页面右侧浮动固定层返回顶部按钮带二维码展示功能

页面右侧浮动固定层返回顶部按钮带二维码展示功能

移动互联网时代的到来，大家可以通过“扫一扫”功能轻松在移动端获取需要的信息。今天我给大家分享一个WEB功能，它是一个漂浮在网页的右侧的小工具条，我们可以使用它上下快速定位页面位置，可以弹出微信二维码或者页面地址二维码，让喜欢在手机等移动设备上阅读的朋友轻松获取信息。HTML首先我们准备右侧浮动层的内容，工具条有上下箭头按钮，然后一个“反馈”链接，点击可以到网站的反馈信息页面，还有一个二维码按钮，鼠标滑上时会弹出一个二维码图片，那么我们使用.popPanel来放置二维码图片，.arrowPanel是用来做箭头方向的。在本例中，我使用了一张背景图作为工具条，当然实际应用中我们还可以根据实际需求加多个功能按钮。<div id="floatPanel"> <div class="ctrolPanel" style="right:20px;"> <a class="arrow" href="#"><span>顶部<...

2018年08月17日

6,429 阅读

0 评论