您的位置:首页 - jQuery
单行文字间歇向上滚动,放上光标就停,移开继续滚动
代码介绍:单行文字间歇向上滚动,放上光标就停,移开继续滚动。
效果网址:
http://keleyi.com/keleyi/phtml/scroll/index.htm

本效果的简化版:
http://keleyi.com/a/bjac/768f469b95b61487.htm

使用插件实现,方便又强大 http://keleyi.com/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.com/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://keleyi.com/a/bjac/532bedbffca1affa.htm">单行文字间歇向上滚动,放光标就停,移开继续滚动</a></li>
<li><a href="http://keleyi.com/a/bjac/5d7f4ac2efa72d30.htm">菜单滚动至顶部后固定</a></li>
<li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm">jquery使用ColorBox弹出图片组浏览层</a></li>
<li><a href="http://keleyi.com/dev/fd9291320daf9360.htm">jquery右下角滑动弹出可关闭重现层</a></li>
<li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm">jquery清空textarea等输入框</a></li>
<li><a href="http://keleyi.com/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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com