圖片放大鏡

? ? ?一般情況下，手機由于屏幕太小，會有圖片上看不清的問題，所以我就做了一個放大鏡的js效果，支持pc和移動端。它的原理是利用的backgroundsize來實現的，所以你的瀏覽器首先要支持這個屬性。

? ? ?然后這個組件還是開源的git項目，你可以為它添加不支持backgroundsize時的解決方法。它的git地址是:圖片放大鏡github地址?https://github.com/tianxiangbing/image-zooming ? ,它的在線演示地址是：js圖片放大鏡演示地址http://www.lovewebgames.com/jsmodule/image-zooming.html

image-zooming

圖片放大鏡 例子見DEMO?

使用方法案例:

<h1>始終顯示放大鏡</h1> <img id="img1" src="a.png" alt=""> <p id="info1"></p> <h1>只在點擊觸摸時顯示放大鏡</h1> <img id="img2" src="a.png" alt=""> <p id="info2"></p> <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/image-zooming.js"></script> <script>$('#img1').ImageZooming({times: 2,always: true,callback: function(a, b, c, d) {$('#info1').html('x: '+a.x+' y:'+a.y);}});$('#img2').ImageZooming({times: 2,always: false,callback: function(a, b, c, d) {$('#info2').html('x: '+a.x+' y:'+a.y);}}); </script>

　　

或者requirejs

<h1>始終顯示放大鏡</h1><img id="img1" src="a.png" alt=""><p id="info1"></p> <h1>只在點擊觸摸時顯示放大鏡</h1><img id="img2" src="a.png" alt=""><p id="info2"></p><script type="text/javascript" src="../src/zepto.js"></script><script type="text/javascript" src="../src/require.js"></script><script>requirejs.config({//By default load any module IDs from js/libbaseUrl: '../src',paths: {$: 'zepto'}});require(['image-zooming',"$"], function(ImageZooming,$){var lz = new ImageZooming();lz.init({target: $('#img1'),times: 2,always: true,callback: function(a, b, c, d) {$('#info1').html('x: ' + a.x + ' y:' + a.y);}});var lz2 = new ImageZooming();lz2.init({target: $('#img2'),times: 2,always: false,callback: function(a, b, c, d) {$('#info2').html('x: ' + a.x + ' y:' + a.y);}});});

　　

屬性和方法

target dom|string

需要放大的圖片對象（僅支持圖片<img>）

times int

放大的倍數，默認是2倍

height: int

放大鏡的高度，默認100px

width: int

放大鏡的寬度，默認100px

always bool

是否始終顯示，默認為false,這時，需要放大時，可以鼠標點擊圖片或觸摸時才顯示放大鏡.

handle bool

是否顯示一個手柄，默認不顯示，( 建議在觸屏中顯示手柄 )

callback: function(a,b,c,d)

放大鏡移動的回調方法，其中參數a是{x:11,y:11}的位置對象，b\c是要定位的位置對象，d是放大鏡的dom對象

?

轉載于:https://www.cnblogs.com/tianxiangbing/p/image-zooming.html

總結

以上是生活随笔為你收集整理的[js开源组件开发]图片放大镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。