页面如下:
源码如下:
demo3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo3.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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/img.js" charset="GB2312"></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>
<h2 align="center">jQurey鼠标移上移下效果</h2><hr/>
<div >
<ul>
<li>
<a href="../images/aa1.jpg" ><img alt="凡客帆布鞋" src="../images/aa.jpg"/></a>
</li>
<li>
<a href="../images/bb1.jpg" ><img alt="凡客帆布鞋" src="../images/bb.jpg"/></a>
</li>
<li>
<a href="../images/cc1.jpg" ><img alt="凡客帆布鞋" src="../images/cc.jpg"/></a>
</li>
</ul>
</div>
</body>
</html>
img.js
$(document).ready(function(){
//声明创建的div
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"
});
//把这个div添加到文档中
$("body").append($div);
}).mouseout(function(){
$div.remove();//删除
$(this).find("img").css({
border : "1px solid threedface"
});
});
});