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 相关文章推荐
jquery插件开发注意事项小结
Jun 04 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
移动端界面的适配
Jan 11 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js控制table合并具体实现
2014/02/20 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python中static相关知识小结
2018/01/02 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python实现AES加密与解密
2019/03/28 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
10个顶级Python实用库推荐
2021/03/04 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
西式婚礼证婚词
2014/01/12 职场文书
租赁协议书范本
2014/04/22 职场文书
民事起诉书范本
2015/05/19 职场文书
冰雪公主观后感
2015/06/16 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书