DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> 單行文字間歇向上滾動,放上光標就停,移開繼續滾動
單行文字間歇向上滾動,放上光標就停,移開繼續滾動
編輯:JQuery常見問題     
代碼介紹:單行文字間歇向上滾動,放上光標就停,移開繼續滾動。
效果網址:
http:///keleyi/phtml/scroll/index.htm

本效果的簡化版:
http:///a/bjac/768f469b95b61487.htm

使用插件實現,方便又強大 http:///jq/myslider/

以下是源代碼:

<!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>
<title>單行文字間歇向上滾動,放光標就停,移開繼續滾動-</title>
<base target="_blank" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<style type="text/css">
.scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */}
.scrollDiv li{height:25px;padding-left:10px;}
ul,li{list-style-type:none;margin:0px;padding:0px;}
#status_scrollDiv_keleyi_com{float:left;width:18px;font-weight:bold}</style>
</head>
<body>
<h2>jquery特效 單行文字間歇向上滾動,放光標就停,移開繼續滾動</h2>
<div id="scrollDiv_keleyi_com" class="scrollDiv"><div id="status_scrollDiv_keleyi_com">↑</div>
<ul>
<li><a href="http:///a/bjac/532bedbffca1affa.htm">單行文字間歇向上滾動,放光標就停,移開繼續滾動</a></li>
<li><a href="http:///a/bjac/5d7f4ac2efa72d30.htm">菜單滾動至頂部後固定</a></li>
<li><a href="http:///a/bjac/141932b419e08101.htm">jquery使用ColorBox彈出圖片組浏覽層</a></li>
<li><a href="http:///dev/fd9291320daf9360.htm">jquery右下角滑動彈出可關閉重現層</a></li>
<li><a href="http:///a/bjac/bf0eb8c02085b10d.htm">jquery清空textarea等輸入框</a></li>
<li><a href="http:///a/bjac/768f469b95b61487.htm">單行文字間歇向上滾動</a></li>
</ul>
</div>
<script type="text/javascript">

$(document).ready(function () {
KeleyiScroll("#scrollDiv_keleyi_com", "#status_scrollDiv_keleyi_com");
});


function AutoScroll(obj, statusobj) {
if ($(statusobj).text() == '↑') {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 500, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
}
function KeleyiScroll(obj, statusobj) {
setInterval('AutoScroll("'+obj+'","'+statusobj+'")', 3000);
$(obj).hover(
function () {
$(statusobj).text('=')
},
function () {
$(statusobj).text('↑')
}
)
}
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved