Welcome, Old Sport!

一款新闻自动滚动播放效果CSS & jQuery

by ilikecss ON 2010/09/28 11643

前些日子,一个网友在 Blog 给我留言,说想要我 首页 上的一款新闻滚动播放效果的制作方法,我答应他了,因该一直在忙于改版,所以这事情拖了很久,对不住了。现在我已经把这款效果整理了一下,下面和各位分享,如果喜欢的话请给我留言。

Step1. 创建HTML

<div id="news">
    <h2>WHAT'S NEWS</h2>
        <!-- Displaying News Module -->
        <!-- News Categories: '' -->
        <div id="newsticker"> 
            <ul id="newstickerlist">
            <li><p><a href="http://ilikecss.com/news/20100820.html#NEWS01" target="_blank">Australia election rivals neck and neck</a></p></li>
            <li><p><a href="http://ilikecss.com/news/20100820.html#NEWS02" target="_blank">Actor Ernest Borgnine to receive lifetime award</a></p></li>
            <li><p><a href="http://ilikecss.com/web-design/examples/jquery/20100813/" target="_blank">Color Hover Effect with CSS &amp; jQuery</a></p></li>
            <li><p><a href="http://ilikecss.com/tv/primeval/" target="_blank">BBC TV Primeval</a></p></li>
            <li><p><a href="http://ilikecss.com/worldcup2010/nikefootballmv/" target="_blank">Write The Future</a></p></li>
            </ul>
        </div>
    <!-- /NEWS -->
</div>

Step2. 创建CSS

div#news {
	width: 640px;
	float: left;
	height: 30px;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
}
div#news h2 {
	width:91px;
	background: transparent url(http://ilikecss.com/images/what_news.jpg) no-repeat left center;
	display: inline;
	float: left;
	height: 20px;
	padding: 17px 10px 0 0;
	text-indent: -9999px;
}
div#news p {
	color: #018FD4;
	font-family: "lucida sans",Sans-serif;
	font-weight: bold;
	line-height: 40px;
	text-align: left;
}
div#newsticker a {
	color: #018FD4;
	text-decoration: none;
}
div#newsticker {
	overflow: hidden;
	position: relative;
}
div#newsticker ul {
	list-style-type: none;
	min-height: 1.6em;
}

Step3. 插入jQuery和脚本包

这款效果的 jQuery 代码较多,请下载使用,已整合。

12条评论
  1. #1

    airoschou说道:

    我这里是不能评论还是怎么的??大家多留言啊,谢谢啊。

  2. #2

    ry99cn说道:

    嘿嘿,就是我要求的,谢谢您的分享精神!!

  3. Lance, that logic is flawed :D,Lizzie

  4. Great writing! I want you to follow up to this topic?!

  5. #5

    un说道:

    太强了,给的都是精华部分,使用率很高

  6. #6

    星陨如风说道:

    不是不想留言
    而是博主你的东西实在太好了
    而且还提供免费的做好了的效果下载
    都忙着下了 嘿嘿
    感谢螺柱伟大无私的分享!!

  7. #7

    星陨如风说道:

    真的很厉害
    多顶几次!!

  8. #8

    Yan说道:

    :smile: 好厉害啊




TOP