700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html响应式布局平移 jQuery图片内部缩放和平移插件jquery.zoom.js

html响应式布局平移 jQuery图片内部缩放和平移插件jquery.zoom.js

时间:2020-12-16 22:10:34

相关推荐

html响应式布局平移 jQuery图片内部缩放和平移插件jquery.zoom.js

插件描述:jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件。该插件可以鼠标滑过图片,点击图片或移动手机上触摸图片时,将图片进行放大或平移操作。

简要教程

jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件。该插件可以鼠标滑过图片,点击图片或移动手机上触摸图片时,将图片进行放大或平移操作。

安装

可以通过npm来安装jquery.zoom.js插件。npminstalljquery-zoom

使用方法

在页面中引入jquery和jquery-zoom.js文件。

HTML结构

可使用、、和

等元素来包裹图片。

Hover

初始化插件

在DOM元素加载完毕之后,通过zoom()方法来初始化该插件。$(document).ready(function(){

$('a.photo').zoom({url:'photo-big.jpg'});

});

//或者通过Colorbox来放大图片

$(document).ready(function(){

$('a.photo').zoom({

url:'photo-big.jpg',

callback:function(){

$(this).colorbox({href:this.src});

}

});

});

要使图片可以被放大,必须将图片包裹在一个容器中,你可以通过js代码来为图片动态添加容器,例如:$(document).ready(function(){

$('img')

.wrap('')

.css('display','block')

.parent()

.zoom();

});

可以通过下面的方法来移除图片的放大效果:$('#example').zoom();//添加图片放大效果

$('#example').trigger('zoom.destroy');//移除图片放大效果

配置参数

jquery.zoom.js插件的可用配置参数有:参数默认值描述

urlfalse显示大图的url地址。如果没有提供,默认使用第一个img子元素的url地址。

on'mouseover'触发图片放大的事件。可用类型有:mouseover, grab, click, toggle。

duration120淡入淡出效果的持续时间。

targetfalse要放大图片的父容器的选择器或DOM元素。

touchtrue是否允许移动触摸交互。

magnify11表示图片放大为原尺寸的2倍。

callbackfalse图片加载时的回调函数。

onZoomInfalse图片放大时的回调函数。

onZoomOutfalse图片缩小时的回调函数。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。