列表滚动效果制作

最新推荐文章于 2024-12-07 02:24:27 发布

chinajobs

最新推荐文章于 2024-12-07 02:24:27 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏：网页设计文章标签：滚动列表

本文链接：https://blog.csdn.net/chinajobs/article/details/50016007

网页设计专栏收录该内容

21 篇文章

订阅专栏

<div class="winlist fleft phbox">
<div class="phtitle">中奖名单</div>
<div class="enphtitle">winning list</div>
<div class="phboxcont">
<div class="phtop">
<ul>
<li class="td_01">会员账号</li>
<li class="td_02">场馆</li>
<li class="td_03">游戏名称</li>
<li class="td_04">中奖金额</li>
</ul>
</div>
<div class="tumble">
<ul>
<li style="float:none;">

66iaozhang9***


猛虎馆


高速公路之王


1325113.28

</li>
<li style="float:none;">

66iaozhang9***


猛虎馆


钢铁侠3
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


开心假期
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


高速公路之王
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


疯狂之七
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


绿巨人50线
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


深蓝海洋
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


船长宝藏
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


古怪猴子
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


钢铁侠
 1325113.28</li>
<li style="float:none;">
66iaozhang9***


猛虎馆


中国厨房
 1325113.28</li>
</ul>
</div>
</div>
</div>
<div class="gamelist fright phbox">
<div class="phtitle">游戏排行榜</div>
<div class="enphtitle">game list</div>
<div class="phboxcont">
<div class="phtop">
<ul>
<li class="td_01">排名</li>
<li class="td_02">场馆</li>
<li class="td_03">游戏名称</li>
<li class="td_04">出奖率</li>
</ul>
</div>
<div class="tumble">
<ul>
<li style="float:none;">
<label class="topmember">1</label>


猛虎馆


高速公路之王
 10%</li>
<li style="float:none;">
<label class="topmember">2</label>


猛虎馆


高速公路之王
 7%</li>
<li style="float:none;">
<label class="topmember">3</label>


猛虎馆


绿巨人&50线
 6%</li>
<li style="float:none;">
4


猛虎馆


高速公路之王
 5.5%</li>
<li style="float:none;">
5


猛虎馆


招财进宝
 5.1%</li>
<li style="float:none;">
6


猛虎馆


高速公路之王
 3%</li>
<li style="float:none;">
7


猛虎馆


古怪猴子
 3%</li>
<li style="float:none;">
8


猛虎馆


青岛市李沧区
 3%</li>
<li style="float:none;">
9


猛虎馆


城都市成华区
 3%</li>
<li style="float:none;">
10


猛虎馆


南京市玄武区
 3%</li>
</ul>
</div>
</div>
</div>

<div class="cl"></div>
</div>
<script type=text/javascript>
$(function(){
//init_jackpot(24853836.36);

$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};

var opts = $.extend({}, defaults, options),intId = [];

function marquee(obj, step){

obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}

this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);

_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});

});

}

$("div.tumble").myScroll({
speed:30,
rowHeight:50
});

//打开广告图
//open_index_box();
});

function open_index_box(){
$("#shade_bg").css({
display: "block", height: $(document).height()
});
var $index_box = $(".index_box");
$index_box.css({
//设置弹出层距离左边的位置
left: ($("body").width() - $index_box.width()) / 2,
//设置弹出层距离上面的位置
top: ($(window).height() - $index_box.height()) / 2,
display: "block"
});
}
function close_index_box(){

$("#shade_bg,.index_box").hide();
}

</script>

.index_info{background:#FFF; overflow:hidden}
.index_info .phbox {width:454px;font-size:14px;}
.phbox .phtitle {height:22px;line-height:22px;font-family:'微软雅黑';font-size:20px;font-weight:bold;}
.phbox .enphtitle {height:20px;line-height:12px;font-family:'微软雅黑';font-size:15px;color:#bbb6c2;margin:1px 0 10px;}
.phbox .phboxcont {background:#fff;}
.phbox .phtop {height:30px;line-height:30px; text-align:center;}
.phbox ul li {float:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; border-bottom:solid 1px #f2f1fd;}
.tumble{height:240px;overflow:hidden; clear:both;}
.tumble li{height:51px;line-height:51px;overflow:hidden;position:relative;}
.topmember{margin-top:13px;background-color:#f46f74;color:#fff;width:24px; height:24px; display:inline-block; text-align:center; line-height:24px; -moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius:8px; }
.tumble li p{float: left;text-align:center;}
.winlist {margin:60px 0 0 70px;}
.winlist .phtitle {color:#a46ef5;}
.winlist .phtop {background-color:#a879ff;font-size:14px; color:#fff;}
.winlist .td_01 {width:125px;text-align:center;}
.winlist .td_02 {width:70px;text-align:center;}
.winlist .td_03 {width:150px;text-align:center;}
.winlist .td_04 {width:109px;text-align:center;}

.gamelist {margin-top:60px; margin-right:70px;}
.gamelist .phtitle {color:#697cdf;}
.gamelist .phtop {background-color:#697cdf;font-size:14px; color:#fff;}
.gamelist .td_01 {width:60px;text-align:center;}
.gamelist .td_02 {width:150px;text-align:center;}
.gamelist .td_03 {width:150px;text-align:center;}
.gamelist .td_04 {width:94px;text-align:center;}