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

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

支持内部放大镜和外部放大镜模式。

支持圆形放大镜特效。

自动根据屏幕尺寸来调用适合屏幕尺寸的图片。

通过鼠标或触摸设备长按来调出放大镜。

允许设置放大镜的等级。

使用方法

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

HTML结构

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

srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w"

sizes="100vw"

id="test-img">

Toggle Zoom

该jquery放大镜插件会根据屏幕尺寸，从srcset属性中选择一张合适的图片来显示。如果srcset和sizes属性都没有设置，那么超链接的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

});

html放大镜移动,支持移动手机的jquery放大镜插件enlarge.js相关推荐

基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
jquery获取手机验证码按钮计时插件getVerifyCode.js
在我们一个项目切图中,碰到一个效果是点击发送验证码,然后按钮的文字变成"还有xx秒后重试" 这样的效果,想必如果你是一名设计师,你应该也这样设计过,但是前端要如何实现? 碰到这个问 ...
5款实用的jQuery验证码插件(附js,jQuery代码)
5款实用的jQuery验证码插件 5款实用的jQuery验证码插件分享给大家,分别有普通字母数字验证码.运算验证码.滑动验证码.点选验证码,纯前端的网页验证码代码. 在线演示地址:5款实用的jQuer ...
js日历控件html,jQuery日历插件sys-calendar.js
插件描述:jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单 sys-calendar.js jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版 ...
jquery分页插件-sPage.js使用方法
git地址:https://github.com/jvbei/sPage 这是一个非常小巧灵活的插件,默认效果也挺好看的.如下: 代码如下: jquery分页插件 1,引入样式文件,可以根据实际需要修 ...
html photoswipe原理,手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分andro ...
Html5 jquery视频播放插件Video.js
<!doctype html> <html> <head><meta charset="utf-8"><title>Vi ...
jQuery使用插件dotdotdot.js实现段落溢出显示省略号
博客开发过程中遇到需要把多行文字溢出显示省略号,试过很多方法,感觉最好用的就是dotdotdot插件,下面介绍给大家使用. 1.先上图给大家看看效果 2.使用方法引入插件 <script sr ...
html翻页控件,jQuery分页插件pagination.js
插件描述:基于jQuery的分页插件,配置比较详细更新时间:2018/1/12 下午5:50:39 更新说明:增加固定按钮数量模式,具体请查看文档更新时间:2017/9/21 上午10:06:18 ...

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

html放大镜移动,支持移动手机的jquery放大镜插件enlarge.js相关推荐

最新文章

热门文章