本文摘自PHP中文网,作者V,侵删。
一、实现滑动门所需技术
1、简单的HTML基础知识
2、简单的CSS基础样式
3、基本的javascript知识
(推荐教程:javascript教程)
二、实现方法
HTML
1 2 3 4 5 6 | < div id = "container" >
< img src = "images/20190503222903.png" />
< img src = "images/20190503222943.png" />
< img src = "images/20190503223003.png" />
< img src = "images/20190503223514.png" />
</ div >
|
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | *{
margin : 0 ;
padding : 0 ;
background-color : #ccc ;
}
p{
text-align : center ;
}
#container{
width : 1130px ;
height : 350px ;
margin : 0 auto ;
border-right : 1px solid #FF0000 ;
border-bottom : 1px solid #FF0000 ;
overflow : hidden ;
position : relative ;
}
#container img{
width : 500px ;
height : 350px ;
display : block ;
position : absolute ;
border-bottm: 1px solid #FF0000 ;
}
|
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | window.onload = function (){
var box=document.getElementById( 'container' );
var imgs=box.getElementsByTagName( 'img' );
var imgWidth = imgs[0].offsetWidth;
var exposeWidth = 210;
var boxWidth = imgWidth + (imgs.length -1) * exposeWidth;
box.style.width= 'px' ;
function SetImgsPos(){
for ( var i = 1;i<imgs.length;i++){
imgs[i].style.left = imgWidth + exposeWidth*(i -1)+ 'px' ;
}
}
SetImgsPos();
var translate = imgWidth - exposeWidth;
for ( var i=0;i<imgs.length;i++){
( function (i){
imgs[i].onmouseover = function (){
SetImgsPos();
for ( var j=1;j<=i;j++){
imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px' ;
}
}
})(i);
}
}
|
更多编程相关内容,请关注php中文网编程入门栏目!
以上就是js如何实现滑动门效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue 的 render 方法中 h 是什么?
网页漂浮广告js特效源码分享
web学习之怎么使用纹理贴图
js中常用的输出方式有哪些
js中如何进行字符串替换
jquery怎么写ajax
js 中几种处理’this’指向的方式
学js前要学什么
javascript如何替换字符串
javascript中string怎么转成数组
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何实现滑动门效果