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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
JS变量及其作用域
Mar 29 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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中文本操作的类
2007/03/17 PHP
php array_search() 函数使用
2010/04/13 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Vue组件化开发思考
2018/02/02 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python实现发送邮件功能
2017/07/22 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
群众路线剖析材料
2014/02/02 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
搞笑的获奖感言
2014/08/16 职场文书