欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用JQuery模仿淘寶的圖片放大鏡顯示效果

 更新時間：2011年09月15日 09:44:14   作者：  
相信大部分人都上過淘寶網(wǎng)吧，里面有個這個效果，當鼠標移動到小圖上面，顯示大圖。
如圖

  
今天我做的是利用JQuery模擬這個效果

源碼如下

復制代碼 代碼如下:

<head>
<script type="text/javascript" src="Js/jquery-1.4.1.js"></script>
<script type="text/javascript">
//假設data是從數(shù)據(jù)庫取到的數(shù)據(jù)
var data = {"images/1_small.jpg":["images/1_big.jpg","內(nèi)衣少女","主演：文詠珊，鄭麗欣"],"images/2_small.jpg":["images/2_big.jpg","愛情陷阱","主演：金正勛，蔡琳"],"images/3_small.jpg":["images/3_big.jpg","源代碼","主演：賈斯丁，克里斯丁娜"]};
$(function(){
$.each(data,function(key,value){
var smallimg = $("<img src='" + key + "'>");
smallimg.attr("bigmappath",value[0]);
smallimg.attr("personname",value[1]);
smallimg.attr("personheight",value[2]);
smallimg.mouseover(function(e){
$("#detailImg").attr("src",$(this).attr("bigmappath"));
$("#detailHeight").text($(this).attr("personheight"));
$("#detailName").text($(this).attr("personname"));
$("#details").css("top",e.pageY).css("left",e.pageX).css("display","");
});
$("body").append(smallimg);
});
});
</script>
</head>
<body>
<div style="display:none;position:absolute;" id="details">
<img id="detailImg" src="">
<p id="detailHeight"></p>
<p id="detailName"></p>
</div>
</body>

鼠標移動到小圖上面效果圖如下

  

相關文章

最新評論