阿嚏~~~

话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件

但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~

于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦

先附上源代码,求各种大神指导:

/*******************************
* photobox跨浏览器兼容插件 v1.0(不支持IE6)
* 格式:<a href="big.jpg" id="b1" title="我就是一坨屎,你来咬我啊!"><img src="small.jpg"></a>///$("#b1").photobox();
*******************************/
;(function($){
$.fn.photobox = function(options){
var opts = $.extend({}, $.fn.photobox.defaults, options);//整合參数
return this.each(function(){
$(this).click(function(){
if(opts.showshadow){//假设设置显示阴影遮罩层,则显示
$.fn.photobox.shadow(opts.shadowOptions);
}
if(opts.showbox){//假设设置显示图片边框,则显示
$.fn.photobox.box();
}
if(opts.showclosebtn){//假设设置显示关闭button,则显示
$.fn.photobox.closebtn();
}
var $this = $(this);
var imgSrc = $this.attr("href");
var title = $this.attr("title");
var bigImg = new Image();//用js来获取图片高度和宽度
bigImg.src = imgSrc;
var h = bigImg.height;
var w = bigImg.width;
var $bigphoto = $('<img src="'+imgSrc+'" rel="photobox">');
var wh = $(window).height();
var ww = $(window).width();
$bigphoto.css({
"width":"0px" ,
"height":"0px",
"z-index":"10000",
"opacity":0
});
$("#pb_box").append($bigphoto);
if(opts.showtitle){//显示title
$.fn.photobox.title(title);
} //大家一起show
$("#boxshadow").stop(true).fadeIn(opts.speed);
var title_h = 0;
title_h = opts.showtitle ? 20 : 0 ;
$("#pb_box").stop(true).animate({
"width":w+"px",
"height":h+title_h+"px",
"top":parseInt((wh-h-title_h)/2)+"px",
"left":parseInt((ww-w)/2)+"px",
"opacity":1
},opts.speed);
if(opts.showclosebtn){
$("#pb_closebtn").stop(true).animate({
"width":"31px",
"height":"32px",
"opacity":1
},opts.speed);
}
$bigphoto.stop(true).animate({
"width":w+"px",
"height":h+"px",
"opacity":1
},opts.speed);
if(opts.showtitle){
$("#pb_phototitle").stop(true).animate({
"height":"20px",
"width":w+"px",
"opacity":1
},opts.speed);
}
$.fn.photobox.close();
$.fn.photobox.resize();
return false;//防止a标签跳转
});
});
};
$.fn.photobox.shadow = function(options){//加入背景阴影遮罩层
var shadowOptions = {"width":"100%","height":"100%","position":"fixed","top":"0","left":"0","display":"none"};
var $boxshadow=$('<div></div>');
$boxshadow.attr({"id":"boxshadow"});
$boxshadow.css(shadowOptions);
$boxshadow.css(options);
$("body").append($boxshadow);
};
$.fn.photobox.box = function(){
var wh = $(window).height();
var ww = $(window).width();
var $box = $('<div></div>');//包裹图片的div
$box.attr({"id":"pb_box"});
$box.css({"background-color": "#fff","padding": "10px","position": "fixed","opacity": "0","width": "0px","height":" 0px","top": parseInt(wh/2)+"px","left":parseInt(ww/2)+"px","z-index":10000});
$("body").append($box);
};
$.fn.photobox.closebtn = function(){//图片关闭button
var $close = $('<a></a>');//关闭button
$close.attr({"id":"pb_closebtn"});
$close.css({"background": "url('css/web/images/close.png')","position": "absolute","opacity": "0","width": "0px","height":" 0px","top": "-15px","right":"-15px","z-index":10000});
$("#pb_box").append($close);
};
$.fn.photobox.title = function(title){
var $title = $('<span></span>');//图片title
$title.attr({"id":"pb_phototitle"});
$title.css({"line-height":"20px","color":"#1e2024","text-align":"center"});
$title.html(title);
$("img[rel='photobox']").after($title);
};
$.fn.photobox.close = function(){
$("#boxshadow,#pb_closebtn").click(function(){
var wh = $(window).height();
var ww = $(window).width();
$("#boxshadow").fadeOut($.fn.photobox.defaults.speed,function(){
$(this).remove();
});
$("#pb_box").animate({
"width":"20px",
"height":"20px",
"top":parseInt(wh/2)+"px",
"left":parseInt(ww/2)+"px",
"opacity":0
},$.fn.photobox.defaults.speed,function(){
$(this).remove();
});
$("img[rel='photobox']").animate({
"width":"0px",
"height":"0px",
"opacity":0
},$.fn.photobox.defaults.speed,function(){
$(this).remove();
});
if(opts.showclosebtn){//假设设置显示关闭button
$("#pb_closebtn").stop(true).animate({
"width":"0px",
"height":"0px",
"opacity":0
},$.fn.photobox.defaults.speed,function(){
$(this).remove();
});
}
if(opts.showtitle){
$("#pb_phototitle").stop(true).animate({
"height":"0px",
"width":"0px",
"opacity":0
},$.fn.photobox.defaults.speed,function(){
$(this).remove();
});
}
});
}; $.fn.photobox.resize = function(){
$(window).resize(function(){
if($("body").has($("#pb_box"))){
var wh = $(window).height();
var ww = $(window).width();
var h = $("#pb_box").height();
var w = $("#pb_box").width();
$("#pb_box").stop(true).animate({
'top':(wh-h)/2 +'px',
'left':(ww-w)/2 +'px'
},100);
}
});
}; $.fn.photobox.defaults = {
showclosebtn:true,
showtitle:true,
speed:400,
//下面參数临时不同意用户改动
showshadow:true,
showbox:true,
showoverlay:true,//此功能暂未开放
shadowOptions:{ "background-color": "#000", "opacity": 0.6 , "z-index": 9999},//遮罩层的zIndex要小于图片层的zIndex
autoresize:true
};
})(jQuery);

