菜鸟向各位JS大神求救下
如何实现点击一个链接,然后图片会移动相应位置的问题.不太会表达,就是一个相册效果,如baidu图片效果那样的.求告知.!
[解决办法]
http://www.lanrentuku.com/js/xiangce.html
楼主 找找 看有合适的没?
[解决办法]
所有js 特效的关键
setTimeout 修改 css
[解决办法]
我也是新手，这篇是刚收录到笔记中的，用它的原理能达到你的要求
<!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> <title>向上循环滚动的图片展示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> #ad{ position:absolute; width:150px; height:200px; border:1px solid #000; overflow:hidden; } #ad ul{ position:absolute; list-style-type:none; margin:0; padding:0; } </style> <script language="javascript"> var ad = { o:null, // 存放滚动的UL cloneImg:null, //克隆UL的第一个图片 adY:0, //滚动值 distan:0, //每个图片的高度 init:function(obj){ if(!obj.style.top){ obj.style.top = '0px'; } this.cloneImg = obj.firstChild.cloneNode(true); //克隆第一个节点 if(this.cloneImg.nodeType == 3) this.cloneImg = obj.firstChild.nextSibling.cloneNode(true); //除IE外第一个节点为文本节点,这里做点调整,让克隆节点还是指向第一个元素 obj.appendChild(this.cloneImg); //让克隆的节点放入最后 this.adY = parseInt(obj.style.top); this.o = obj; this.distan = this.cloneImg.offsetHeight; //获取高度 this.moveCtrl(); }, moveCtrl:function(){ if(Math.abs(this.adY) == this.o.offsetHeight - this.distan) this.adY = 0; //当到达底部,让滚动直接跳回最上面 if(Math.abs(this.adY)%this.distan==0){ setTimeout('ad.moveCtrl()',2000); //对每个图片做停留,也就是延迟函数的循环 } else { setTimeout('ad.moveCtrl()',10); //运动循环 } --this.adY; ad.o.style.top = this.adY + 'px'; } } window.onload = function(){ var obj = document.getElementById('adul'); ad.init(obj); //直接把UL放入类里,就可以用了,类已基本封装好 } </script> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="ad"> <ul id="adul"> <li><img src="http://www.zzsky.cn/effect/images/huandeng1.jpg" width="150" height="200"></li> <li><img src="http://www.zzsky.cn/effect/images/huandeng2.jpg" width="150" height="200"></li> <li><img src="http://www.zzsky.cn/effect/images/huandeng3.jpg" width="150" height="200"></li> <li><img src="http://www.zzsky.cn/effect/images/huandeng4.jpg" width="150" height="200"></li> <li><img src="http://www.zzsky.cn/effect/images/huandeng5.jpg" width="150" height="200"></li> </ul> </div> </body> </html>
------解决方案--------------------
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function clickpage(num,count)
{
for(var i=1;i<=count;i++)
{
document.getElementById("li_"+i).className="lioff";
document.getElementById("text_"+i).style.display="none";
}
document.getElementById("li_"+num).className="lion";
document.getElementById("text_"+num).style.display="block";
}
var numt=1;
function settimechange()
{
numt++;
if(numt==5)
numt=1;
clickpage(numt,4)
setTimeout("settimechange()",2000);
}
</script>
<style>
#ul_h{
list-style-type:none;
margin:0px;
padding:0px;}
#ul_h li{
float:left;
display:block;
width:95px;
height:25px;
text-indent:40px;
padding:0px;
margin:0px;
padding-top:5px;
cursor:pointer;}
.lioff{
background:url(images/labboff.gif);}
.lion{
background:url(images/labbon.gif);}
</style>
</head>
<body>
<div style="width:1024px;">
<ul id="ul_h">
<li id="li_1" onclick="clickpage(1,4);numt=1;" class="lion">aa</li>
<li id="li_2" onclick="clickpage(2,4);numt=2;" class="lioff">bb</li>
<li id="li_3" onclick="clickpage(3,4);numt=3;" class="lioff">cc</li>
<li id="li_4" onclick="clickpage(4,4);numt=4;" class="lioff">dd</li>
</ul>
<div style="clear:both;"></div>
<div id="text_1" style="display:block;">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="text_2" style="display:none;">bbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="text_3" style="display:none;">ccccccccccccccccccccccc</div>
<div id="text_4" style="display:none;">ddddddddddddddddddddddd</div>
</div>
</body>
</html>
<script language="javascript">
settimechange();
</script>