<!doctype html><html><head><meta charset="utf-8" /><title>多滑动效果展示</title><link rel="stylesheet" href="style/reset.css" /><link rel="stylesheet" href="style/Qc.css" /><link rel="stylesheet" href="style/Qe.css" /><script src="script/Qe.js"></script></head><body><div id="Qe"><img src="tupianku/1.jpg" alt="钰" title="Admin"/><img src="tupianku/2.jpg" alt="楽" title="Nckop"/><img src="tupianku/3.jpg" alt="懦" title="Galse"/><img src="tupianku/4.jpg" alt="末" title="Sole"/><img src="tupianku/5.jpg" alt="末" title="Sole"/></div><div id="Qc"><img src="tupianku/6.jpg" alt="钰" title="Admin"/><img src="tupianku/7.jpg" alt="楽" title="Nckop"/><img src="tupianku/8.jpg" alt="懦" title="Galse"/><img src="tupianku/9.jpg" alt="末" title="Sole"/><img src="tupianku/10.jpg" alt="末" title="Sole"/></div><script src="script/Qc.js"></script></body></html>只能同时存在一组图片滑动效果的图片，另一组被堆积。js代码只有一组被运行，css效果产生的堆积发生了作用，js在另一组代码没有发生作用js代码：window.onload=function(){ //容器对象 var Qe=document.getElementById('Qe'); //获得图片 Nodelist对象集合 var imgs=Qe.getElementsByTagName('img'); //单张图片的宽度 var imgwidth=imgs[0].offsetWidth;//javascript 中 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 //设置掩藏门体露出的宽度 var exposewidth=60; //设置容器的总宽度 var boxwidth=imgwidth+(imgs.length-1)*exposewidth; Qe.style.width=boxwidth+'px'; //设置每道门的初始位置 function setimg(){ for(var i=1,len=imgs.length;i<len;i++){ imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px'; } } setimg(); //计算每道门打开时应移动的距离 var tran=imgwidth-exposewidth; //为每道门绑定事件 for(var i=0,len=imgs.length;i<len;i++){ //使用立即调用函数表达式，为了获得不同的i值 (function(i){ imgs[i].onmouseover=function(){//onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 //先将每道门复位。 setimg(); //打开门 for(var j=1;j<=i;j++){ imgs[j].style.left=parseInt(imgs[j].style.left,10)-tran+'px'; } } })(i) } }
添加回答
举报
0/150
提交
取消