网页轮播图 核心原理:使用动画函数,点击小圆圈,使用小圆圈的索引号来判断图片移动的距离 使用getAttribute 通过自定义属性来记录小圈圈的索引号 无缝滚动:克隆第一张,实现无缝跳转,克隆第一个节点cloneNode(),没有true浅克隆 查看案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 window .addEventListener('DOMContentLoaded' , function ( ) { var w = document .querySelectorAll('.w' ); var mains = document .getElementsByTagName('main' ); var lunbo = document .querySelector('.lunbo' ); var focus = document .querySelector('.focus' ); var ul = focus.querySelector('ul' ); var ulli = ul.querySelector('li' ) var cul = lunbo.querySelector('ul' ); var focuswidth = focus.offsetWidth; var circle = 0 ; var num = 0 ; onmouseover = function ( ) { lunbo.children[0 ].style.display = 'block' lunbo.children[1 ].style.display = 'block' } onmouseout = function ( ) { lunbo.children[0 ].style.display = 'none' lunbo.children[1 ].style.display = 'none' } for (var i = 0 ; i < ul.children.length; i++) { var cli = document .createElement('li' ); cli.setAttribute('index' , i); cul.appendChild(cli); cli.addEventListener('click' , function ( ) { for (var i = 0 ; i < ul.children.length - 1 ; i++) { cul.children[i].className = '' ; console .log(cul.children[i]); } this .className = 'current' ; var index = this .getAttribute('index' ); num = circle = index; animate(ul, -index * focuswidth, 1 ) }) } cul.children[0 ].className = 'current' ; var firstimg = ulli.cloneNode(true ); ul.append(firstimg); lunbo.children[1 ].addEventListener('click' , function ( ) { num++; animate(ul, -num * focuswidth, 15 ); if (num == ul.children.length - 1 ) { ul.style.left = 0 ; num = 0 ; } circle++; if (circle == cul.children.length) { circle = 0 ; cul.children[cul.children.length - 1 ].className = '' ; cul.children[0 ].className = 'current' ; } else { for (var i = 0 ; i <= cul.children.length - 1 ; i++) { cul.children[i].className = '' } cul.children[circle].className = 'current' } }) lunbo.children[0 ].addEventListener('click' , function ( ) { if (num == 0 ) { num = ul.children.length - 1 ; ul.style.left = -num * focuswidth + 'px' ; } num--; animate(ul, -num * focuswidth, 15 ); circle--; if (circle < 0 ) { circle = cul.children.length - 1 ; cul.children[circle].className = 'current' ; cul.children[0 ].className = '' ; } else { for (var i = 0 ; i <= cul.children.length - 1 ; i++) { cul.children[i].className = '' } cul.children[circle].className = 'current' } }) })
自动播放 定时器,手动调用事件 事件.click 查看实例
1 2 3 var timerr = setInterval (function ( ) { lunbo.children[1 ].click(); },2000 )
节流阀 使用回调函数,在点击事件后添加一个flag=true,来控制速率
查看实例
1 2 3 4 5 6 7 var flag = true ;obj.onclick = function ( ) { flag=false ; animate(obj,target,function ( ) { flag = true ; }) }
返回顶部案例 方法一:使html/body元素滚轮距离顶部为0查看实例
1 2 3 btn.addEventListener('click' ,function ( ) { document .body.scrollTop = document .documentElement.scrollTop = 0 ; })
方法二: 控制window滚轮的位置查看实例
1 2 3 btn.addEventListener('click' ,function ( ) { window .scroll(0 ,0 ); })
方法三:引入缓动动画函数查看实例
1 2 3 4 btn.addEventListener('click' ,function ( ) { animateY(window ,0 ,15 ) })
移动端事件 触屏事件,touchstart/touchmove/touched 触摸事件TouchEvent // touches正在触摸屏幕的所有手指的列表// targetTouches 在触摸当前元素DOM的手指列表// changedTouches 检测手指列表,手指状态变化// 当手指离开屏幕时 touches和targetTouches列表没有,只能拿到changedTouches 拖动元素三部曲: 触摸元素touchstart:获取手指的初始位置,同时获得盒子原来的位置 移动手指 touchmove 计算手指滑动距离,并且移动盒子,手指移动的距离加上盒子原来的位置 离开手指 touchend 查看实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <style > div{ position: absolute; width: 100px; height: 200px; background-color: rgb(24, 153, 212); } </style > <div > </div > <script > var startX = 0 ; var startY = 0 ; var x = 0 ; var y = 0 ; var div =document .querySelector('div' ) div.addEventListener('touchstart' ,function (e ) { console .log('我开始模拟了' ); startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this .offsetLeft; y = this .offsetTop; }) div.addEventListener('touchmove' ,function (e ) { var moveX = e.targetTouches[0 ].pageX - startX; var moveY = e.targetTouches[0 ].pageY -startY; this .style.left = x + moveX +'px' ; this .style.top = y + moveY +'px' ; e.preventDefault(); })
移动端无缝滚动 添加监听事件,加入判断事件 transitionend
,在去掉过渡效果查看实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 window .addEventListener('load' , function ( ) { var focus = document .querySelector('.focus' ); var foli = focus.querySelectorAll('li' ); var ul = focus.children[0 ]; var wid = focus.offsetWidth; var ol = focus.querySelector('ol' ); console .log(foli.length); var index = 0 ; var timer = setInterval (function ( ) { index++; var indexw = -index * wid; ul.style.transition = 'all .4s' ; ul.style.transform = 'translateX(' + indexw + 'px)' ; }, 2000 ) ul.addEventListener('transitionend' , function ( ) { console .log('1' ); if (index == 3 ) { index = 0 ; console .log(index); ul.style.transition = 'none' var indexw = -index * wid; ul.style.transform = 'translateX(' + indexw + 'px)' ; } else if (index < 0 ) { index = 2 ; ul.style.transition = 'none' var indexw = -index * wid; ul.style.transform = 'translateX(' + indexw + 'px)' ; } ol.querySelector('.current' ).classList.remove('current' ); ol.children[index].classList.add('current' ); }) var startx = 0 ; var movex = 0 ; ul.addEventListener('touchstart' , function (e ) { var startx = e.targetTouches[0 ].pageX; console .log(startx); clearInterval (timer); }) ul.addEventListener('touchmove' , function (e ) { var movex = e.targetTouches[0 ].pageX - startx; var translatex = movex + index * -wid; console .log(movex); ul.style.transition = 'none' ; ul.style.transform = 'translateX(' + translatex + 'px)' ; }) ul.addEventListener('touchend' , function (e ) { if (Math .abs(movex) > 50 ) { if (movex > 0 ) { index--; } else { index++; } var translatex = -index * wid; ul.style.transition = 'all .4s' ; ul.style.transform = 'translateX(' + translatex + 'px)' ; }else { var translatex = -index * wid; ul.style.transition = 'all .4s' ; ul.style.transform = 'translateX(' + translatex + 'px)' ; } }) })
classList属性 classList
属性,追加类名,和ClassName对比,不需要加.
,移除remove,格式div.classLest.add/remove
切换类document.body.classList.toggle('')
click延时解决方案 禁止页面的缩放 封装函数,解决300ms延时情况 引入js插件 fastclick
,在GitHub仓库内 查看代码
使用js插件/框架 swiper的插件CDN Touchslide插件 zy.media.js插件,页面适配框架适配不同浏览器 框架:bootstrap(依赖JQ),vue,react,zepto 本地存储 sessionStorage,生命周期为关闭浏览器窗口
格式 sessionStorage.setItem(key,value),存储 sessionStorage.getItem(key) 获取 sessionStorage.removeItem(key) 删除数据 sessionStorage.clear(); 删除全部数据 localStroage,生命周期永久生效,使用方法雷同 查看实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <input type ="text" name ="" id ="inp" > <input type ="checkbox" name ="" id ="inp1" > 记住用户<script > var inp = document .querySelector('#inp' ); var inp1 = document .querySelector('#inp1' ); if (localStorage .getItem('inp' )){ inp.value = localStorage .getItem('inp' ); inp1.checked = true ; } inp1.addEventListener('change' ,function ( ) { if (this .checked && inp.value != '' ){ localStorage .setItem('inp' ,inp.value) console .log(inp.value); } else { localStorage .removeItem('inp' ) } }) </script >