js 滑动门的实现
原理：滑动门，这里以图片进行实例，首先设定主盒子div的宽度和高度设定，并进行图片初始化位置的设定，然后将图片绑定事件，并设定要达到的效果
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/huadong.css">
<script src="./js/huadong.js"></script> </head>
<body>
<div class="container" Id="container" >
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
</div>
</body>
</html>
css代码：
*{
margin:;
padding:;
}
div{
position:relative;
border:1px solid #ccc;
margin:100px auto;
overflow: hidden;
width:600px;
height:300px;
}
img{
position:absolute;
left:;
border-left: 1px solid #CCC;
}
js代码（两种）：
1. 过程式实现方式：
window.onload = function(){
var obox = document.querySelector('div.container');
var aImgs = document.querySelectorAll('img');
var imgWidth = aImgs[0].offsetWidth;
var exposeWidth = 100;
var oboxWidth = imgWidth + exposeWidth*(aImgs.length-1);
var oboxHeight = aImgs[0].offsetHeight;
obox.style.width = oboxWidth + 'px';
obox.style.height = oboxHeight + 'px';
function set_position(){
for(var i=1;i<aImgs.length;i++){
aImgs[i].style.left = imgWidth + exposeWidth*(i-1) + 'px';
}
};
set_position();
var translate = imgWidth - exposeWidth;
// 添加自定义索引进行传递当前img 的索引
for(var i=0;i<aImgs.length;i++){
aImgs[i].index = i;
aImgs[i].onmouseover = function(){
set_position();
for(var j = 1;j<=this.index;j++){
aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
}
}
}
// // 采用立即表达式的方式传递img的索引
// for(var i=0;i<aImgs.length;i++){
// (function(i){
// aImgs[i].onmouseover = function(){
// set_position();
// for(var j = 1;j<=i;j++){
// aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
// }
// }
// }(i));
// }
// // 采用ES6 let 定义变量的方式传递当前索引
// for(let i=0;i<aImgs.length;i++){
// aImgs[i].onmouseover = function(){
// set_position();
// for(var j = 1;j<=i;j++){
// aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
// }
// }
// }
}
2. 采用构造函数式实现方式：
window.onload = function(){
// 创建构造函数
function huadong(){
this.odiv = document.querySelector('div.container');
this.aImgs = document.querySelectorAll('img');
this.imgWidth = this.aImgs[0].offsetWidth;
this.exposeWidth = 100 ;
};
// 设置图片的 left值
huadong.prototype.set_position = function(){
for(var i = 1;i<this.aImgs.length;i++){
this.aImgs[i].style.left = this.imgWidth + this.exposeWidth*(i-1) + 'px';
}
};
// 初始化，即设定div的宽度，并调用函数设定图片的left
huadong.prototype.init = function(){
var DivWidth = this.imgWidth + this.exposeWidth*(this.aImgs.length-1);
var DivHeight = this.aImgs[0].offsetHeight;
this.odiv.style.width = DivWidth + 'px';
this.odiv.style.height = DivHeight + 'px';
this.set_position();
};
// 鼠标在图片上时的效果
huadong.prototype.xiaoguo = function(btn){
var translate = this.imgWidth - this.exposeWidth;
this.set_position();
for(var j = 1;j<=btn.index;j++){
this.aImgs[j].style.left = parseInt( this.aImgs[j].style.left,10) - translate + 'px';
}
};
// 绑定鼠标事件
huadong.prototype.bind = function(){
this.init();
var that = this;
for(var i=0;i<this.aImgs.length;i++){
this.aImgs[i].index = i;
this.aImgs[i].onmouseover = function(){
that.xiaoguo(this);
}
}
};
var Newdonghua = new huadong();
Newdonghua.bind();
}
运行结果，两种方法都有效，结果一样：
js 滑动门的实现的更多相关文章
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- [Js]滑动门效果
描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...
- js滑动门及对像的使用
function scrollDoor() { } scrollDoor.prototype = { sd: function (menus, divs, openClass, closeClass) ...
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 代码简洁的滑动门（tab）jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
随机推荐
- jquery插件：textarea的字数提示、textBox的文字提示
引用文件: <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...
- css属性—position的使用与页面的分层介绍
一.引言: 在css众多属性中,position算是里面用的比较多也相对来说比较重要的属性了,它对于单个标签的“定位”.标签之间的“相对位置定位”还有网页的分层来说十分重要! 二.“定位的实现”具体介 ...
- Html的本质及在web中的作用
概要 本文以一个Socket程序为例由浅及深地揭示了Html的本质问题,同时介绍了作为web开发者我们在开发网站时需要做的事情 Html的本质以及开发需要的工作 1.服务器-客户端模型 其实,对于所有 ...
- is not valid JSON: json: cannot unmarshal string into Go value of type map[string]interface | mongodb在windows和Linux导出出错
执行mongoexport命令的时候 mongoexport --csv -f externalSeqNum,paymentId --host 127.0.0.1:27017 -d liveX -c ...
- svn在commit后报错:is scheduled for addition, but is missing
删除文件夹后点commit提交,但是报错,报错内容如下: 提示 "svn: Commit failed (details follow): svn: '/***/xxx.c' is sche ...
- javascript-typeof篇
isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber ...
- web前端 3大储存 Cookie、localStorge、sessionStorage
Cookie: //setCookie function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime ...
- C# webbrowser全掌握（二）
全篇引用单元mshtml; 路径:C:\windows\assembly\GAC\Microsoft.mshtml\7.0.3300.0__b03f5f7f11d50a3a\Microsoft.msh ...
- Google C++命令规范
最近发现自己在开发程序的过程中,经常会将好几种命名规范进行混用,这样使得程序的可读性下降,于是乎依然决定学习并使用Google的命令规范,并且坚持使用. copy from https://www.c ...
- Django的select_related 和 prefetch_related 函数优化查询
在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子详解这两个函数的作用.虽然Q ...