您的位置：首页 > 其它

新闻无缝滚动插件

2017-08-31 18:47 302 查看

<!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=gb2312" />

<title>插件</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/scroll.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$('.list_lh li:even').addClass('lieven');

})

$(function(){
$("div.list_lh").myScroll({
speed:40,
rowHeight:68
});

});

</script>

</head>

<body>

<div class="box">
<div class="bcon">
<div class="list_lh">
<ul>
<li>
<p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">ÁìºÅ</a><em>»ñµÃ</em></p>
<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">ÍøÓÎÕ½½ºþ¹«²âºÀ»ªÀñ°ü</a><span>17:28:05</span></p>
</li>

</ul>
</div>

</div>

</div>

</body>
</html>

JS

// JavaScript Document

(function($){
$.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);
});

});

}

})(jQuery);

CSS

/* CSS Document */

*{margin:0;padding:0;font-size:12px;}

body{ background:none;}

input,button,select,textarea{outline:none;}

ul,li,dl,ol{list-style:none;}

a{color:#666; text-decoration:none;}

.box{ width:980px; margin:0 auto;}

.bcon{ width:270px; border:1px solid #eee; margin:30px auto;}

.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}

.bcon h1 b{ font:bold 14px/40px '宋体'; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;}

.list_lh{ height:400px; overflow:hidden;}

.list_lh li{ padding:10px;}

.list_lh li.lieven{ background:#F0F2F3;}

.list_lh li p{ height:24px; line-height:24px;}

.list_lh li p a{ float:left;}

.list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}

.list_lh li p span{ color:#999; float:right;}

.list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}

.btn_lh:hover{ color:#fff; text-decoration:none;}

.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航