[js开源组件开发]图片放大镜

图片放大镜

     一般情况下，手机由于屏幕太小，会有图片上看不清的问题，所以我就做了一个放大镜的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 

使用方法案例:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<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/lib         baseUrl: '../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

?

1	需要放大的图片对象（仅支持图片<img>）

times int

?

1	放大的倍数，默认是2倍

height: int

?

1	放大镜的高度，默认100px

width: int

?

1	放大镜的宽度，默认100px

always bool

?

1	是否始终显示，默认为false,这时，需要放大时，可以鼠标点击图片或触摸时才显示放大镜.

handle bool

是否显示一个手柄，默认不显示，( 建议在触屏中显示手柄 )

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

?

1	放大镜移动的回调方法，其中参数a是{x:11,y:11}的位置对象，b\c是要定位的位置对象，d是放大镜的dom对象