<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.scrollNews{
width: 80%;
height: 3rem;
overflow: hidden;
margin: 2rem auto;
}
.scrollNews ul li{
height: 3rem;
line-height: 3rem;
}
</style>
<body>
<div class="scrollNews">
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
</body>
<script src="jquery-3.5.1.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": "0px" }).find("li:first").appendTo(scroll);
});
}
//悬停事件
$this.hover(function () {
clearInterval(settimes);//清楚定时器
}, function () {
settimes = setInterval(function () {
scrollNews($this);
}, 1000);
}).trigger("mouseout")
//提示信息
var x = 10; //初始化x轴和y轴
var y = 20;
$(".tooltip").mouseover(function (e) { //鼠标移动上去
this.MyTitle = this.title; //初始化title
this.title = "";
//创建一个div元素
var $add = "<div id='tooltip'>" + this.MyTitle + "</div>";
//将创建的div元素追加到鼠标上面
$("body").append($add);
//给创建好的div元素添加样式
$("#tooltip").css(
{
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}
).show("fast"); //快速显示
}).mouseout(function () { //鼠标移除
this.title = this.MyTitle;
$("#tooltip").remove(); //样式的移除
}).mousemove(function (e) {
$("#tooltip").css({ //文字提示随着鼠标移动
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
</html>
网友评论