项目场景:
提示:这里简述项目相关背景:
例如:做一个鼠标跟随效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
body{
position: relative;
}
.articleUl {
width: 200px;
cursor: default;
}
.articleUl>li {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
list-style: inside;
list-style-type: decimal;
padding: 15px 2px;
}
.articleUl>li:hover {
background-color: #f5f5f5;
}
.bubbleAlert {
width: 337px;
height: auto;
padding: 21px;
background-color: #fff;
position: fixed;/*强调一下这里用fixed定位,即使列表超出窗口也不会出问题 */
border-radius: 4px;
box-shadow: 0px 0px 6px 2px #d6d6d6;/*box-shadow参数(背影向左偏移量left,背影向上偏移量top,影子模糊程度,影子长度)*/
left: 0px;
top: 0px;
display: none;
}
.bubbleAlert>li {
width: 100%;
text-align: left;
list-style: inside !important;
list-style-type: square !important;
}
</style>
</head>
<body>
<ul class="articleUl">
<li>Ahsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Bhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Chsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Dhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Ehsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Fhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Ghsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Hhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Ihsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
<li>Jhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
</ul>
<!-- 气泡窗 -->
<ul class="bubbleAlert">
</ul>
</body>
<script>
$(".articleUl li").hover(function (e) {
e.stopPropagation;
$(".bubbleAlert").html($(this).html());
$(".bubbleAlert").show();
}, function (e) {
e.stopPropagation;
$(".bubbleAlert").hide();
}).stop();
(function mouseFollowFloatTip() {
// 鼠标跟随tip
let floatTip = document.querySelector(".bubbleAlert");
document.onmousemove = e => {
let x = e.clientX,
y = e.clientY;
let mouseOffsetX = 20,
mouseOffsetY = 20;
let left = x + mouseOffsetX;
let top = y + mouseOffsetY;
let floatTipRect = floatTip.getBoundingClientRect();
// console.log("alert:"+"x"+ left +"y"+ top)
//边界判断
left + floatTipRect.width > window.innerWidth &&
(left -= floatTipRect.width + mouseOffsetX + 10);
top + floatTipRect.height > window.innerHeight &&
(top -= floatTipRect.height + mouseOffsetY + 10);
var style = {
"left": left + "px",
"top": top + "px"
};
$(".bubbleAlert").css(style).stop();
};
})()
</script>
</html>
代码直接可复制使用