|
//JQuery鼠标（跟着鼠标飞的图片）
$(function(){
//注意body知识元素的显示范围， document是整个文档
//$("body").mousemove(function(e){
$(document).mousemove(function(e){
//要让图片移动， 首先必须要把图片设置为绝对定位
$("#img2").css("left", e.pageX).css("top", e.pageY);
});
});
<img src="images/star2.jpg" id="img2" style="position: absolute;"/>
<script type="text/javascript">
var data = {
"images/0011.jpg" : [ "images/001.jpg", "风景1", "风景很美" ],
"images/0022.jpg" : [ "images/002.jpg", "风景2", "风景很美" ],
"images/0033.jpg" : [ "images/003.jpg", "风景3", "风景很美" ]
};
//图片解析
$(function() {
$.each(data, function(key, value) {
//alert(key + " ;" + value);
//先取出小图片的路径
var smallImage = $("<img src="+key+" />");
smallImage.attr("imgpath", value[0]);
smallImage.attr("imgname", value[1]);
smallImage.attr("imgintro", value[2]);
//对每一个小图片设置鼠标监听事件
smallImage.mouseover(function(e) {
//设置大图的详细信息
$("#detailImg").attr("src", $(this).attr("imgpath"));
$("#detailHeight").text($(this).attr("imgname"));
$("#detailNmae").text($(this).attr("imgintro"));
//设置样式
$("#details").css("top", e.pageY).css("left", e.pageX).css(
"display", "");
});
$("body").append(smallImage);
});
$("#hideDetail").click(function(){
$("#details").css("display", "none");
});
});
</script>
</head>
<body>
<h1>图片解析图</h1>
<div style="display: none; positon: absolute;" id="details">
<img id="detailImg" src="" />
<p id="detailHeight"></p>
<p id="detailNmae"></p>
<p>
<input type="button" value="关闭" onclick="hideDetails()" id="hideDetail"/>
</p>
</div>
</body>
</html>
【正宗代码】
<style type="text/css">
body{
pading:0;
margin:0;
height:1000px;
}
#box {
position: absolute;
top: 50px;
left: 130px;
display: none;
}
li {
width: 250px;
height: 130px;
margin: 20px;
border: 1px solid gray;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.cookie.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("ul li").each(function() {
//alert("ok");
//对每一个li标签设置监听事件
$(this).mouseover(function(e) {
//alert($(this).children('a').attr("href"));
var pic = $(this).children('a').attr("href");
//alert(pic);
var box = "<div id='box'><img src='"+pic+"' /></div>";
$("#box").css("top", e.pageY + 10).css("left", e.pagex + 10);
//添加元素到body
$("body").append(box);
//显示控件
$("#box").show("slow");
}).mousemove(function(e) {
$("#box").css("top", e.pageY + 10).css("left", e.pageX + 10);
}).mouseout(function() {
$("#box").remove();
});
});
});
$(document).mousemove(function() {
});
</script>
</head>
<body>
<div id="box" style="">
<img src="images/001.jpg" />
</div>
<ul>
<li><a href="images/001.jpg"><img src="images/0011.jpg" /></a></li>
<li><a href="images/002.jpg"><img src="images/0022.jpg" /></a></li>
<li><a href="images/003.jpg"><img src="images/0033.jpg" /></a></li>
<li><a href="images/004.jpg"><img src="images/0044.jpg" /></a></li>
</ul>
</body>
</html>
| 
