新闻滚动的实现

 

<!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 type="text/javascript" src="../sea/js/jquery-1.7.1.min.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
img{
    border:none;
}
ul li{
    list-style:none;
}
.global_module{
    position:relative;
    background:#fff;
    margin:50px;
    width:180px;
    padding-bottom:8px;
    border:1px solid #e6e6e6;
}
ul{
    padding:1px;
}
.global_module h3 { 
    height:26px; 
    background:#08BECE;
    color:#FFF; 
    line-height:26px; 
    text-indent:6px;
}
.scrollNews{
    width:180px;
    height:85px;
    line-height:20px;
    overflow:hidden;
}
.module_up_down{
    position:absolute;
    top:9px;
    right:10px;
    cursor:pointer;
}
a{
    text-decoration:none;
    color:#0287CA;
    font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/*slideToggle*/
    $(".module_up_down").toggle(function(){
        var $self=$(this);
        $self.prev().slideToggle(600,function(){
            $("img",$self).attr("src","images/up.gif");        
        });
    },function(){
        var $self=$(this);
        $self.prev().slideToggle(600,function(){
            $("img",$self).attr("src","images/down.gif");        
        });
    })
/*slideToggle end*/

var $this=$(".scrollNews");
var scrollTimer
$this.hover(function(){
    clearInterval(scrollTimer);
},function(){
    scrollTimer=setInterval(function(){
        scrollNews($this);
    },1000)
}).trigger("mouseleave");

function scrollNews(obj){
    var $self=obj.find("ul:first");    
    var lineHeight=$self.find("li:first").height();
    $self.animate({"marginTop":-lineHeight+"px"},600,function(){
        $self.css({marginTop:0}).find("li:first").appendTo($self);
    });
}


})
</script>
</head>

<body>

<div class="global_module news">
            <h3>最新动态</h3>
            <div class="scrollNews" >
                <ul>
                    <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                    <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                    <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                    <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                    <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                    <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                    <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                </ul>
            </div>
            <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
</div>
</body>
</html>



两个小图：    

 

posted @ 2012-03-05 17:52  猪弟  阅读(162)  评论(0)    收藏  举报