滑动门的例子
2015-07-31 15:38
246 查看
滑动门的例子:
HTML:
JavaScript:
css:
HTML:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles/slidingdoors.css"/> </head> <body> <div id="container"> <img src="images/door1.jpg" alt="door1" title="door1"/> <img src="images/door2.webp" alt="door2" title="door2"/> <img src="images/door3.jpg" alt="door3" title="door3"/> <img src="images/door4.jpg" alt="door4" title="door4"/> </div> <script src="scripts/slidingdoors.js"></script> </body> </html>
JavaScript:
window.onload = function(){//页面加载完毕。页面请求的所有资源加载完毕 //容器对象 var box = document.getElementById("container"); //获得图片nodelist对象集合 var imgs = box.getElementsByTagName("img"); //单张图片的宽度 var imgWidth = imgs[0].offsetWidth//属于DOM样式的内容 //设置掩藏门体露出的宽度 var exposeWidth = 160; //设置容器总宽度 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth; box.style.width = boxWidth + "px";//style是DOM中css属性设置的内容 //设置每道门的初始位置 function setImgsPos(){ for(var i = 1; i < imgs.length; i++){ imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";// } } setImgsPos(); var translate = imgWidth - exposeWidth; for(var i = 1; i < imgs.length; i++) { //使用立即调用函数表达式,为了获得不同的i值 (function(i){ imgs[i].onmouseover = function(){ //this.left = 0 + "px"; //先将每道门复位 setImgsPos(); for(var j = 0; j <= i; j++){ imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px"; } } })(i) } }
css:
#container{ height:280px; margin: 0 auto; border-right:1px solid #ccc; border-bottom:1px solid #ccc; overflow: hidden; position: relative; } #container img{ position: absolute; display: block; left:0; border-left: 1px solid #ccc; }
相关文章推荐
- 【原创】相对完美的垂直居中popup(modal/dialog),无需监听window.resize事件
- 显示虚线
- leetcode 074 —— Search a 2D Matrix
- 如何实现HTTP DIGEST认证
- 探究Android系统中解析JSON数据的方式
- 判断填写的邮箱里是否有“@”
- 关于将Webpack,编译文件输出到不同的目录下
- C语言——计算文件大小(二)
- 黑马程序员-------集合框架之HashSet
- FFT模板
- 搞颠provider,factory 和service
- oracle,mysql,SqlServer三种数据库的分页查询总结
- Java File类学习笔记3:自定义一个类,读取文本内容到字符串
- cookie和session
- [leetcode-42]Trapping Rain Water(java)
- phpmyadmin的设置
- 获取当前路径
- PNG文件格式
- Stub vs. Skeleton
- MongoDb复制-主从复制