如题。
最近这个项目需要实现类似于好乐买的这种中奖名单的效果:
http://www.okbuy.com/act/newyear?from=0100507652c0d4f6e43b0#006
经过我的一番努力,最终终于让我找到这个非常牛逼的插件:MSclass.
项目主页: http://popub.net:81/script/MSClass.html
最终我实现的效果如下:这个链接可能会失效
http://img3.taodiantong.cn/v51259/cuxiao/2014-01/kuanian2/index.html#f0
各位可以通过我的教程来使用我的这个效果:
下面贴上我的实现代码,这期中可能会包含一些后台的代码,我会尽量删掉的。不好意思。
1.依赖:
<!--获奖名单轮播-->
<script src="../res/MSClass.js" type="text/javascript"></script>
<script> new Marquee(["hottitle","ulid"],0,2,270,160,150,0,0);//这里设置的是第二,三,四个参数,分别是滑动的宽度,高度,速度</script>
2.HTML:
<!--获奖名单循环展示-->
<div class="list_top">
<p class="title">已有<span id="numberTotal" class="number">3000</span> 个幸运儿中奖</p>
<div id="hottitle" class="hot">
<ul id="ulid">
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
<li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
</ul>
</div>
</div>
3.CSS:
/*获奖名单轮播*/
.title{
width:240px;
height:40px;
font-family:"微软雅黑";
font-size:16px;
font-weight:bold;
border-bottom:#7b3a12 solid 1px;
color:#7b3a12;
text-align:center;
line-height:40px;
margin:0 auto;
}
.number{
font-size:20px;
color:#900;
font-style:italic;
}
.list_top{
width:265px;
height:215px;
overflow:hidden;
background:#FFF;
float:left;
margin-top:20px;
margin-left:7px;
}
.list_top .Empty{
width:40px;
height:40px;
float:left;
}
.hot{
width:255px;
height:40px;
margin-left:15px;
margin-top:5px;
margin-bottom:10px;
}
.hot ul{
overflow:hidden;
margin:0;
padding:0;
}
.hot ul li{
width:240px;
height:20px;
float:left;
line-height:20px;
}
.name{
color:#000;
font-size:10px;
font-family:"verdana";
display:block;
float:left;
width:120px;
height:20px;
overflow: hidden;
}
.gift-type{
color:#7b3a12;
font-size:10px;
font-family:"verdana";
display:block;
float:left;
width:120px;
height:20px;
}
/*抽奖位置css结束*/
这里就是我实现获奖名单轮播的效果。该js插件还可以使用很多其他的功能。具体请大家自己研究。