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