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实现继承的4种方法总结
Oct 16 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
canvas红包照片实例分享
Feb 28 Javascript
JS实现标签页切换效果
May 04 Javascript
详解VUE 数组更新
Dec 16 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
JavaScript实现无限轮播效果
Nov 19 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
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
详解Swift中属性的声明与作用
2016/06/30 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python循环实现n的全排列功能
2019/09/16 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
幼儿教师培训感言
2014/03/08 职场文书
公司开业庆典主持词
2014/03/21 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
中标通知书格式
2015/04/17 职场文书
教师聘用意向书
2015/05/11 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
《角的度量》教学反思
2016/02/18 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python django中如何使用restful框架
2021/06/23 Python