本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下
<强>滑动门效果:
强>
<强>原理:强>
一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。
假设图片的宽度是120 px,其他三道门露出的宽度是80 px。
第二道门左边的距离是120 px,
第三道门左边的距离是200 px,
第四道门左边的距离是280 px。
<强>
强>第二道门左边的距离是80 px,为(120 - 40)px
第三道和第四道门左边的距离不变。
<强>
强>第二道门左边的距离是80 px,
第三道门左边的距离是160 px (200 - 40) px。
第四道门不变
因此每道门打开,是图片的宽度减去露出的宽度,就是需要向左移动的距离。第三道门打开,第二道门需要先做移动,然后第三道门移动。每道门移动的距离都是图片的宽度减去露出来的宽度。
<强>程序:强>
& lt;脚本type=" text/javascript祝辞 窗口。onload=function () { var容器=. getelementbyid(“容器”); var一=container.getElementsByTagName (img);//获取图像 var imgWidth=一个[0].offsetWidth;//图片的宽度 var exposeWidth=200;//露出的宽度 var containerWidth=imgWidth + exposeWidth *(一个。长度- 1);//外部盒子的总宽度 container.style。宽度=containerWidth +“px”; 函数初始(){ (var i=1;我& lt;imgs.length;我+ +){ 一个[我].style。左=imgWidth + exposeWidth * (i - 1) +“px”; } } 最初的(); var translateWidth=imgWidth - exposeWidth;//移动的距离 (var=0;我& lt;imgs.length;我+ +){ (函数(i) { 一个[我]。onmouseover=function () { 最初的();//鼠标经过图片时,首先设置到初始状态 (var j=1; j<=我;j + +){//之前的图片都移动相同的距离 一个[j] .style.left=方法(一个[j] .style.left) -translateWidth +“px”; } } })(); } } & lt;/script> >之前以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
基于JavaScript实现滑动门效果