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 相关文章推荐
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
js窗口震动小程序分享
Nov 28 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
Openlayers实现距离面积测量
Sep 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Django 中 cookie的使用
2017/08/17 PHP
php实现session共享的实例方法
2019/09/19 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python对wav文件的重采样实例
2020/02/25 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
生产总经理岗位职责
2013/12/19 职场文书
机电一体化职业规划书
2014/01/07 职场文书
12岁生日感言
2014/01/21 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
大学生活感想
2015/08/10 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS