javascript图片滑动效果实现

本文为大家分享了爪哇岛描述语言图片滑动效果实现方法，具体内容如下，先看一下效果图：

鼠标滑过那张图，显示完整的哪张图，移除则复位：

简单的半铸钢钢性铸铁(铸造半钢)加射流研究…操作数字正射影像图实现：

！doctype html html head meta charset=' UTF-8 '标题滑动门/title link rel='样式表href='样式/reset.css'/link rel='样式表href='样式/slidingdoors.css' /脚本src=' http :脚本/滑动门。js /脚本/head body div id=' container ' img src=' http : images/door 1。png ' alt=' 1080 p神器title='1080P神器/img src=' http : images/door 2。png ' alt=' 5.5寸四核title='5.5寸四核/img src=' http : images/door 3。png ' alt='四核5寸标题='四核5寸/img src=' http : images/door 4。png ' alt=' 5.7寸机皇title='5.7寸机皇//div /body/htmlcss:

#集装箱{ height : 477 pxmargin : 0 auto order-right : 1px实心# cccborder-bottom: 1px实心# ccc飞越：隐藏；相对位置：} #容器img { position:绝对显示：块；左： 0；边框-左侧： 1px实心# ccc}js操作：

window.onload=function() { //容器对象var box=文档。getelementbyid(“容器”)；//获得图片节点列表对象集合var imgs=box。getelementsbytagname(' img ')；//单张图片的宽度var imgWidth=imgs[0].offset with//设置掩藏门体露出的宽度var exposeWidth=180//设置容器总宽度var框宽=IMgwidth(IMGS。长度-1)*曝光宽度；盒子。风格。width=Boxwidth ' px//设置每道门的初始位置函数setImgsPos() { for (var i=1，len=imgs.length我透镜；I){ imgs[I]。风格。left=imgWidth exposewith *(I-1)' px '；} } setImgsPos()；//计算每道门打开时应移动的距离var translate=IMgwidth-曝光宽度；//为每道门绑定事件for (var i=0，len=imgs.length我透镜；i ) { //使用立即调用的函数表答式，为了获得不同的我值（函数{ imgs[I].onmouseover=function() { //先将每道门复位setImgsPos()；//打开门for(var j=1；j=I；j){ imgs[j]。风格。left=ParSeint(imgs[j])。风格。左，10)-翻译“px”；//imgs[j]。风格。left=j *曝光宽度' px '；} };imgs[i].onmouseout=function(){ setImgPos()；};})(一)；}};希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。