2018-06-28
写一个简单的js的动态小效果
2018-06-28_213033.png
2018-06-28_213048.png
这里是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.3.js"></script>
<style>
ul li {
float: left;
list-style: none;
margin: 0 10px;
}
#hover {
position: absolute;
border: 1px solid black;
background: #333;
display: none;
padding: 2px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>
<a href="./img/apple_1_bigger.jpg" title="苹果 iPod" class=""><img src="./img/apple_1.jpg" alt="" title="touch"></a>
</li>
<li>
<a href="./img/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="./img/apple_2.jpg" alt="" title="mp3"></a>
</li>
<li>
<a href="./img/apple_3_bigger.jpg" title="苹果 iPhone"><img src="./img/apple_3.jpg" alt="" title="iphone"></a>
</li>
<li>
<a href="./img/apple_4_bigger.jpg" title="苹果 Mac"><img src="./img/apple_4.jpg" alt="" title="ipad"></a>
</li>
</ul>
</body>
</html>
<script>
var x = 10;
var y = 20;
$(function () {
$("a").mouseover(function (e) {
this.mytitle = this.title;
this.title = "";
var mytitle = this.mytitle ? "</br>" + this.mytitle : "";
var h = "<div id='hover'><img src='" + this.href + "'>" + mytitle + "</div>";
$("body").append(h);
$("#hover").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
});
$("a").mouseout(function () {
$("#hover").remove();
this.title = this.mytitle;
});
$("a").mousemove(function (e) {
$("#hover").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}
);
});
})
</script>
我们要实现这个小效果,首先明确思路
(1)当鼠标划入超链接
(2)创建一个div元素,div元素的内容未title属性的值
(3)将创建的uansu追加到文档中
(4)为它设置x坐标和y坐标,使它显示在鼠标位置的旁边
注意为什么当鼠标画出时,要把属性值又赋给title呢?
因为当鼠标滑出时,需要考虑再次滑入时的属性title值,如果不将mytitle的值重新赋给title属性,当再次滑入时,title的值就为空了,为了解决第二个问题(自制的提示与鼠标距离太近,有时候会引起无法提示的问题)重新设置提示元素的top和left的值,代码如上图所示,为top增加了10px,为left增加了20px;
