WEB頁(yè)面需要展示網(wǎng)站最新信息，如微博動(dòng)態(tài)、余票信息、路況監(jiān)控等項(xiàng)目中常見的實(shí)時(shí)數(shù)據(jù)滾動(dòng)效果，我們可以用jQuery來(lái)實(shí)現(xiàn)前端信息滾動(dòng)效果。本文我們將結(jié)合實(shí)例為大家講解如何使用jQuery來(lái)實(shí)現(xiàn)圖文信息滾動(dòng)效果。
我們以新浪微博信息滾動(dòng)為背景，html中包含了多條微博圖文信息，結(jié)構(gòu)如下：
<div id="con"> <ul> <li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/ 50/1290146312/1" /></a> <h4><a href="#">李開復(fù)</a></h4> <p>【領(lǐng)導(dǎo)力的四個(gè)境界】境界一：?jiǎn)T工因?yàn)槟愕穆毼欢哪悖痪辰缍簡(jiǎn)T工因?yàn)槟愕哪芰Χ哪悖?境界三：?jiǎn)T工因?yàn)槟愕呐囵B(yǎng)而服從你，他們感恩于你對(duì)他們的尊重、培養(yǎng)和付出； 境界四：?jiǎn)T工因?yàn)槟愕臑槿恕Ⅶ攘ΑL(fēng)范、價(jià)值觀而擁戴你。（轉(zhuǎn)）</p> </li> ...更多內(nèi)容... </ul> </div>
CSS
我們用CSS來(lái)美化頁(yè)面布局，以下是數(shù)據(jù)滾動(dòng)區(qū)的CSS代碼，當(dāng)然大家可以修改css定制不同的外觀效果。
ul,li{ list-style-type:none;} #con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative; border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;} #con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;} #con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; } #con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;} #con ul li h4{height:22px; line-height:22px; margin-left:60px} #con ul li p{ margin-left:60px;line-height:22px; } jQuery
原理：我們定義一個(gè)滾動(dòng)函數(shù)scrtime()，當(dāng)鼠標(biāo)滑向滾動(dòng)區(qū)域時(shí)，停止?jié)L動(dòng)（即清除scrtime），當(dāng)鼠標(biāo)離開時(shí)繼續(xù)滾動(dòng)，滾動(dòng)scrtime()的過(guò)程中，讓最后的li元素定時(shí)插入第一個(gè)li元素的上方，采用animate方法來(lái)改變li的高度和透明效果，實(shí)現(xiàn)動(dòng)畫加載效果，然后定時(shí)每隔3秒鐘執(zhí)行一次滾動(dòng)。
$(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime);//停止?jié)L動(dòng) },function(){ scrtime = setInterval(function(){ var ul = $("#con ul"); var liHeight = ul.find("li:last").height();//計(jì)算最后一個(gè)li元素的高度 ul.animate({marginTop : liHeight+40 +"px"},1000,function(){ ul.find("li:last").prependTo(ul) ul.find("li:first").hide(); ul.css({marginTop:0}); ul.find("li:first").fadeIn(1000); }); },3000); }).trigger("mouseleave"); }); 以上代碼實(shí)現(xiàn)了一個(gè)內(nèi)容持續(xù)向下滾動(dòng)的效果，每隔3秒內(nèi)容將從上部淡入，完成內(nèi)容滾動(dòng)效果。
補(bǔ)充
關(guān)于圖片自動(dòng)圓角處理，我們可以使用jquery.corner.js這個(gè)插件，使用靈活，兼容各瀏覽器，這個(gè)插件下載包里已經(jīng)為您準(zhǔn)備好了。當(dāng)然你也可以使用css3來(lái)控制圓角。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
