0712-2888027 189-8648-0214
微信公眾號

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > JQuery文字向上滾動鼠標移入懸停,移出繼續(xù)滾動

JQuery文字向上滾動鼠標移入懸停,移出繼續(xù)滾動

時間:2024-10-14來源:風(fēng)信官網(wǎng) 點擊: 268次

JQuery文字向上滾動鼠標移入懸停,移出繼續(xù)滾動特效代碼如下:

HTML結(jié)構(gòu):

<div id="scrollDiv" class="scrollDiv">
<ul>
<li><a href="#" title="第一行文字內(nèi)容……">第一行文字內(nèi)容…… <span class="time">2024-10-14</span></a></li>
<li><a href="#" title="第二行文字內(nèi)容……">第二行文字內(nèi)容…… <span class="time">2024-10-09</span></a></li>
<li><a href="#" title="第三行文字內(nèi)容……">第三行文字內(nèi)容…… <span class="time">2024-09-26</span></a></li>
<li><a href="#" title="第四行文字內(nèi)容……">第四行文字內(nèi)容…… <span class="time">2024-09-20</span></a></li>
<li><a href="#" title="第五行文字內(nèi)容……">第五行文字內(nèi)容…… <span class="time">2024-09-20</span></a></li>
</ul>
</div>

CSS結(jié)構(gòu):
.scrollDiv{
float: left;
height:25px;/* 必要元素 */
line-height:25px;
overflow:hidden;/* 必要元素 */
}
.scrollDiv li{
height:25px;
}
.scrollDiv li a{
color: #000;
font-size: 16px;
}

JQuery結(jié)構(gòu):

<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);

});
}
$(document).ready(function(){
var interval = setInterval('AutoScroll("#scrollDiv")',3000);
// 鼠標懸停效果
$('#scrollDiv').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval('AutoScroll("#scrollDiv")',3000);
});
});
</script>

熱門關(guān)鍵詞: JQuery 文字向上滾動 鼠標移入懸停
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開