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重载函数的辅助方法2
Jul 04 Javascript
js正则表达式的使用详解
Jul 09 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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使用curl存储cookie的示例
2014/03/31 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Laravel下生成验证码的类
2017/11/15 PHP
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
canvas的神奇用法
2017/02/03 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
python中split方法用法分析
2015/04/17 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python:socket传输大文件示例
2017/01/18 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
网页美工求职信
2014/02/15 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
岗位聘任书范文
2014/03/29 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
2016大学军训心得体会
2016/01/11 职场文书
python OpenCV学习笔记
2021/03/31 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python