jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式:
$.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);
参考地址:http://barretlee.com/blog/2015/09/19/jquery-plugin-for-alert-img/
jQuery效果之封装一个文章图片弹出放大效果的更多相关文章
- 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)
下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...
- 代码录播:jQueryMobile 实现一个简单的弹出框效果
今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com
- jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
- js实现图片点击弹出放大效果
点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...
- jQuery点击图片弹出放大特效下载
效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- 封装一个的toast弹出框(vue项目)
逆风的方向,更适合飞翔 实现效果 实现步骤 先写出一个toast组件 // Toast.vue <template> <div id="toast" :class ...
- Bootboxjs快速制作Bootstrap的弹出框效果
Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- 3种jQuery弹出大图效果
本实例用到了jquery.imgbox.pack.js库.直接看代码: <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- 【详记MySql问题大全集】四、设置MySql大小写敏感(踩坑血泪史)
系列目录 一.安装MySql 二.安装并破解Navicat 三.没有my.in配置文件怎么办 四.设置MySql的大小写敏感 五.重置MySql登陆密码 这一篇可以说是我的踩坑的血泪史了... MyS ...
- [Swift]扩展String类:Base64的编码和解码
扩展方式1: extension String { //Base64编码 func encodBase64() -> String? { if let data = self.data(usin ...
- 机器学习入门09 - 特征组合 (Feature Crosses)
原文链接:https://developers.google.com/machine-learning/crash-course/feature-crosses/ 特征组合是指两个或多个特征相乘形成的 ...
- 机器学习入门01 - 框架处理(Framing)
原文链接:https://developers.google.com/machine-learning/crash-course/framing (监督式)机器学习的定义:机器学习系统通过学习如何组合 ...
- PHP环境搭建时缺少php7apache2_4.dll怎么办
PHP环境搭建时缺少php7apache2_4.dll怎么办 下载的文件有问题! 1.在PHP官网点击Download下载时不管选择哪个版本的都有两个类型 如果需要 php7apache2_4.dl ...
- Redis(4)---主从复制
Redis主从复制 一.环境搭建 既然是主从复制,那肯定需要多个redis服务器,下面我先创建3个服务器,™的端口号分别是:6379.6380.6381. 1.复制默认配置文件redis ...
- css笔记详解(1)
css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...
- Linux编程 9 (shell类型,shell父子关系,子shell用法)
一. shell类型 1.1 交互式 bin/ shell程序 当用户登录到某个虚拟控制台终端或是在GUI中启动终端仿真器时,默认的shell程序就会开始运行.系统启动什么样的shell程序取决于你 ...
- mysql 下 计算 两点 经纬度 之间的距离(转)
公式如下,单位米: 第一点经纬度:lng1 lat1 第二点经纬度:lng2 lat2 round(6378.138*2*asin(sqrt(pow(sin( (lat1*pi()/180-lat2* ...
- [疑难杂症]__关于cmd命令正确而显示不是内部指令的错误(ps:已解决)
前言 事情的起因是因为我在使用上网程序的时候,运行程序发现端口被占用,这个当然我们知道要将占用的端口结束掉就行,但是显然我们首先要找到占用窗口的程序是什么,才方便在任务管理器中找到并结束掉它. 查找了 ...