用JQuery模仿淘寶的圖片放大鏡顯示效果
今天我做的是利用JQuery模擬這個(gè)效果
源碼如下
<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>
鼠標(biāo)移動到小圖上面效果圖如下
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- jquery實(shí)現(xiàn)淘寶商品圖片局部放大
相關(guān)文章
解決jQuery插件tipswindown與hintbox沖突
先掃下盲:tipswindown是jQuery的彈窗插件,可以使用url或當(dāng)前頁元素顯示在模擬層中;hintbox是jQuery的類似Google Suggestions插件。2010-11-11基于jquery實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果,需要的朋友可以參考下2015-12-12正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個(gè)對兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求:非數(shù)字或者.字符自動清除,并對.12自動修補(bǔ).前的0,實(shí)現(xiàn)原理如下,感興趣的朋友可以參考下2013-09-09jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法,需要的的朋友參考下吧2017-01-01jQuery實(shí)現(xiàn)簡單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07淺析Js(Jquery)中,字符串與JSON格式互相轉(zhuǎn)換的示例(直接運(yùn)行實(shí)例)
這幾天,遇到了json格式在JS和Jquey的環(huán)境中,需要相互轉(zhuǎn)換,在網(wǎng)上查了一下,大多為缺胳膊少腿,也許咱是菜鳥吧,終于測試成功后,還是給初學(xué)者們一個(gè)實(shí)例吧2013-07-07jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-087款吸引人眼球的jQuery/CSS3特效實(shí)例分享
jQuery和CSS3對于web前端開發(fā)肯定用得也比較多,接下來分享一些由jQuery和CSS3制作成的特效,希望對哪些喜歡學(xué)習(xí)特效的朋友有所幫助2013-04-04