[Js]滑动门效果
描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌
一、没有动画效果的运动
思路:
1.定好每张图片的初始位置(第一张完全显示,234只露出一部分)
2.计算每道门的移动距离(即未显露的部分)
3.绑定鼠标滑过事件
window.onload=function(){
var box=document.getElementById("box");
var img=box.getElementsByTagName("img");
//单张图片宽度
var imgWidth=img[0].offsetWidth;
//露出的宽度
var exposeWidth=160;
//设置容器总宽度
var boxWidth=imgWidth+exposeWidth*(img.length-1)
box.style.width=boxWidth+"px";
//设置图片初始位置
function setImgspos(){
for(var i=1,len=img.length;i<len;i++){ //len在for循环的初始化语句里先定义好,这样就不需要每次都计算img的个数了,比for(var i=1;i<img.length;i++)性能高
img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
}
}
setImgspos();
//计算每道门打开时应移动的距离
var translate=imgWidth-exposeWidth;
for(var i=0,len=img.length;i<len;i++){
(function(i){ //这里为什么需要匿名函数?(简单来说是函数变量作用域的问题)img[i].onmouseover=function(){}这个函数内部使用了变量i,但是i没有定义,于是向外查找,找到for循环里定义的i,点击事件是for循环执行完毕后才开始执行的,即此时i=4,所以会报错img[i]没有定义,这里加一层匿名函数相当于闭包处理,i以形参的方式传递给内层函数
img[i].onmouseover=function(){
setImgspos(); //每次移上去先重置位置
for(var j=1;j<=i;j++){ //第二个循环体作用:可能会移多道门(比如放到第三道门上,二和三都要动,不是只动三,另外第一道门永远不动)
img[j].style.left=parseInt(img[j].style.left)-translate+"px";
}
};
})(i); //这个i是实参
}
};
二、展开加速、收拢减速的运动
注意:设置每道门初始位置时,不需要在写一个function了,因为要分别写打开和关闭动画,会造成一个卡顿,瞬间闪烁。
思路:
1.需要鼠标滑过这道门的初始位置
2.需要鼠标滑过这道门的结尾位置
3.需要一个速度和定时器来完成缓缓移动的过程
window.onload=function(){
var box=document.getElementById("box");
var img=box.getElementsByTagName("img");
//单张图片宽度
var imgWidth=img[0].offsetWidth;
//露出的宽度
var exposeWidth=160;
//设置容器总宽度
var boxWidth=imgWidth+exposeWidth*(img.length-1)
box.style.width=boxWidth+"px";
//设置图片初始位置
for(var i=1,len=img.length;i<len;i++){
img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
}
function openDoor(el,translate){
var begin=parseInt(el.pos);
var end=begin-translate;
var iSpeed=10;
setTimeout(function(){
el.style.left=parseInt(el.style.left)-iSpeed+"px"; //为什么不用begin?每次的初始位置会变
iSpeed*=1.5; //没有这句话就是匀速运动
if(parseInt(el.style.left)<=end){
el.style.left=end+"px";
}else{
setTimeout(arguments.callee,25); //定时器有名字可以直接调用,没名字,就用原生js方法arguments.callee
}
},25);
};
function closeDoor(el,translate){
var begin=parseInt(el.pos)-translate; //关门默认情况是张开的
var end=begin+translate; //这里可以直接写var end=parseInt(el.pos);
var iSpeed=100;
setTimeout(function(){
el.style.left=parseInt(el.style.left)+iSpeed+"px"; //为什么不用begin?每次的初始位置会变
iSpeed=Math.ceil(iSpeed*0.7); //没有这句话就是匀速运动
if(parseInt(el.style.left)>=end){
el.style.left=end+"px";
}else{
setTimeout(arguments.callee,25); //定时器有名字可以直接调用,没名字,就用原生js方法arguments.callee
}
},25);
};
var translate=imgWidth-exposeWidth;
for(var i=0,len=img.length;i<len;i++){
(function(i){
img[i].onmouseover=function(){
//开门 自己和自己左边的全部循环到
for(var j=1;j<=i;j++){
openDoor(img[j],translate);
}
//关门 自己右边的全部循环到
for(var j=i+1;j<img.length;j++){
closeDoor(img[j],translate);
}
};
})(i);
}
};
[Js]滑动门效果的更多相关文章
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- js 滑动门的实现
原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- JS实现滑动门效果
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- 【原生JS】滑动门效果
效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...
- js滑动提示效果
js代码 漂亮的动画效果:在靠右上角:背景颜色为红,字体颜色为白色 滑动 变大 上移 缓慢渐变消失 function tishi() { $("#tishi").attr(&q ...
- DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [Jquery]滑动门效果
$(function(){ var $box=$("#box"); var $img=$box.find("img"); var imgWid ...
随机推荐
- MySQL Server 5.7解压版缺少文件无法启动
如题: 一般认为5.7中mysql目录下 缺少data/mysql/目录,导致无法启动: 解决方案: 重新安装5.6即可: 1.删除5.7中安装的服务: 到mysql\bin目录下运行:mysqld ...
- JavaWeb项目的classpath说明
概念解释: classpath : 即项目中WEB-INF下面的classes目录; 应用: [01] src路径下的文件在编译后会放到WEB-INF/classes路径下.默认的classpath是 ...
- bootstrap 图片轮播效果
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...
- ajax 、ajax的交互模型、如何解决跨域问题
1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...
- 在SSH框架中使用Spring的好处
在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为它将JDBC做了一个良好的封装,程序员在与数据库进行交互时可以不用书写大量的SQL语句.Struts是用来 ...
- jquery 获取鼠标位置
//获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...
- Bootstrap的标题
一.定义标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样 ...
- 转!!Java垃圾回收机制
1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...
- Rocketmq-尝试理解
普通的信息发送和消费 首先要启动nameserver和broker,nameserver是一个几乎无状态节点.broker分为master和slave,master和slave的对应关系通过指定相同的 ...
- webpages框架中使用Html.TextArea()在前台显示多行信息时,如何进行大小、样式的设置
环境:vs2015 webpages框架+razor语法: 目的:服务器进行数据更新操作后,在前台显示更新的相关信息: 后台代码:将更新条数等相关信息存储在一个变量中: @{ var serverIn ...