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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JavaScript门道之标准库
May 26 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 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实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
js格式化时间小结
2014/11/03 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
Python变量和数据类型详解
2017/02/15 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python读取文件名并改名字的实例
2019/01/07 Python
使用python实现滑动验证码功能
2019/08/05 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python3读写ini配置文件的示例
2020/11/06 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
教育专业个人求职信
2013/12/02 职场文书
四好少年事迹材料
2014/01/12 职场文书
《秋游》教学反思
2014/04/24 职场文书
工程造价专业求职信
2014/07/17 职场文书
倡议书的写法
2014/08/30 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
英语辞职信范文
2015/02/28 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB