html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果

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

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

鼠标滑过页面自动变大

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

依次为

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.οnlοad=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[i].style.left=imgwidth+exposewidth*(i-1)+'px';

}

}

setImgPos();

var translate=imgwidth-exposewidth;

for(var i=0;i

{

(function(i){

imgs[i].οnmοuseοver=function(){

setImgPos();

for(var j=1;j<=i;j++)

{

imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';

}

};

})(i);

}

};

弄好后的效果图如下：

遇到的问题：

1.图片复位函数中i、j变量傻傻分不清；

2.做出来的效果一张图片复位后把其余未复位图片都挡住了，主要是复位函数出了小问题。

经验：js函数变量复杂，逻辑严谨，写代码时一定要谨慎小心

以上就是本文的全部内容，希望对大家的学习有所帮助。