jQuery里面的图片提示效果

最新推荐文章于 2018-09-09 15:48:00 发布

吃胖点儿

最新推荐文章于 2018-09-09 15:48:00 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/ailiandeziwei/article/details/8704410

版权

在页面设计：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>demo03.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/image.js"></script>

<style type="text/css">
ul{
list-style-type: none;
}
ul li{
float: left;
margin-left: 10px;
}
img{
border: 1px solid threedface;
}

</style>
</head>

<body>
<ul>

<li>
<a href="images/b.png"> <img alt="图标" src="images/a.png"> </a>
</li>
<li>
<a href="images/b.png"> <img alt="图标" src="images/a.png"> </a>
</li>
<li>
<a href="images/b.png"> <img alt="图标" src="images/a.png"> </a>
</li>
<li>
<a href="images/b.png"> <img alt="图标" src="images/a.png"> </a>
</li>

</ul>
</body>

</html>

js代码：

$(function() {
var $div
//鼠标上去的处理
$("li>a").mouseover(function(e) {
//这里用到了一个查找的方法
$(this).find("img").css({
border:"1px solid red"
});
$div = $("<div><img src='" + this.href + "'/></div>");

$div.css({
position:"absolute",
top:e.pageY+20+"px",
left:e.pageX+20+"px"
});
$("body").append($div);
//鼠标下去的处理
}).mouseout(function() {
$div.remove();
// find() 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$(this).find("img").css({

border:"1px solid threedface"
});
});

});