JS实现图片推拉门效果
2016-04-14 15:47
555 查看
初学者。
推拉门是网页中常见的一种形式,通过JS实现比较简单。主要是通过getElement找到节点元素,然后对其进行相应的赋值即可。
新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作“门”的图片),styles(用来存放css文件),scripts(用来存放js文件)。然后在index.html中添加代码:
接着是styles目录下的doors.css:
然后是scripts目录下的doors.js:
这样即可实现推拉门效果。
效果如下,截图略微粗糙
推拉门是网页中常见的一种形式,通过JS实现比较简单。主要是通过getElement找到节点元素,然后对其进行相应的赋值即可。
新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作“门”的图片),styles(用来存放css文件),scripts(用来存放js文件)。然后在index.html中添加代码:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>sliding doors</title> <link rel="stylesheet" href="styles/doors.css"/> <script src="scripts/doors.js"></script> </head> <body> <div id="container"> <img src="images/door1.jpg" alt="柯南" title="柯南"/> <img src="images/door2.jpg" alt="柯南" title="柯南"/> <img src="images/door3.jpg" alt="柯南" title="柯南"/> <img src="images/door4.jpg" alt="柯南" title="柯南"/> </div> </body> </html>
接着是styles目录下的doors.css:
#container{ height:600px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; margin:0 auto; position:relative; overflow:hidden; } #container img{ position:absolute; border-left:1px solid #ccc; display:block; left:0; }
然后是scripts目录下的doors.js:
window.onload = function() { var box = document.getElementById("container"); //获得容器对象 var imgs = box.getElementsByTagName("img"); //获得图片对象数组 imgWidth = imgs[0].offsetWidth; //图片宽度 var exposeWidth = 100; //每张图片露出的宽度 var boxWidth = imgWidth + exposeWidth * (imgs.length - 1); box.style.width = boxWidth + "px"; //初始化图片位置 function reset() { for(var i = 1; i < imgs.length; i ++) { imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px"; } } reset(); //开门时候每个图片应该左移的距离 var translate = imgWidth - exposeWidth; //为每个图片添加事件 for(var i = 0; i < imgs.length; i ++) { //自动执行函数 (function(i){ imgs[i].onmouseover = function() { //重置图片位置 reset(); for(var j = 1; j <= i; j ++) { imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px"; } }; })(i); } };
这样即可实现推拉门效果。
效果如下,截图略微粗糙
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享