用JQuery模仿淘寶的圖片放大鏡顯示效果
更新時間：2011年09月15日 09:44:14 作者：
相信大部分人都上過淘寶網吧，里面有個這個效果，當鼠標移動到小圖上面，顯示大圖。
如圖
<head>
<script type="text/javascript" src="Js/jquery-1.4.1.js"></script>
<script type="text/javascript">
//假設data是從數據庫取到的數據
var data = {"images/1_small.jpg":["images/1_big.jpg","內衣少女","主演：文詠珊，鄭麗欣"],"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>
鼠標移動到小圖上面效果圖如下
今天我做的是利用JQuery模擬這個效果
源碼如下
復制代碼 代碼如下:
<head>
<script type="text/javascript" src="Js/jquery-1.4.1.js"></script>
<script type="text/javascript">
//假設data是從數據庫取到的數據
var data = {"images/1_small.jpg":["images/1_big.jpg","內衣少女","主演：文詠珊，鄭麗欣"],"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>
鼠標移動到小圖上面效果圖如下
相關文章
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當前頁元素顯示在模擬層中；hintbox是jQuery的類似Google Suggestions插件。2010-11-11
這篇文章主要介紹了基于jquery實現省市區(qū)三級聯動效果,需要的朋友可以參考下2015-12-12
需要做個對兩位小數點的正負浮點數的處理要求：非數字或者.字符自動清除，并對.12自動修補.前的0，實現原理如下，感興趣的朋友可以參考下2013-09-09
Jquery中的val(),text(),html()是對javascrip中的value、innerText、innerHtml三個屬性的封裝2011-01-01
在Discuz! 6.1中無法直接使用jQuery，此時對/include/javascript/common.js文件應用如下補丁即可。2008-09-09
jQuery Validation Engine驗證控件調用外部函數驗證的方法
這篇文章主要介紹了jQuery Validation Engine驗證控件調用外部函數驗證的方法，需要的的朋友參考下吧2017-01-01
這篇文章主要介紹了jQuery實現簡單倒計時功能的方法,涉及jQuery根據時間動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2016-07-07
淺析Js(Jquery)中,字符串與JSON格式互相轉換的示例(直接運行實例)
這幾天，遇到了json格式在JS和Jquey的環(huán)境中，需要相互轉換，在網上查了一下，大多為缺胳膊少腿，也許咱是菜鳥吧，終于測試成功后，還是給初學者們一個實例吧2013-07-07
這篇文章主要介紹了jQuery實現鼠標經過彈出提示信息的地圖熱點效果,涉及jquery鼠標事件及頁面元素樣式的動態(tài)操作技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
jQuery和CSS3對于web前端開發(fā)肯定用得也比較多，接下來分享一些由jQuery和CSS3制作成的特效，希望對哪些喜歡學習特效的朋友有所幫助2013-04-04