用JQuery模仿淘寶的圖片放大鏡顯示效果
更新時(shí)間：2011年09月15日 09:44:14 作者：
相信大部分人都上過淘寶網(wǎng)吧，里面有個(gè)這個(gè)效果，當(dāng)鼠標(biāo)移動(dòng)到小圖上面，顯示大圖。
如圖
<head>
<script type="text/javascript" src="Js/jquery-1.4.1.js"></script>
<script type="text/javascript">
//假設(shè)data是從數(shù)據(jù)庫(kù)取到的數(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)移動(dòng)到小圖上面效果圖如下
今天我做的是利用JQuery模擬這個(gè)效果
源碼如下
復(fù)制代碼 代碼如下:
<head>
<script type="text/javascript" src="Js/jquery-1.4.1.js"></script>
<script type="text/javascript">
//假設(shè)data是從數(shù)據(jù)庫(kù)取到的數(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)移動(dòng)到小圖上面效果圖如下
您可能感興趣的文章:
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- 基于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清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見，接下來(lái)的代碼簡(jiǎn)單實(shí)用，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
jquery使select選中的注意事項(xiàng)。2009-10-10
本文主要介紹了jQuery事件與動(dòng)畫的基礎(chǔ)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jQuery底層AJAX實(shí)現(xiàn)，其返回其創(chuàng)建的XMLHttpRequest對(duì)象，大多數(shù)情況下無(wú)需直接操作該函數(shù)，除非需要操作不常用的選項(xiàng)，以獲得更多的靈活性，這篇文章給大家介紹JQuery AJAX操作代碼，感興趣的朋友一起看看吧2022-12-12
JQuery入門——用映射方式綁定不同事件應(yīng)用示例
通過映射的方式，給對(duì)象綁定多個(gè)事件,可能有很多的童鞋們不從使用過，不過，沒有關(guān)系本文將一一為您詳細(xì)介紹，感興趣的朋友可不要錯(cuò)過了啊，希望本文對(duì)你有所幫助2013-02-02
jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理
這篇文章主要介紹了jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理，通過四個(gè)方面來(lái)說(shuō)明懶加載技術(shù)的原理，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實(shí)現(xiàn)手風(fēng)琴小案例
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手風(fēng)琴小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果，很浪漫，感興趣的小伙伴們可以參考一下2015-08-08
jquery動(dòng)態(tài)分頁(yè)效果堪比時(shí)光網(wǎng)
剛剛弄好了一個(gè)jquery動(dòng)態(tài)分頁(yè)效果，拿出來(lái)與大家分享，效果與時(shí)光網(wǎng)的差不多2014-09-09
jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能，需要的朋友可以參考下2015-11-11