<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.scrollNews {
height: 30px;
overflow: hidden;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
height: 30px;
}
</style>
<body>
<div class="scrollNews">
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
</ul>
</div>
</body>
<script src="jquery.js"></script>
<script>
$(function () {
var settimes;//定时器
var $this = $(".scrollNews");
//方法
function scrollNews(nature) {
var scroll = nature.find("ul:first");
var lineHeight = scroll.find("li:first").height();
scroll.animate({"margin-top": -lineHeight + "px"}, 600, function () {
scroll.css({'margin-top':0}).find("li:first").appendTo(scroll);
});
}
//悬停事件
$this.hover(function () {
clearInterval(settimes);//清楚定时器
}, function () {
settimes = setInterval(function () {
scrollNews($this);
}, 3000);
})
});
</script>
</html>
jq 的animatie
$(selector).animate(styles,speed,easing,callback)
或者
$(selector).animate(styles,options)
jq 的hover用法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
在调用
$( selector ).hover( handlerIn, handlerOut )时
等同于调用
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
调用
$(selector).hover(handlerInOut)
等同于调用
$( selector ).on( “mouseover mouseout”, handlerInOut );
appendTo
$(content).appendTo(selector)
content：必需。规定要插入的内容（必须包含 HTML 标签）。
selector：必需。规定把内容追加到哪个元素上
注意：如果 content 是已存在的元素，它将从当前位置被移除，并在被选元素的结尾被插入。
3293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
