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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
js中unicode转码方法详解
Oct 09 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
JointJS JavaScript流程图绘制框架解析
Aug 15 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 SEO优化之URL优化方法
2011/04/21 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python字典序问题实例
2014/09/26 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
银行求职推荐信范文
2013/11/30 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
优秀员工自荐书
2015/03/06 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
企业培训简报范文
2015/07/20 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Go并发4种方法简明讲解
2022/04/06 Golang