附张效果图:

逻辑非常easy,由于IE6比較屎,如今绝大多数开发也不考虑他了,so,本屌丝也没考虑他,以后会不断完好,怎样使用,请上观js顶部猪屎

格式:<a href="big.jpg" id="b1" title="我就是一坨屎,你来咬我啊!"><img src="small.jpg"></a>///$("#b1").photobox();

參数传递,眼下仅仅能传递三个參数,多了这货也不吊你,为了省事,我把css样式都写在js里面了,以后会都提出来,使代码更规范。

$("#b1").photobox({showclosebtn:true,showtitle:true,speed:500});

一看名字就明确了,分别代表显示关闭button(ps:关闭button的图标自己搞,我这就没上传了,去找你们亲爱的美工妹妹要把,送给你一个跟美工妹妹亲亲我我的机会,感动吧!)、显示title,就是在图片以下有句话,对这个图片做个简介、速度,单位毫秒,自己体验吧~~

眼下仅仅是1.0版,本人也菜鸟一枚,欢迎高手们给本菜鸟指导下,不胜感激!

有不论什么疑问或不吝赐教,请加本屌丝QQ:1740437

同一时候,有喜欢民乐,爱好古风,爱好拍摄逗逼微电影的,也能够和本屌丝做个朋友,哇嘎嘎~~~

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  4. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  5. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  6. 微信企业号办公系统-图片预览放大功能-previewImage

    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...

  7. 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery

    写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...

  8. 七个帮助你处理Web页面层布局的jQuery插件

    1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可 ...

  9. 14种网页图片和文字特效的jQuery插件代码

    1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...

随机推荐

  1. 一个封装HTTP请求的函数(C++)

    这里封装了HTTP请求的,支持GET与POST,并支持各种参数组合,调用方式很简单使用DEVWEB::WebRequest(string(“http://www.luaie.com/”),ret);就 ...

  2. 网页CSS

    CSS 样式表,(分三类:内联.内嵌.外部) 1,内联, 直接作于于 元素 例:   <p style="font-size:14px;"> 2,内嵌 作用于网页 首先 ...

  3. css选择器基本属性

    选择器一,相邻选择器: 1,相邻选择器 1),定义:相邻选择器匹配指定元素的相邻兄弟元素 2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 3),表示符 ...

  4. border和outline区别

    border和outline区别: border支持box-sizing: border-box,当有边距时,是新增了边框后在按照以前的边距处理 outline不支持box-sizing: borde ...

  5. MVC 5.0 之奇葩错误-<类型“ASP._Page__ViewStart_cshtml”不从“System.Web.WebPages.StartPage”继承>

    在实际项目中,我们通常添加MVC项目会先添加一个MVC Empty 的项目,然后需要什么在往里面添加. 但是Empty项目里面只有一个路由注册,而且没有_ViewStart.cshtml文件需要自己添 ...

  6. Spring框架快速入门之简介

    Spring是java平台上的一个开源应用框架.它的第一个版本是由Rod Johnson写出来的.Rod在他的Expert One-On- One Java EE Design and Develop ...

  7. ul li span addClass removeClass

    <link type="text/css" href="./style/css/base.css" rel="stylesheet"& ...

  8. git 笔记记录

    分布式版本控制系统Git 是一套内容寻址文件系统,从核心上来看不过是简单地存储键值对.一: git 本地clone 一个仓库    1. 直接clone一个仓库:        $: git clon ...

  9. 基于mAppWidget实现手绘地图(十五)–如何控制放大缩小

    一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 使用控件底部的缩放按钮 双击控件 pinch手势 物理按键 :I键标识缩小 :O键表示放大.(只有设备具有物理按键才行)        当然, ...

  10. isArray

    判断一个玩意是不是数组: (1)新方法:Array.isArray(); (2)旧方法:toString(); <!doctype html> <html lang="en ...