本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下
<强>一、什么是滑动门
首先你要了解什么是滑动门。
生活中我们经常看到一些网站或是商城有一些滑动门的效果
那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法,
<强>二,实现滑动门所需技术
1,简单的HTML基础知识
2、简单的CSS基础样式
3,基本的javascript知识
<强>三,如何实现滑动门(重点)
准备好一段HTML代码
& lt; div id=叭萜鳌北?
& lt; img src=" https://www.yisu.com/zixun/images/20190503222903.png "/祝辞& lt; !——图片可以自己修改——比;
& lt; img src=" https://www.yisu.com/zixun/images/20190503222943.png "/比;
& lt; img src=" https://www.yisu.com/zixun/images/20190503223003.png "/比;
& lt; img src=" https://www.yisu.com/zixun/images/20190503223514.png "/比;
& lt;/div>
给当前HTML结构添加样式
* {
保证金:0;
填充:0;
background - color: # ccc;
}
p {
text-align:中心;
}
#{容器
宽度:1130 px;
身高:350 px;
保证金:0汽车;
边境:1 px固体# FF0000;
边界底部:1 px固体# FF0000;
溢出:隐藏;
位置:相对;
}
#容器img {
宽度:500 px;
身高:350 px;
显示:块;
位置:绝对的;
border-bottm: 1 px固体# FF0000;
}
最后使用js代码实现效果
//加载dom树
窗口。onload=function () {//定义盒子
var盒=. getelementbyid(“容器”);//定义图片
var一=box.getElementsByTagName (img);//图片宽度
var imgWidth=一个[0].offsetWidth;//隐藏宽度
var exposeWidth=210;//盒子宽度
var boxWidth=imgWidth +(一个。长度1)* exposeWidth;
box.style.width=皃x”;//设置每道门的初始位置
函数SetImgsPos () {
(var i=1; i< imgs.length;我+ +){
一个[我].style。我左=imgWidth + exposeWidth * (1) +“px”;
}
}
SetImgsPos ();//计算每道门应该移动的距离
var=imgWidth - exposeWidth翻译;//为每道门绑定事件
我(var=0; i< imgs.length;我+ +){//使用立即调用的函数表达式,为了获得不同的值
(函数(i) {
一个[我]。onmouseover=function () {
SetImgsPos ();//打开的门
(var j=1; j<=我;j + +) {
一个[j] .style。左=方法(一个[j] .style.left, 10) -翻译+“px”;
}
}
})();
}
}
效果展示
根据上面的步骤,就可以实现简单的滑动门效果,快去试试吧! ! !
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
