admin 管理员组

文章数量: 1086866

常见的筋斗云特效

提供一个筋斗云特效

移动时，背景变为筋斗云，鼠标离开回到起始位置，可以点击更改其实位置。
代码如下`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.focus {position: relative;width: 721px;height: 455px;background-color: beige;margin: auto;overflow: hidden;}.focus ul li {list-style: none;float: left; }.focus ul {padding: 0;width: 1400%;margin: 0;position: absolute;top: 0px;left: 0;}.arr1, .arr2 {display: none;position: absolute;text-decoration: none;margin-top: -24px;top: 50%;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-family: 'icomoon';font-size: 18px;z-index: 99;}.arr2 {right: 0;}ol li {float: left;width: 8px;height: 8px;list-style: none;width: 6px;height: 6px;background-color: rgba(0, 0,0, .4);border: 2px solid rgba(0, 0,0, .3);border-radius: 50%;float: left;margin: 0 4px;cursor: pointer;}.current {background-color: #fff;      }ol {position: absolute;bottom: 5px;left: 50%;}</style>
</head>
<body><div class="focus"><a href="javaScript:;" class="arr1"><</a><a href="javaScript:;" class="arr2">></a><ul><li><a href="#"><img src="../image/focus.jpg" alt=""></a></li><li><a href="#"><img src="../image/focus1.jpg" alt=""></a></li><li><a href="#"><img src="../image/focus2.jpg" alt=""></a></li><li><a href="#"><img src="../image/focus3.jpg" alt=""></a></li></ul><ol></ol></div><script>// 轮播图用ul实现var arr1 = document.querySelector('.arr1');var arr2 = document.querySelector('.arr2');var focus1 = document.querySelector('.focus');var ul = focus1.querySelector('ul');var ol = focus1.querySelector('ol');var focuswidth = focus1.offsetWidth;var circle = 0;var circle1 = 4;function animate(obj, target, callback) {// console.log(callback);  callback = function() {}  调用的时候 callback()// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步长值写到定时器的里面// 把我们步长值改为整数 不要出现小数的问题// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {//     // 调用函数//     callback();// }callback && callback();}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);}focus1.addEventListener('mouseenter', function() {arr1.style.display = 'block';arr2.style.display = 'block';})focus1.addEventListener('mouseleave', function() {arr1.style.display = 'none';arr2.style.display = 'none';})for(var i = 0; i < ul.children.length; i++) {var li = document.createElement('li');li.setAttribute('index', i)ol.appendChild(li);li.addEventListener('click', function() {for(var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}this.className = 'current';var index = this.getAttribute('index');num = num1 = index;circle = circle1 = index;                animate(ul, -index * focuswidth);})}ol.children[0].className = 'current';var first = ul.children[0].cloneNode(true);ul.appendChild(first);var num = 0;arr2.addEventListener('click', function() {if(num == 4) {ul.style.left = 4 * focuswidth + 'px';num = 0;}num++;animate(ul, -num * focuswidth);circle++;if(circle == 4) {circle = 0;}for(var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';})var num1 = 4;arr1.addEventListener('click', function() {if(num1 == 0) {ul.style.left = 0;num1 = 4;}num1--;animate(ul, -num1 * focuswidth);circle1--;if(circle1 == -1) {circle1 = 3;}for(var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[circle1].className = 'current';})var timer1 = setInterval(function() {arr2.click();}, 2000)</script>
</body>
</html>

本文标签： 常见的筋斗云特效

版权声明：本文标题：常见的筋斗云特效 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688027678a170495.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。