使用方法
// Zoomio jQuery Image Zoom script
// By Dynamic Drive: http://www.dynamicdrive.com
// June 14th 17'- Updated to v2.0.4, which adds:
// 1) Option to specify magnify level inside options. 2) Flag to indicate if images are contained inside a CSS fixed container 3) Changed mobile trigger from "touchstart" to "click"
;(function($){
var defaults = {fadeduration:500}
var $zoomiocontainer, $zoomioloadingdiv
var currentzoominfo = { $zoomimage:null, offset:[,], settings:null, multiplier:[,] }
var $curimg = $() // variable to reference currently active thumbnail image
var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null //boolean check for popular mobile browsers
function getDimensions($target){
return {w:$target.width(), h:$target.height()}
}
function getoffset(what, offsettype){ // custom get element offset from document (since jQuery version is whack in mobile browsers
return (what.offsetParent)? what[offsettype]+getoffset(what.offsetParent, offsettype) : what[offsettype]
}
function zoomio($img, settings){ // zoomio plugin function
var s = settings || defaults
var trigger = ismobile? 'click' : 'mouseenter'
$img.off(trigger).on(trigger, function(e){ // on 'click' or 'mouseenter'
// quick and dirty way to prevent mouseenter over thumbnail from firing again sometimes when $zoomiocontainer fades out while mouse is over thumbnail, leading to retriggering of mouseenter
if ($zoomiocontainer.css('visibility') == 'visible' && $zoomiocontainer.queue('fx').length ==1 && $curimg == $img){
return
}
$curimg = $img // set current active thumbnail image
var jqueryevt = e // remember jQuery event object (for use to call e.stopPropagation())
var e = jqueryevt.originalEvent.changedTouches? jqueryevt.originalEvent.changedTouches[0] : jqueryevt
var offset
if (settings.fixedcontainer == true){ // if thumbnail image is wrapped in a fixed element
var eloffset = $img.offset()
offset = {left:eloffset.left, top:eloffset.top}
}
else{ // use non jQuery method of getting element offsets, which works in older Android chrome browsers
offset = {left:getoffset($img.get(0), 'offsetLeft'), top:getoffset($img.get(0), 'offsetTop') }
}
var mousecoord = [e.pageX - offset.left, e.pageY - offset.top]
var imgdimensions = getDimensions($img)
var containerwidth = s.w || imgdimensions.w
var containerheight = s.h || imgdimensions.h
$zoomiocontainer.stop().css({visibility: 'hidden'}) // hide loading DIV
var $zoomimage
var zoomdfd = $.Deferred()
var $targetimg = $img.attr('data-largesrc') || $img.data('largesrc') || $img.attr('src')
if ($img.data('largesrc')){
$zoomioloadingdiv.css({width:imgdimensions.w, height:imgdimensions.h, left:offset.left, top:offset.top, visibility:'visible', zIndex:10000}) // show loading DIV
}
$zoomiocontainer.html( '<img src="' + $targetimg + '">' ) // add image inside zoom container
$zoomimage = $zoomiocontainer.find('img')
if ($zoomimage.get(0).complete){
zoomdfd.resolve()
}
else{
$zoomimage.on('load', function(){
zoomdfd.resolve()
})
}
zoomdfd.done(function(){
$zoomiocontainer.css({width:containerwidth, height:containerheight, left:offset.left, top:offset.top}) // set zoom container dimensions and position
var zoomiocontainerdimensions = getDimensions($zoomiocontainer)
if (settings.scale){ // v2.03 feature
$zoomimage.css({width: $img.width() * settings.scale})
}
var zoomimgdimensions = getDimensions($zoomimage)
$zoomioloadingdiv.css({zIndex: 9998})
$zoomiocontainer.stop().css({visibility:'visible', opacity:0}).animate({opacity:1}, s.fadeduration, function(){
$zoomioloadingdiv.css({visibility: 'hidden'})
}) // fade zoom container into view
if (ismobile){ // scroll to point where user tapped on
var scrollleftpos = (mousecoord[0] / imgdimensions.w) * (zoomimgdimensions.w - zoomiocontainerdimensions.w)
var scrolltoppos = (mousecoord[1] / imgdimensions.h) * (zoomimgdimensions.h - zoomiocontainerdimensions.h)
$zoomiocontainer.scrollLeft( scrollleftpos )
$zoomiocontainer.scrollTop( scrolltoppos )
}
currentzoominfo = {$zoomimage:$zoomimage, offset:offset, settings:s, multiplier:[zoomimgdimensions.w/zoomiocontainerdimensions.w, zoomimgdimensions.h/zoomiocontainerdimensions.h]}
})
$img.off('mouseleave').on('mouseleave', function(e){
if (zoomdfd.state() !='resolved'){ // if enlarged image has loaded yet when user mouses out of original image
zoomdfd.reject()
$zoomioloadingdiv.css({visibility: 'hidden'})
}
})
jqueryevt.stopPropagation() // stopPropagation() works on jquery evt object (versus jqueryevt.originalEvent.changedTouches[0]
})
}
$.fn.zoomio = function(options){ // set up jquery zoomio plugin
var s = $.extend({}, defaults, options)
return this.each(function(){ //return jQuery obj
var $target = $(this)
$target = ($target.is('img'))? $target : $target.find('img:eq(0)')
if ($target.length == 0){
return true
}
zoomio($target, s)
}) // end return this.each
}
$(function(){ // on DOM load
$zoomiocontainer = $('<div id="zoomiocontainer">').appendTo(document.body)
$zoomioloadingdiv = $('<div id="zoomioloadingdiv"><div class="spinner"></div></div>').appendTo(document.body)
if (!ismobile){
$zoomiocontainer.on('mouseenter', function(e){
})
$zoomiocontainer.on('mousemove', function(e){
var $zoomimage = currentzoominfo.$zoomimage
var imgoffset = currentzoominfo.offset
var mousecoord = [e.pageX-imgoffset.left, e.pageY-imgoffset.top]
var multiplier = currentzoominfo.multiplier
$zoomimage.css({left: -mousecoord[0] * multiplier[0] + mousecoord[0] , top: -mousecoord[1] * multiplier[1] + mousecoord[1]})
})
$zoomiocontainer.on('mouseleave', function(){
$zoomioloadingdiv.css({visibility: 'hidden'})
$zoomiocontainer.stop().animate({opacity:0}, currentzoominfo.settings.fadeduration, function(){
$(this).css({visibility:'hidden', left:'-100%', top:'-100%'})
})
})
}
else{ // is mobile
$zoomiocontainer.addClass('mobileclass')
$zoomiocontainer.on('touchstart', function(e){
e.stopPropagation() // stopPropagation() works on jquery evt object (versus e.originalEvent.changedTouches[0]
})
$(document).on('touchstart.dismisszoomio', function(e){
if (currentzoominfo.$zoomimage){ // if $zoomimage defined
$zoomioloadingdiv.css({visibility: 'hidden'})
$zoomiocontainer.stop().animate({opacity:0}, currentzoominfo.settings.fadeduration, function(){
$(this).css({visibility:'hidden', left:'-100%', top:'-100%'})
})
}
})
} // end else
})
})(jQuery);
站长提示:
1. 平台上所有素材资源,需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励
20K币。
3. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
4. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服