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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
es6新特性之 class 基本用法解析
May 05 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python timestamp和datetime之间转换详解
2017/12/11 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Django使用rest_framework写出API
2020/05/21 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
初中化学教学反思
2014/01/23 职场文书
工作建议书范文
2014/05/13 职场文书
十八大演讲稿
2014/05/22 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
高考学习决心书
2015/02/04 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
素质教育学习心得体会
2016/01/19 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android