基于jquery實(shí)現(xiàn)圖片放大功能
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)圖片放大功能的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
圖片放大功能類似于淘寶上的商品的查看,如果鼠標(biāo)移動(dòng)到小圖上就會(huì)在相應(yīng)的位置顯示出大圖。如果自己寫這些代碼,會(huì)很痛苦。官方網(wǎng)站上提供了一個(gè)類庫(kù)——jquery.jqzoom.js;只需要引入次類庫(kù),引用此類庫(kù),添加一些css代碼即可實(shí)現(xiàn)此功能;
HTML框架如下:
<div class="jqzoom"> <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/> </div>
注意,img中必須有jqimg屬性,這個(gè)屬性放的是大圖的地址;
js代碼如下:
<script type="text/javascript"> $(function () { $(".jqzoom").jqueryzoom({ xzoom: 300, //放大圖的寬度(默認(rèn)是200) yzoom: 300, //放大圖的高度(默認(rèn)是200) offset: 10, //離原圖的距離(默認(rèn)是10) position: "right", //放大圖的定位(默認(rèn)是"right") preload: 1 }) }) </script>
用法:$(".jqzoom").jqueryzoom
如果只添加這么多代碼效果會(huì)出來(lái),但是不是那么的理想。為了更加美觀,必須添加如下的css代碼:
<style type="text/css"> .jqzoom{ border:1px solid #BBB; float:left; position:relative; padding:0px; cursor:pointer; } /*jQzoom*/ div.zoomdiv { z-index: 999; position : absolute; top:0px; left:0px; width : 200px; height : 200px; background: #ffffff; border:1px solid #CCCCCC; display:none; text-align: center; overflow: hidden; } div.jqZoomPup { z-index : 999; visibility : hidden; position : absolute; top:0px; left:0px; width : 50px; height : 50px; border: 1px solid #aaa; background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; filter: alpha(Opacity=50); } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- jquery插件jquery.LightBox.js實(shí)現(xiàn)點(diǎn)擊放大圖片并左右點(diǎn)擊切換效果(附demo源碼下載)
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- jquery圖片滾動(dòng)放大代碼分享(2)
- jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
- jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
- 圖片放大鏡jquery.jqzoom.js使用實(shí)例附放大鏡圖標(biāo)
- JQuery控制圖片由中心點(diǎn)逐漸放大效果
相關(guān)文章
jquery 提示信息顯示后自動(dòng)消失的具體實(shí)現(xiàn)
讓提示信息顯示后自動(dòng)消失的方法有很多,在本文為大家介紹下使用jquery是如何做到的,感興趣朋友可以參考下2013-12-12詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法,需要的朋友可以參考下2015-11-11jQuery插件簡(jiǎn)單學(xué)習(xí)實(shí)例教程
這篇文章主要介紹了jQuery插件的簡(jiǎn)單用法,列舉了分頁(yè)插件、放大鏡插件、自動(dòng)完成插件、上傳插件、日歷插件等的簡(jiǎn)單使用方法,需要的朋友可以參考下2016-07-07利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
jQuery Final Countdown是一款時(shí)尚的圓形進(jìn)度條樣式的jQuery倒計(jì)時(shí)插件。本篇文章給大家分享利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件,感興趣的朋友一起看看吧2015-09-09使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果,需要的朋友可以參考下2017-08-08JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)(推薦)
下面小編就為大家?guī)?lái)一篇JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JQuery.closest(),parent(),parents()尋找父結(jié)點(diǎn)
在50個(gè)必備的實(shí)用jQuery代碼段看到關(guān)于closest()方法的介紹,考慮到開發(fā)過(guò)程中經(jīng)常有找爹的需求,以前用的都是parent()/parents()方法(還經(jīng)常找不到?。跃痛搜芯繉?duì)比一下!2012-02-02