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 面向对象继承
Nov 26 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python远程邮件控制电脑升级版
2019/05/23 Python
pandas 时间格式转换的实现
2019/07/06 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python wsgiref源码解析
2021/02/06 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
检察官就职演讲稿
2014/01/13 职场文书
灰雀教学反思
2014/04/28 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android