js实现交换运动效果的方法
本文实例讲述了js实现交换运动效果的方法。分享给大家供大家参考。具体分析如下：
实现后的效果，点击互相交换位置和距离左边和上角的信息。
要点一：
var now = s_pic_li[0];
for(var i=0; i<s_pic_li.length; i++){
s_pic_li[i].onclick = function(){
if(this == now) return false;
var w = now.offsetWidth;
var h = now.offsetHeight;
var l = now.offsetLeft;
var t = now.offsetTop;
var w1= this.offsetWidth;
var h1 = this.offsetHeight;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
startrun(now,{width:w1,height:h1,left:l1,top:t1});
startrun(this,{width:w,height:h,left:l,top:t});
now=this;
}
}
循环给每一块加点击事件，获取交换双方的信息，然后执行运动函数，相关信息做为参数。
最后，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body,ul,li{margin:0; padding:0;
font:18px/1.5 arial; color:#333;}
#big_pic{width:500px; height:400px;
background:#ccc; text-align:center;
position:absolute;}
#s_pic li{float:left; width:100px;
height:80px; display:inline;
background:#06c; text-align:center;
position:absolute; top:310px;}
-->
</style>
<script>
<!--
window.onload = function(){
var s_pic = document.getElementById("s_pic");
var s_pic_li = s_pic.getElementsByTagName("li");
var now = s_pic_li[0];
for(var i=0; i<s_pic_li.length; i++){
s_pic_li[i].onclick = function(){
if(this == now) return false;
var w = now.offsetWidth;
var h = now.offsetHeight;
var l = now.offsetLeft;
var t = now.offsetTop;
var w1= this.offsetWidth;
var h1 = this.offsetHeight;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
startrun(now,{width:w1,height:h1,left:l1,top:t1});
startrun(this,{width:w,height:h,left:l,top:t});
now=this;
}
}
}
function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startrun(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isall = true;
for(var attr in json){
var cur=0;
if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
var speed = (json[attr] - cur)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur != json[attr]){
isall = false;
}
if(attr == "opacity"){
obj.style.filter = "alpha(opacity="+(cur+speed)+")";
obj.style.opacity = (cur+speed)/100;
}else{
obj.style[attr] = cur+speed+"px";
}
}
if(isall){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//-->
</script>
</head>
<body>
<ul id="s_pic">
<li style="left:0; top:0; width:400px; height:300px">0</div>
<li style="left:0;">1</li>
<li style="left:110px;">2</li>
<li style="left:220px;">3</li>
<li style="left:330px;">4</li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js实现同一页面多个运动效果的方法
本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点
-
JS匀速运动演示示例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js简单实现点击左右运动的方法
本文实例讲述了js简单实现点击左右运动的方法.分享给大家供大家参考.具体分析如下: 这里可实现点击向右,方块向右移动,点击向左,方块向左移动的效果 可以用setInterval来实现过多长时间,div移动多长的距离来实现运动效果. 要点一:如果元素的左边距离小于目标距离,则是正向移动,否则是负向移动 if(run.offsetLeft <target){ speed = 2; }else{ speed = -2; } 要点二:如果元素的左边距离等于目标距离,停止定时器,否则,元素的左边距离等于现
-
纯js模拟div层弹性运动的方法
本文实例讲述了纯js模拟div层弹性运动的方法.分享给大家供大家参考.具体如下: 特性: 1. 支持各项常数自定义 2. 理论支持所有元素,只需修改style.width,你懂得 3. 已知支持浏览器:chrome/firefox/IE7.8.9 <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script type="te
-
JS实现多物体缓冲运动实例代码
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> div { width: 100px
-
JS多物体 任意值 链式 缓冲运动
复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h
-
js运动框架_包括图片的淡入淡出效果
复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l
-
JS实现匀速运动的代码实例
效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 100px; height: 10
-
js实现交换运动效果的方法
本文实例讲述了js实现交换运动效果的方法.分享给大家供大家参考.具体分析如下: 实现后的效果,点击互相交换位置和距离左边和上角的信息. 要点一: var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHeight; v
-
js实现缓冲运动效果的方法
本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO
-
js实现同一页面多个不同运动效果的方法
本文实例讲述了js实现同一页面多个不同运动效果的方法.分享给大家供大家参考.具体分析如下: 要点一: function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } 从样式表中根据id和属性名取值. 要点二: if(attr == "opacity"){ cur = Math.rou
-
JS实现滑动门效果的方法详解
本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl
-
JS实现文字掉落效果的方法
本文实例讲述了JS实现文字掉落效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru&quo
-
JS实现霓虹灯文字效果的方法
本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html
-
js实现星星打分效果的方法
本文实例讲述了js实现星星打分效果的方法.分享给大家供大家参考.具体分析如下: 很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果. 效果详解 1. 鼠标移上的时候星星点亮,下面的文字显示.鼠标移出的时候星星为灰,下面文字不显示. 2. 鼠标移到某个星星上,它之前的所有星星都会亮. 3. 鼠标移到某个星星上并点击,会显示打分结果. 代码如下 <!doctype html> <html> <head> <meta charset="
-
js实现图片漂浮效果的方法
本文实例讲述了js实现图片漂浮效果的方法.分享给大家供大家参考.具体分析如下: 描述:打开网页就看到不停在飘动的图片,点击连接到其他页面:起到着重强调的效果! 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title>
-
JS模拟键盘打字效果的方法
本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23