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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 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
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
pytorch标签转onehot形式实例
2020/01/02 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
教师工作能力自我评价
2015/03/04 职场文书
前台岗位职责范本
2015/04/16 职场文书
各种货币符号快捷输入
2022/02/17 杂记
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android