js模拟动画之 商品展示效果
来源：互联网 发布：中文电子数据库有哪些 编辑：程序博客网 时间：2024/04/30 13:53
<HEAD>
<TITLE>方框移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
body, td{
font-size: 9pt;
}
.hidden{display:none;}
.show{display:block;}
#fk{overflow:hidden;}
.default{background:white;color:blue;cursor:pointer;}
.highlight{background:blue;color:white;}
-->
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=0;//方框左位置
var top=0;//方框上位置
var width=0;//方框宽
var height=0;//方框高
var aimleft=0;//目标左位置
var aimtop=0;//目标上位置
var aimwidth=0;//目标宽
var aimheight=0;//目标高
var lb=0;//左步长
var tb=0;//上步长
var wb=0;//宽步长
var hb=0;//高步长
var fk = null;
var aim = null;
var aim1 = null;
var lastObj = null;
function initObj(oid){
if (!fk){fk = document.getElementById('fk');}
if (!aim){aim = document.getElementById('aim');}
if (!aim1)aim1 = document.getElementById('aim1');
if (oid)
append(fk,document.getElementById(oid),true);
}
function append(o,oc,cloned){
while (o.hasChildNodes())o.removeChild(o.firstChild);
if (cloned)oc = oc.cloneNode(true);
oc.className = 'show';
o.appendChild(oc);
}
/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
function setSource(obj,oid){
initObj(oid);
left = getOffset(obj).Left;
top = getOffset(obj).Top;
width = obj.offsetWidth;
height = obj.offsetHeight;
aimleft = getOffset(aim).Left;
aimtop = getOffset(aim).Top;
aimwidth = aim.offsetWidth;
aimheight = aim.offsetHeight;
if (lastObj)lastObj.className='default';
obj.className = 'highlight';
lastObj = obj;
fk.style.display='';
clearInterval(MyMar);
}
/**
* 设置方向步长、宽高步长
*/
function setStep(){
lb = (aimleft-left)/ci;
tb = (aimtop-top)/ci;
wb = (aimwidth-width)/ci;
hb = (aimheight-height)/ci;
}
/**
* 移动
*/
function move(){
setStep();
left+=lb;
top+=tb;
width+=wb;
height+=hb;
if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
fk.style.left = left+"px";
fk.style.top = top+"px";
fk.style.width = width+"px";
fk.style.height = height+"px";
}else{
if (fk)
while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
hiddenFK();
clearInterval(MyMar)
}
}
function hiddenFK(){
initObj();
fk.style.display='none';
}
/**
* 取得某元素在页面中相对页面左上顶点的位置
*/
function getOffset(obj){
var offsetleft = obj.offsetLeft;
var offsettop = obj.offsetTop;
while (obj.offsetParent != document.body)
{
obj = obj.offsetParent;
offsetleft += obj.offsetLeft;
offsettop += obj.offsetTop;
}
return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</SCRIPT>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
<TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)" class="default" id="test">笔记本</TD>
<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}" class="default">电冰箱</TD>
<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}" class="default">波比娃娃</TD>
<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
<TD id='aim1' valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
<TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)" class="default">笔记本</TD>
<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}" class="default">电冰箱</TD>
<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}" class="default">波比娃娃</TD>
<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div</div>
<div id="t2" class="hidden">第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div</div>
<div id="t3" class="hidden">第3个div</div>
<div id="t4" class="hidden">第4个div</div>
<div id="t5" class="hidden">第5个div</div>
<div id="t6" class="hidden" >很长很长很长很长很长的第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个</div>
<script>
setSource(document.getElementById('test'),'t1');MyMar=setInterval(move,speed)
</script>
</BODY>
<TITLE>方框移动</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
body, td{
font-size: 9pt;
}
.hidden{display:none;}
.show{display:block;}
#fk{overflow:hidden;}
.default{background:white;color:blue;cursor:pointer;}
.highlight{background:blue;color:white;}
-->
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=0;//方框左位置
var top=0;//方框上位置
var width=0;//方框宽
var height=0;//方框高
var aimleft=0;//目标左位置
var aimtop=0;//目标上位置
var aimwidth=0;//目标宽
var aimheight=0;//目标高
var lb=0;//左步长
var tb=0;//上步长
var wb=0;//宽步长
var hb=0;//高步长
var fk = null;
var aim = null;
var aim1 = null;
var lastObj = null;
function initObj(oid){
if (!fk){fk = document.getElementById('fk');}
if (!aim){aim = document.getElementById('aim');}
if (!aim1)aim1 = document.getElementById('aim1');
if (oid)
append(fk,document.getElementById(oid),true);
}
function append(o,oc,cloned){
while (o.hasChildNodes())o.removeChild(o.firstChild);
if (cloned)oc = oc.cloneNode(true);
oc.className = 'show';
o.appendChild(oc);
}
/*
* 取得对象位置、大小
* 取得目标对象位置、大小
*/
function setSource(obj,oid){
initObj(oid);
left = getOffset(obj).Left;
top = getOffset(obj).Top;
width = obj.offsetWidth;
height = obj.offsetHeight;
aimleft = getOffset(aim).Left;
aimtop = getOffset(aim).Top;
aimwidth = aim.offsetWidth;
aimheight = aim.offsetHeight;
if (lastObj)lastObj.className='default';
obj.className = 'highlight';
lastObj = obj;
fk.style.display='';
clearInterval(MyMar);
}
/**
* 设置方向步长、宽高步长
*/
function setStep(){
lb = (aimleft-left)/ci;
tb = (aimtop-top)/ci;
wb = (aimwidth-width)/ci;
hb = (aimheight-height)/ci;
}
/**
* 移动
*/
function move(){
setStep();
left+=lb;
top+=tb;
width+=wb;
height+=hb;
if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
fk.style.left = left+"px";
fk.style.top = top+"px";
fk.style.width = width+"px";
fk.style.height = height+"px";
}else{
if (fk)
while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
hiddenFK();
clearInterval(MyMar)
}
}
function hiddenFK(){
initObj();
fk.style.display='none';
}
/**
* 取得某元素在页面中相对页面左上顶点的位置
*/
function getOffset(obj){
var offsetleft = obj.offsetLeft;
var offsettop = obj.offsetTop;
while (obj.offsetParent != document.body)
{
obj = obj.offsetParent;
offsetleft += obj.offsetLeft;
offsettop += obj.offsetTop;
}
return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</SCRIPT>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
<TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)" class="default" id="test">笔记本</TD>
<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}" class="default">电冰箱</TD>
<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}" class="default">波比娃娃</TD>
<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
<TD id='aim1' valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
<TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)" class="default">笔记本</TD>
<TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}" class="default">电冰箱</TD>
<TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}" class="default">波比娃娃</TD>
<TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
<TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}" class="default">小家电</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div</div>
<div id="t2" class="hidden">第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div</div>
<div id="t3" class="hidden">第3个div</div>
<div id="t4" class="hidden">第4个div</div>
<div id="t5" class="hidden">第5个div</div>
<div id="t6" class="hidden" >很长很长很长很长很长的第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个</div>
<script>
setSource(document.getElementById('test'),'t1');MyMar=setInterval(move,speed)
</script>
</BODY>
- js模拟动画之 商品展示效果
- js 模拟淘宝商品广告的效果
- H5效果 对比展示商品
- JS之模拟QQ列表展示
- 商城商品展示JS特效
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- js模拟鼠标滑过展示title效果
- 《js动画效果》之速度动画
- 《js动画效果》之透明度动画
- 《js动画效果》之缓冲动画
- 《js动画效果》之缓冲动画
- 《js动画效果》之透明度动画
- 《js动画效果》之速度动画
- js动画效果之速度动画
- 迷信高科技
- 关于ClassLoader
- 架构设计师与SOA
- 选项卡-多点调用-特效
- 随便的感想
- js模拟动画之 商品展示效果
- 产品展示会用到的表格循环之（div+css）
- 一句话网站入侵专家（软件）
- 软件工程师必须知道的10个概念
- 字符数组与字符串间的转换
- JavaMail 群发的问题
- 对比赛打分现场进行硬件连线的拓扑图_【评委计分系统-双屏版】参考硬件连线
- 开发和部署一个简单的 JAX-WS2.0 Web 服务
- 业务驱动的开发(一)——业务驱动开发的主要步骤
