在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面。这个案例是通过改变图片的透明度来实现轮播的效果。 我把涉及的知识点分为两个方面，分别是HTML+css和JS。 第一部分（html+css）包含的知识有：positon定位。 最外层是一个div，它包含了所有的元素。这个轮播一共有三张图片，这三张图片包含在一个无序列表中。最外层的div还有两个用来切换上一张图片和下一张图 片的子元素。这两个子元素也是div，切换上一张图片...
整理文档，搜刮出一个原生js实现简单的Ripple按钮的代码，稍微整理精简一下做下分享。效果如图准备食材（html部分）<ul id="nav"><li><a href=#><span>首页</span><span class="circle"></span></a></li><li><a href=#><span>我的</span><span class="circle"></span></a></li><li><a href=#><span>更多</span><span class="circle"></span></a></li></ul>典型的菜单li布局，里面的span.circle表示的是触摸弹出的小圆圈。 准备辅料...
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。 在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。 使用方法很简单，就是自定义一个div，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以 效果图：代码如下： <!doctype html> <...
本文实例为大家分享了JS轮播图的具体代码，供大家参考，具体内容如下<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" rel="external nofollow" /> <style> .jiantou { height: 36px; width: 24px; line-height: 36px; text-align: center; background-color: rgba(0, 0, 0, .3); font-size: 14px; color: #fff; position: absolute; top: 0; bott...
效果图：代码如下： <!DOCTYPE html> <html> <head><title> 2048-game </title><meta charset="utf-8" /><style media="screen">#game {display: none;position: absolute;left: 0px;top: 0px;right: 0px;bottom: 0px;background-color: #9DA5C3;opacity: 0.5;z-index: 1;}.clear:after {content: "";display: table;clear: both;}.left {float: left;}.right {float: right;}.scoreShow {height: 50px;text-align: center;line-he...
效果图：代码如下： <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>js验证码</title><style type="text/css">#code{width:80px;height:30px;font-size:20px;font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; }</style></head><body> <div> <input type = "text" id = "input"/> <input type = "button" id="code" /> <input type = "button" value = "...
实现思路如下： 1. div初始居普通文档流中 2. 给window添加scroll事件（可事件节流），获取div的offset的top值，滚动时scrollTop值和top比较，当到达top时给div添加一个fixed的class使其固定 3. 向上滚动时当到达div初始top时则删除fixed的class，此时div又回到普通文档流中 4. fixed样式非IE6浏览器使用position:fixed，IE6使用position:absolute和IE expression 效果图：代码如下： <!doctype html> <html> <head><meta charset=...
先上个效果图，就是用左右尖括号可改变中间日期的值。（点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分） HTML部分 (左右箭头都是用的图片素材，网上一大把，这里我就显示我本地地址了) <div> <span class="leftspan" <span style="color:#FF0000;">onclick="reducedate()"</span>><img src="IMG/return.png" style="heigh...
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释 效果如图：<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>瀑布流布局-JS实现</title> </head> <style type="text/css">*{margin: 0;padding: 0;}#main{position: relative;/*整体相对定位，因为每个小图片盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/}.box{padding: 15px 0 0 15px;/*padding为内边距，后面js获取的高度包括p...
本文介绍了浅谈原生JS实现jQuery的animate()动画示例，希望此文章对各位有所帮助。 参数介绍：obj执行动画的元素cssJSON数值对，形式为“{属性名: 属性值}"，指要执行动画的书序及其对应值interval属性每执行一次改变的时间间隔speedFactor速度因子，使动画具有缓冲效果，而不是匀速不变（speedFactor为1）func执行完动画后的回调函数 注意：必须为每一个元素分别添加一个定时器，否则会互相影响。cur != css[arr]判断是否每一个属...
使用JS技术实现QQ阅读类似的点击展开、收起效果，具体内容如下 一、定义展开函数showdiv(),实现点击"全文"按钮，全文展开。 1.点击展开函数，需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮，查找其父元素，将其父元素设置为隐藏。 3.将紧跟其父元素之后的元素设置为显示。二、定义收起函数hidediv(),实现点击"收起全文"按钮，全文内容隐藏。 1.点击收起函数，需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮，查...
效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>原生js选项卡写法</title><style>#div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}.active{background: red;}</style><script>window.onload=function(){//原生js选项卡写法var oDiv = document.getElementById(div1);var aInput = document.getElementsByTagName(input);var aCon = oDiv.getElementsByTagName(div...
本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下 掌握页面元素定位和移动 放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置 技术点：事件捕获、定位 offsetLeft与style.left的对比： 1）offsetLeft是与父级元素的距离，不包过滚动条的距离 2）style.left返回的是字符串，如30px，offsetLeft返回的是数值30 3）style.lft是可读写的，offsetLeft是只读的，所以要...
在其他网站看见类似效果，但代码有400多行且看不懂，我用60多行的代码给予实现。 实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！ 效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>诏书</title><style type="text/css">* {margin: 0;padding: 0;}#animate {margin: 40px auto;width: 495px;height: 150px;positi...
slice()方法和splice()方法都是原生js中对数组操作的方法。那么他两种有什么区别呢？今天通过本文教程给大家简单介绍下。 slice()，返回一个新的数组，该方法可从已有的数组中返回选定的元素。例如：arrObject(start，end)，start是必选的。规定从何处开始选取，如果是负数，则是从数组元素尾部选取，也就是说-1指最后一个元素，-2指倒数第二个元素；end是可选元素。规定从何处结束选取。该参数没有，表示从开始位置截取到数组末尾...