律师网站建设建议,网站建设管理员角色设置,绩溪做网站,以你的心诠释我的爱网页设计素材异形滚动效果图.gif1、原理的揭示前言#xff1a;图片大小处理问题的解决#xff0c;当我们只改变盒子大小#xff0c;图片会溢出#xff0c;无法充满这个盒子。设置图片的宽高为 100%异形滚动.box {width: 100px;height: 100px;}img { //让图片充满整个盒子width: 100%;he…异形滚动效果图.gif1、原理的揭示前言图片大小处理问题的解决当我们只改变盒子大小图片会溢出无法充满这个盒子。设置图片的宽高为 100%异形滚动.box {width: 100px;height: 100px;}img { //让图片充满整个盒子width: 100%;height: 100%;}从最低层的背景图开始解析。五个显示的图两个隐藏的图。一个七个基本图样。背景图思路放置背景图片(li 绝对定位再用图片填充)点击时改变动画的 JSON异形滚动*{margin: 0;padding: 0;}.yixing{width: 670px;height: 221px;background: url(images/pic_bg.gif);margin: 100px auto;border: 1px solid #000;position: relative;}.yixing ul{list-style: none;}.yixing ul li{position: absolute;}/*img这个元素不会根据父亲来设置宽度、高度所以我们就要写*/.yixing ul li img{width: 100%;height: 100%;}.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px;}.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px;}.rightBtn{position: absolute;top: 151px;right: 20px;width: 40px;height: 40px;background-color: red;}var lis document.getElementsByTagName(li);var rightBtn document.getElementById(rightBtn);var JSONC {width: 122,height: 86,left:104,top: 35};var JSOND {width: 161,height: 112,left:247,top: 16};//理论上我们可以不厌其烦写JSONA、JSONBrightBtn.onclick function(){//理论上我们可以不厌其烦写animate(lis[3],JSONC,1000,BounceEaseOut);animate(lis[4],JSOND,1000,BounceEaseOut);}2、JSON的优化获取 targetJSON 使用数组接受 JSON放进数组。var JSONarr [];//把所有的状态都推入数组for(var i 0 ; i lis.length ; i){JSONarr.push({width : parseInt(fetchComputedStyle(lis[i],width)),height : parseInt(fetchComputedStyle(lis[i],height)),left : parseInt(fetchComputedStyle(lis[i],left)),top : parseInt(fetchComputedStyle(lis[i],top))});}console.log(JSONarr);右按钮的监听使用 for 进行优化防止手写。//右按钮的监听rightBtn.onclick function(){//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态for(var i 1 ; i 6 ; i){animate(lis[i],JSONarr[i - 1],600,BounceEaseOut);}}3、增加二次点击效果这里是个难点今天学了半天就是想不明白为什么不二次轮播下午去吃了个饭再仔细想想终于明白是怎么回事了。以右击按钮为例当我们点击的时候图片依据 动画 左移。这里只是借助了动画改变了 li 的位置li 盒子的编号依然没变所以当我们再次点击盒子只是变到本身现在所处位置。我错就错在盒子转移到另一个盒子认为他的盒子编号也随之发生改变。想明白这点我们就可以在动画完成后改变盒子编号。这样下次的点击效果就会生效。又因为我们得到的 li 是一个类数组对象不能通过pop等进行操作。先把它放进一个数组里。var liArray []; //存放每个li的数组 新增1var JSONarr [];//把所有的状态都推入数组for(var i 0 ; i lis.length ; i){JSONarr.push({width : parseInt(fetchComputedStyle(lis[i],width)),height : parseInt(fetchComputedStyle(lis[i],height)),left : parseInt(fetchComputedStyle(lis[i],left)),top : parseInt(fetchComputedStyle(lis[i],top)),opacity : parseInt(fetchComputedStyle(lis[i],opacity))});//liArray就和lis是一样的结构lis是类数组对象而liArray是数组 新增2liArray.push(lis[i]);}//右按钮的监听rightBtn.onclick function(){//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态for(var i 1 ; i 6 ; i){animate(liArray[i],JSONarr[i - 1],600,BounceEaseOut);}//让0号元素瞬移for(var k in JSONarr[6]){liArray[0].style[k] JSONarr[6][k] px;}//交换身份新增3liArray.push(liArray.shift());}4、设置节流自动轮播和opacity设置 opacity 主要是兼容左右轮播时的淡入淡出。函数节流因为所有的 li 盒子都是动的所以节流我们只需要随便设置一个盒子。异形滚动*{margin: 0;padding: 0;}.yixing{width: 670px;height: 221px;background: url(images/pic_bg.gif);margin: 100px auto;border: 1px solid #000;position: relative;overflow: hidden;}.yixing ul{list-style: none;}.yixing ul li{position: absolute;opacity: 1;filter:alpha(opacity100);}/*img这个元素不会根据父亲来设置宽度、高度所以我们就要写*/.yixing ul li img{width: 100%;height: 100%;}.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px; opacity: 0; filter:alpha(opacity0);}.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px; opacity: 0;filter:alpha(opacity0);}.rightBtn{position: absolute;top: 151px;right: 20px;width: 40px;height: 40px;background-color: red;}.leftBtn{position: absolute;top: 151px;left: 20px;width: 40px;height: 40px;background-color: red;}var yixing document.getElementById(yixing);var rightBtn document.getElementById(rightBtn);var leftBtn document.getElementById(leftBtn);var lis document.getElementsByTagName(li);//lis是类数组对象getElementsByTagName得到的元素们是类数组对象不是数组//所以lis没有pop方法、没有unshift()方法var liArray []; //存放每个li的数组var JSONarr [];//把所有的状态都推入数组for(var i 0 ; i lis.length ; i){JSONarr.push({width : parseInt(fetchComputedStyle(lis[i],width)),height : parseInt(fetchComputedStyle(lis[i],height)),left : parseInt(fetchComputedStyle(lis[i],left)),top : parseInt(fetchComputedStyle(lis[i],top)),opacity : parseInt(fetchComputedStyle(lis[i],opacity))});//liArray就和lis是一样的结构lis是类数组对象而liArray是数组liArray.push(lis[i]);}//console.log(JSONarr);//右按钮的监听rightBtn.onclick rightBtnHandler;var timer setInterval(rightBtnHandler,2000);yixing.onmouseover function(){clearInterval(timer);};yixing.onmouseout function(){timer setInterval(rightBtnHandler,2000);};function rightBtnHandler(){//节流if(liArray[1].isanimated) return;//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态for(var i 1 ; i 6 ; i){animate(liArray[i],JSONarr[i - 1],600,BounceEaseOut);}//让0号元素瞬移for(var k in JSONarr[6]){liArray[0].style[k] JSONarr[6][k] px;}//交换身份liArray.push(liArray.shift());}//左按钮的监听leftBtn.onclick function(){//节流if(liArray[1].isanimated) return;for(var i 0 ; i 5 ; i){animate(liArray[i],JSONarr[i 1],600,BounceEaseOut);}//让0号元素瞬移for(var k in JSONarr[0]){liArray[6].style[k] JSONarr[0][k] px;}//交换身份liArray.unshift(liArray.pop());}
