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 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
随机推荐
- 廖雪峰Java3异常处理-2断言和日志-2使用JDK Logging
1.日志 为了取代System.out.println() 可以设置输出样式 可以设置输出级别,禁止某些级别输出 可以被重定向到文件 可以按包名控制日志级别 2.JDK内置Logging 在java. ...
- echo() print() printf() print_r() 的区别
echo是一个语言结构而非函数,因此它无法被变量函数调用, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print() 只能打印出简单类型变量的值(如int ...
- java之基本数据类型
11,java里面有没有long double类型或者比double更精度的? =========== 11,java里面有没有long double类型或者比double更精度的? java的基本数 ...
- [UE4]控件模板参数
创建的时候就会变成这样了.
- 优化:js 逻辑运算符优化
运算符的代码优化,可以精简代码,提高代码可读性 下面主要讨论下逻辑运算符与 &&, 或||. 示例: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭 ...
- MySQL架构之keepalived+haproxy+mysql 实现MHA中slave集群负载均衡的高可用(原创)
MySQL的高可用方案一般有如下几种:keepalived+双主,MHA,PXC,MMM,Heartbeat+DRBD等,比较常用的是keepalived+双主,MHA和PXC. HAProxy是一款 ...
- 三种方式控制GPIO
BBB为REV C,emmc4G版本,系统为Debian 7.9 wheezy (2015.11.12),内核为Linux 3.8.13.使用命令cat /etc/dogtag查看 查看系统信息的四种 ...
- ajax的跨域解决方案(java+ajax)
简单的建立一个后台项目 新建servlet: 内容如下: package a; import java.io.IOException; import java.io.PrintWriter; impo ...
- linux chown命令解除文件夹的root权限限制
sudo chown -R demouser file 这个命令可以解除linux文件的超级权限限制 摘录: chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名 ...
- Json1:使用gson解析、生成json
Json解析: 1.json第三方解析包:json-lib.gson.jackson.fastjson等2.Google-gson只兼容jdk1.5版本以上:JSON-lib分别支持1.4和1.53. ...