<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul,li{ list-style:none; float:left; }
</style>
<script>
$(function(){
$("#gallery li").mouseover(function(){
var y = $(this).offset().top+50;
var x = $(this).offset().left+50;
var imgsrc = $(this).children().attr("src");
var html = "<div id='pop' style='position:absolute; top:"+y+"px;left:"+x+"px;'> <img src='"+imgsrc+"' width='400' height='300'/></div>";
$("body").append(html);
});
$("#gallery li").mouseout(function(){
$("#pop").remove();
});
})
</script>
<ul id="gallery">
<li><img src="http://m2.quanjing.com/2m/sps009/4251r-4561.jpg" width="60" height="60"></li>
</ul>
鼠標懸停 圖片自動放大功能 jquery
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.