几种常用的特效

2018-02-26 08:13:33来源:cnblogs.com作者:Paradise_追逐者人点击

分享

1.回到顶部

 1 <script> 2     var goTop = document.getElementById('goTop'); 3     goTop.onclick = function () { 4         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 5         var timer = setInterval(function () { 6             window.scrollTo(0, scrollTop-=10); 7             if(scrollTop <= 0){ 8                 clearInterval(timer); 9             }10         }, 30);11     };12 </script>

2.拖拽方框到指定位置

 1 <script> 2         var oDiv = document.getElementById('div1'); 3         oDiv.onmousedown = function (e) { 4             e = e || window.event; 5             //获得鼠标当前所在位置相对于div左边和上边的距离 6             var disX = e.clientX - oDiv.offsetLeft; 7             var disY = e.clientY - oDiv.offsetTop; 8             document.onmousemove = function (e) { 9                 e = e || window.event;10                 oDiv.style.left = e.clientX - disX + 'px';11                 oDiv.style.top = e.clientY - disY + 'px';12             };13             oDiv.onmouseup = function () {14                 document.onmousemove = null;15             };16         };17     </script>

3.轮播图

 1 function changImg(elem) { 2             for(var i=0; i<aLi.length; i++){ 3                 aLi[i].className = ''; 4                 aImgs[i].className = ''; 5             } 6             elem.className = 'selected'; 7             aImgs[elem.index].className = 'selected'; 8         } 9         oNext.onclick = function () {10             index++;11             if(index == aLi.length){12                 index = 0;13             }14             changImg(aLi[index]);15         };16         oPrev.onclick = function(){17             index--;18             if(index == -1){19                 index = aLi.length - 1;20             }21             changImg(aLi[index]);22         };23         var timer;24         function run() {25             timer = setInterval(function () {26                 oNext.onclick();27             }, 2000);28         }29         run();30         oContainer.onmouseover = function () {31           clearInterval(timer);32         };33         oContainer.onmouseout = function () {34             run();35         };

4.选择器

 1   var aDiv = oContent.children; 2         for(var i=0; i<aLi.length; i++){ 3             aLi[i].index = i; 4             aLi[i].onclick = function () { 5                 for(var i=0; i<aLi.length; i++){ 6                     aLi[i].className = ''; 7                     aDiv[i].className = ''; 8                 } 9                 this.className = 'selected';10                 aDiv[this.index].className = 'selected';11             };12         }

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台