首先先搭写一个基本的格式:
.fn美元。popImg=function () {//你的代码在这里
}
然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下:
;(函数(美元、窗口、文档、未定义){
.fn美元。popImg=function () {//你的代码在这里
}
})(jQuery、窗口、文档);
那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。
整体代码如下:
;(函数(美元、窗口、文档、未定义){
.fn美元。popImg=function () {//创建弹出层
var层=美元(“& lt; div>”) . css ({
位置:“固定”,
左:0,
右:0,
上图:0,
底部:0,
宽度:100%,
高度:“100%”,
zIndex: 9999999,
显示:“没有”,
背景:“# 000”,
透明度:“0.6”
});//复制点击的图片,获得图片的宽高以及位置
var cloneImg=function (targetImg美元){
var cloneW=$ targetImg.width (),
cloneH=$ targetImg.height (),
.left左=$ targetImg.offset (),
直顶=$ targetImg.offset()上;
返回$ targetImg.clone () . css ({
位置:“固定”,
宽度:cloneW,
高度:cloneH,
左:左,
上图:,
zIndex: 10000000
});
};//让复制的图片居中显示
var centerImg=function (cloneImg美元){
var dW=$(窗口).width ();
var dH=$(窗口).height ();
cloneImg.css美元(“光标”、“长镜头”).attr (“clone-bigImg”,真正的);
var img=新形象();
img。onload=function () {
$ cloneImg.stop () .animate ({
宽度:上,
高度:this.height,
左:(dW -上)/2,
上图:(dH - this.height)/2
},300);
}
img。src=https://www.yisu.com/zixun/cloneImg.attr美元(“src”);
};
this.each(函数(){
(美元). css(“光标”,“时间性”)。(“点击”,函数(){
var身体=美元(“身体”);
身体(layer.appendTo美元);
美元layer.fadeIn (300);
var c=cloneImg美元($ ());
身体(c.appendTo美元);
centerImg ($ c);
});
});
var计时器=零;
美元(窗口)。(“调整”功能(){
$ (" img [clone-bigImg] ") . each(函数(){
var=$美元(这);
计时器,,clearTimeout(计时器);
计时器=setTimeout(函数(){
centerImg ($);
}, 10);
});
});
美元(窗口)。(“点击keydown”、功能(evt) {
如果(evt)。类型==発eydown”,,evt。键码===27){
美元layer.fadeOut (300);
$ (" img [clone-bigImg] ") .remove ();
}
var=$美元(evt.target);
如果(this.attr美元(“clone-bigImg”)) {
美元layer.fadeOut (300);
$ (" img [clone-bigImg] ") .remove ();
}
});
}
})(jQuery、窗口、文档);
之前
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
