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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
红米手机抢购的js代码
Mar 10 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 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中for循环语句的几种变型
2006/11/26 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php引用传值实例详解学习
2013/11/06 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP分享图片的生成方法
2018/04/25 PHP
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Django数据库表反向生成实例解析
2018/02/06 Python
浅析matlab中imadjust函数
2020/02/27 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
C#笔试题
2015/07/14 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
物流专业自荐信
2014/05/23 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
门店店长岗位职责
2015/04/14 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
MySQL如何构建数据表索引
2021/05/13 MySQL
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Django rest framework如何自定义用户表
2021/06/09 Python