风雨后见彩虹 通过本文主要向大家介绍了jquery,图片弹出放大,jquery实现图片放大,jquery实现图片放大镜等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
首先先搭写一个基本的格式：
$.fn.popImg = function() {
//your code goes here
}
然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递到插件内部，如下：
;(function($,window,document,undefined){
$.fn.popImg = function() {
//your code goes here
}
})(jQuery,window,document);
那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。
整体代码如下：
;(function($,window,document,undefined){
$.fn.popImg = function(){
//创建弹出层
var $layer = $("<div>").css({
position:'fixed',
left:0,
right:0,
top:0,
bottom:0,
width:'100%',
height:'100%',
zIndex:9999999,
display:'none',
background: "#000",
opacity:'0.6'
});
//复制点击的图片，获得图片的宽高以及位置
var cloneImg = function($targetImg){
var cloneW = $targetImg.width(),
cloneH = $targetImg.height(),
left = $targetImg.offset().left,
top = $targetImg.offset().top;
return $targetImg.clone().css({
position:'fixed',
width:cloneW,
height:cloneH,
left:left,
top:top,
zIndex:10000000
});
};
//让复制的图片居中显示
var centerImg = function($cloneImg){
var dW = $(window).width();
var dH = $(window).height();
$cloneImg.css('cursor','zoom-out').attr('clone-bigImg',true);
var img = new Image();
img.onload = function(){
$cloneImg.stop().animate({
width: this.width,
height: this.height,
left: (dW - this.width) / 2,
top: (dH - this.height) / 2
},300);
}
img.src = $cloneImg.attr('src');
};
this.each(function(){
$(this).css('cursor','zoom-in').on('click',function(){
var $body = $("body");
$layer.appendTo($body);
$layer.fadeIn(300);
var $c = cloneImg($(this));
$c.appendTo($body);
centerImg($c);
});
});
var timer = null;
$(window).on("resize", function(){
$("img[clone-bigImg]").each(function(){
var $this = $(this);
timer && clearTimeout(timer);
timer = setTimeout(function(){
centerImg($this);
}, 10);
});
});
$(window).on("click keydown", function(evt){
if(evt.type == "keydown" && evt.keyCode === 27) {
$layer.fadeOut(300);
$("img[clone-bigImg]").remove();
}
var $this = $(evt.target);
if($this.attr("clone-bigImg")){
$layer.fadeOut(300);
$("img[clone-bigImg]").remove();
}
});
}
})(jQuery,window,document);
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！