JS DOM实现鼠标滑动图片效果

2019-11-20 10:21:55

字体：大中小

来源：转载

供稿：网友

经常，我们在浏览各种网页的时候，都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，详情便会展现在用户面前，而这一动画，就是利用了DOM+JS结合来实现的，今天的小练习就是要实现这个效果。

首先，先将页面基本的框架用html实现，将四张图封装在了一个名为“container”的div块中

<!doctype html><meta charset="UTF-8"><html> <head> <title> 鼠标滑过页面自动变大 </title> <link rel="stylesheet" href="styles/reset.css" /> <link rel="stylesheet" href="styles/slidingdoors.css" /> <script src="slidlingdoors.js"></script> </head> <body> <div id="container"> <img src="./images/door1.png"/> <img src="./images/door2.png"/> <img src="./images/door3.png"/> <img src="./images/door4.png"/> </div> </body></html>

接着，我将大体的样式用了两个样式表修饰如下：

依次为

slidingdoors.css和reset.css:#container { height: 477px; 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;}

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}

接下来，就要实现滑动效果了，js代码如下：

window.onload=function(){ var box=document.getElementById("container"); var imgs=box.getElementsByTagName("img"); var imgwidth=imgs[0].offsetWidth; var exposewidth=160; var boxwidth=imgwidth+exposewidth*(imgs.length-1); box.style.width=boxwidth+'px'; function setImgPos(){ for(var i=1;i<imgs.length;i++) {  imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px'; } } setImgPos(); var translate=imgwidth-exposewidth; for(var i=0;i<imgs.length;i++) { (function(i){  imgs[i].onmouseover=function(){  setImgPos();  for(var j=1;j<=i;j++)  {   imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';  }  }; })(i); }};

弄好后的效果图如下：