javascript图片滑动效果实现


Posted in Javascript onJanuary 28, 2021

本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图:

javascript图片滑动效果实现

鼠标滑过那张图,显示完整的哪张图,移除则复位:

javascript图片滑动效果实现

简单的CSS加JS操作DOM实现:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>sliding doors</title>
 <link rel="stylesheet" href="styles/reset.css" />
 <link rel="stylesheet" href="styles/slidingdoors.css" />
 <script src="scripts/slidingdoors.js"></script>
 </head>
 <body>
 <div id='container'>
 <img src="images/door1.png" alt="1080P神器" title="1080P神器" />
 <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
 <img src="images/door3.png" alt="四核5寸" title="四核5寸" />
 <img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
 </div>
 </body>
</html>

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;
}

js操作:

window.onload = function() {
 //容器对象
 var box = document.getElementById('container');

 //获得图片NodeList对象集合
 var imgs = box.getElementsByTagName('img');

 //单张图片的宽度
 var imgWidth = imgs[0].offsetWidth;

 //设置掩藏门体露出的宽度
 var exposeWidth = 180;

 //设置容器总宽度
 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
 box.style.width = boxWidth + 'px';

 //设置每道门的初始位置
 function setImgsPos() {
 for (var i = 1, len = imgs.length; i < len; i++) {
 imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
 }
 }
 setImgsPos();

 //计算每道门打开时应移动的距离
 var translate = imgWidth - exposeWidth;

 //为每道门绑定事件
 for (var i = 0, len = imgs.length; i < len; i++) {
 //使用立即调用的函数表答式,为了获得不同的i值
 (function(i) {
 imgs[i].onmouseover = function() {
 //先将每道门复位
 setImgsPos();
 //打开门
 for (var j = 1; j <= i; j++) {
  imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
  //imgs[j].style.left = j*exposeWidth +"px";
 }
 };
 imgs[i].onmouseout = function(){
 setImgPos();
 };
 })(i);
 }
};

更多关于滑动效果的专题,请点击下方链接查看:

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
九种原生js动画效果
Nov 11 #Javascript
js文字横向滚动特效
Nov 11 #Javascript
详解javascript遍历方式
Nov 11 #Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
jquery原理以及学习技巧介绍
Nov 11 #Javascript
You might like
php adodb介绍
2009/03/19 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
浅析php数据类型转换
2014/01/09 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
获取body标签的两种方法
2011/10/13 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python中class的定义及使用教程
2019/09/18 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
大二自我鉴定
2014/01/31 职场文书
施工协议书范本
2014/04/22 职场文书
禁毒宣传标语
2014/06/19 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
社区安全温馨提示语
2015/07/14 职场文书