<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片懸停顯示大圖效果</title>
<style type="text/css">
ul,body,img {
padding:0;
margin:0;
}
li {
list-style: none;
display: inline-block;
}
ul {
width: 800px;
margin: 100px auto;
}
ul li {
margin-right: 50px;
}
ul li,ul li img{
width: 100px;
height: 100px;
}
#my{
width: 200px;
height: 200px;
position: absolute;
}
</style>
<script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><img src="../img/1.jpg"></li>
<li><img src="../img/2.jpg"></li>
<li><img src="../img/3.jpg"></li>
</ul>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 50;
$("li img").mouseover(function (e) {
// 生成div src=this.src
var $div = $("<img id='my' src='"+$(this).attr("src")+"'/>");
$("body").append($div);
$("#my").css({
"top": (e.pageY) + x +"px",
"left": (e.pageX) + y+ "px"
}).show("fast");
}).mouseout(function(){
// 移除div
$("#my").remove();
})
.mousemove(function(e){
// div的left與top page.x
$("#my").css({
"top": (e.pageY) + x +"px",
"left": (e.pageX) + y+ "px"
});
})
});
</script>
</body>
</html>圖片懸停顯示大圖效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Jquery ajax 異步中獲取this對象無效
原始寫法 $(".List").each(function () { var objid = $(this).attr("id"); $.ajax({ ur