手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

支持移动手机的jquery放大镜插件enlarge.js

时间:2020-07-01    点击: 次    来源:网络    作者:佚名 - 小 + 大

支持移动手机的jquery放大镜插件enlarge.js
简要教程

enlarge.js是一款支持移动手机的响应式jquery放大镜插件。该jquery放大镜插件在移动手机上通过长按图片,可以调出放大镜,对图片进行放大查看。它的特点还有:

  • 支持内部放大镜和外部放大镜模式。
  • 支持圆形放大镜特效。
  • 自动根据屏幕尺寸来调用适合屏幕尺寸的图片。
  • 通过鼠标或触摸设备长按来调出放大镜。
  • 允许设置放大镜的等级。

使用方法

在页面中引入jquery和enlarge.js、enlarge.init.js文件,以及放大镜插件样式文件enlarge.css。

<link rel="stylesheet" href="css/enlarge.css"><script src="js/jquery.min.js"></script><script src="js/enlarge.js"></script>                  <script src="js/enlarge.init.js"></script>                                  
HTML结构

按照下面的HTML结构来添加你需要放大的图片。

<div class="enlarge_pane_contain">  <div class="enlarge_pane">    <div class="enlarge inline-demo">      <div class="enlarge_contain">        <img src="1.jpg"              srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w"              sizes="100vw"              id="test-img">      </div>      <a href="1.jpg" class="enlarge_btn" title="Toggle Zoom">Toggle Zoom</a>    </div>  </div></div>                       

该jquery放大镜插件会根据屏幕尺寸,从srcset属性中选择一张合适的图片来显示。如果srcsetsizes属性都没有设置,那么超链接的href属性指向的是大图的地址。

初始化插件

在页面DOM元素加载完毕之后,可以通过下面方法来初始化该jquery放大镜插件。

(function( $ ){  $( function(){    $(".enlarge.inline-demo").data("options", {      // 配置参数    });    $( document ).bind( "enhance", function(){      $( "body" ).addClass( "enhanced" );    });    $( document ).trigger( "enhance" );  });}( jQuery ));                          

配置参数

enlarge.js jquery放大镜插件的可用配置参数如下:

$(".enlarge.inline-demo").data("options", {  button: true,  hoverZoomWithoutClick: true,  delay: 300,  flyout: {    width: 300,    height: 300  },  placement: "flyoutloupe", // or inline  magnification: 3});                                  

enlarge.js jquery放大镜插件的github地址为:https://github.com/filamentgroup/enlarge

 支持移动手机的jquery放大镜插件enlarge.js 本地下载

上一篇:基于bootstrap的jquery弹出层确认框插件

下一篇:jquery仿PPT幻灯片特效插件ppt.js

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM