您的位置：首页 > Web前端 > JavaScript

用JS模拟向左移动的侧移式灯箱效果

2012-01-10 21:56 267 查看

HTML结构如下：

其中ahot是表示有几屏，现在正移动到哪一屏；

ohot表示整个灯箱，ihot也是整个灯箱，但先是隐藏起来的；

而dhot表示一屏灯箱，此处共四屏；

hot_div是表示一屏灯箱的一行，共四行，在实际案例里一行有三幅图片。

<div class="gg_title" id="leftmove_title"><p>花虎体坛点击热榜</p></div>
<div class="gg_body" id="leftmove">
<div id="ahot"><div><a>1</a><a>2</a><a>3</a><a>4</a></div></div>
<div id="ohot">
<div id="ihot" class="hidden">

<div class="dhot">
<div class="hot_div">

</div>

<div class="hot_div">

</div>

<div class="hot_div">

</div>

</div>

<div class="dhot">
<div class="hot_div">

</div>

<div class="hot_div">

</div>

<div class="hot_div">

</div>

</div>

<div class="dhot">
<div class="hot_div">

</div>

<div class="hot_div">

</div>

<div class="hot_div">

</div>

</div>

<div class="dhot">
<div class="hot_div">

</div>

<div class="hot_div">

</div>

<div class="hot_div">

</div>

</div>

</div>
</div>
</div>
<div class=vertical_space></div>

我这里直接贴上我实际的代码，供参考

接下来就那些div的class的定义了，我直接贴代码，我是用JS写的，你可以自己转换一下，很简单的。

#leftmove {width:386px;height:480px; position:relative;right:0px;}
#ahot {width:386px;height:25px;background-color:#0099CC;}
#ohot {width:386px;height:480px; overflow:hidden; position:relative;top:10px;}
#ihot {width:1800px;height:480px;position:relative;}
.dhot {float:left;width:386px;height:480px;}
#ahot a {float:left;position:relative;left:15px;display:block;cursor:pointer;width:30px;height:25px;line-height:25px;text-align:center;background: #0099CC;color:white;font-size:20px;font-weight:bold;}
#ahot div {float:left;display:block;position:relative;left:100px;}
#right_ad160x600 {float:right;width: 165px; height: 600px;background-color:#FF0000;color:#fff;font-size:20px;font-weight:bold;position:relative;text-align:center;top:40px;right:8px;}
.hot_div {position:relative;left:15px;width:386px;height:150px;}
.top_small_div {float:left;width:120px;height:120px;margin:auto auto auto 2px ;}
.top_small_img {width:100px;height:100px;border:2px solid #EAfAFA;padding:2px;}
.top_small_text {display:block;width:100px; height:20px;line-height:20px;overflow:hidden;text-align:center;}
.right_small_div {text-align:center;width:120px;height:120px;margin:auto auto auto 5px ;}
.my_colee_bottom {width: 155px; height: 700px; overflow: hidden;position:relative;top:5px;}
.gg_title {width:388px;background-color: #70B7C0;height:25px;background-repeat:no-repeat;font-weight: bold;padding-top: 5px;color:#fff;font-size:14px;position:relative;right:0px;}
.gg_body {width:386px;background-color:#DDDDDD;position:relative;right:0px;border-left: 1px solid #9599AD; border-right:1px solid #9599AD; border-bottom:2px solid #9599AD;}
.gg_title p {text-align:center;margin:0px;}
.vertical_space {height:5px;}
.hidden { display:none;}
#ad300x250 {width:305px;height:255px;font-size:20px;font-weight:bold;position:relative;text-align:center;left:10px;color:white;}
#ad300x2501 {width:305px;height:255px;font-size:20px;font-weight:bold;position:relative;text-align:center;left:10px;}
下面就是JS脚本了，仔细看吧，用了jquery，你还得在你的HTML文件里加上jquery

<script src="http://www.playtigers.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>

var hottotal=$(".dhot").length;
var hotwidth=$("#ohot").width();
var hotdistance=20;
var hotleft1=0;
var hotleft2=0;
var hotdis=0;
var hot2t,hot3t,hot4t;
function hotmove(){
var hotnext=hotdis+1;
if(hotnext>hottotal-1) {
hotleft1=-1*hotnext*hotwidth;
hotleft2=hotleft2+hotdistance;
hotleft3=hotleft2+"px";
if(hotleft2<0) {
if(hot2t) clearTimeout(hot2t);
if (hot4t) clearTimeout(hot4t);
$("#ihot").css({"left":hotleft3});
hot3t=setTimeout("hotmove()",10);
}
else {
if(hot3t) clearTimeout(hot3t);
$("#ahot a").eq(3).css({"color":"#fff"});
$("#ahot a").eq(0).css({"color":"red"});
$("#ihot").css({"left":"0px"});
hotdis=0;
hot4t=setInterval("hotmove()",8000);
}
}
else {
hotleft1=-1*hotnext*hotwidth;
hotleft2=hotleft2-hotdistance;
if(hotleft1<hotleft2) {
if (hot4t) clearTimeout(hot4t);
hotleft3=hotleft2+"px";
$("#ihot").css({"left":hotleft3});
hot2t=setTimeout("hotmove()",20);
}
else {
$("#ahot a").eq(hotdis).css({"color":"#fff"});
$("#ahot a").eq(hotnext).css({"color":"red"});
$("#ihot").css({"left":hotleft1});
if(hot2t) clearTimeout(hot2t);
hotdis=hotnext;
hot4t=setInterval("hotmove()",8000);
}
}
}

$(document).ready(function(){
$("#ahot a").eq(0).css({"color":"red"});
$(function(){
$('#leftmove').hover(
function () { if (hot4t) clearTimeout(hot4t);},
function () {hot4t=setInterval("hotmove()",8000);}
);

$('#ahot a').click(function(){
var thishot=$("#ahot a").index($(this));
$("#ahot a").eq(hotdis).css({"color":"#fff"});
$("#ahot a").eq(thishot).css({"color":"red"});
var thisleft=-1*thishot*hotwidth;
$("#ihot").css({"left":thisleft});
hotdis=thishot;
}
);
});
hot4t=setInterval("hotmove()",8000);
});

好了，这样大功告成了。我的效果图如下：一屏一屏地向左侧移动，看起来还是蛮动感的。

只是这个页面在博客园无法模拟啊，我再看看哪里问题。

花虎体坛点击热榜

1234