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


Posted in Javascript onSeptember 17, 2020

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

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

首先,先将页面基本的框架用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);
 }
};

弄好后的效果图如下:

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

遇到的问题:

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

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

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

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

Javascript 相关文章推荐
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
angular之ng-template模板加载
Nov 09 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
vue Element左侧无限级菜单实现
Jun 10 Javascript
实践中学习AngularJS表单
Mar 21 #Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 #Javascript
javascript实现dom元素可拖动
Mar 21 #Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 #Javascript
浅析AngularJS中的指令
Mar 20 #Javascript
简述Matlab中size()函数的用法
Mar 20 #Javascript
详解Matlab中 sort 函数用法
Mar 20 #Javascript
You might like
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
搭建vue开发环境
2018/07/19 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
express.js中间件说明详解
2019/03/19 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
详解爬虫被封的问题
2019/04/23 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
股份合作协议书范本
2014/04/14 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
PHP新手指南
2021/04/01 PHP
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS