我利用网上特效开发的Jquery插件

代码如下

(function($){

    $.fn.Dialogx = function(options) {

        var defaults={
Width:"300",
Height:"300",
Title:"对话框",
Opacity:"0.2",
Url:"",
Content:""
}; var opts = $.extend({},defaults,options);
$(this).click(function(){ if(!$("#Dialogx").length>0)
{
//var maktemp='<div id="MarkZZ" style="background:#666;width:'+$(document).width()+'; height:'+($(document).height())+'px; position:absolute; top:0px; left:0px; z-index:80;"></div>';
var maktemp='<div id="MarkZZ" style="background:#666;width:'+$(document).width()+'px; height:'+($(document).height())+'px; position:absolute; top:0px; left:0px; z-index:10;"></div>';
//var tempstr ='<div class="showdiv" id="Dialogx"><div class="top"><div class="topleft"></div><div class="topmiddle" id="topmiddle"> <span style="float:left; color:#FFF; font-weight:bold; line-height:26px; font-size:12px;">&nbsp;'+opts.Title+'</span><span style="float:right"><a href="javascript:"><img border="0" src="'+skinurl+'" width="26" height="20" id="diagclose" /></a></span></div><div class="topright"></div></div><div class="clear"></div><div class="middle"><div class="middleleft" id="middleleft"></div><div class="middlemiddle" id="middlemiddle"><div style="padding:5px;background:#fff;" id="middlecontent"><iframe src="'+opts.FrameURL+'" style="height:100%; width:100%;" scrolling="no" frameborder="0"></iframe></div></div><div class="middleright" id="middleright"></div></div><div class="clear"></div><div class="end"><div class="endleft"></div><div class="endmiddle" id="endmiddle"></div><div class="endright"></div></div><div class="clear"></div></div>';
var tempstr ='<div class="Dialogx" id="Dialogx" style="z-index:20;"></div>';
//if(opts.ContentFlag==1)
//{
// tempstr ='<div class="showdiv" id="Dialogx"><div class="top"><div class="topleft"></div><div class="topmiddle" id="topmiddle"> <span style="float:left; color:#FFF; font-weight:bold; line-height:26px; font-size:12px;">&nbsp;'+opts.Title+'</span><span style="float:right"><a href="javascript:"><img border="0" src="'+skinurl+'" width="26" height="20" id="diagclose" /></a></span></div><div class="topright"></div></div><div class="clear"></div><div class="middle"><div class="middleleft" id="middleleft"></div><div class="middlemiddle" id="middlemiddle"><div style="padding:5px;background:#fff;" id="middlecontent">'+opts.Contents+'</div></div><div class="middleright" id="middleright"></div></div><div class="clear"></div><div class="end"><div class="endleft"></div><div class="endmiddle" id="endmiddle"></div><div class="endright"></div></div><div class="clear"></div></div>';
//}
$("body").append(maktemp);
$("body").append(tempstr);
}
else
{
$("#MarkZZ").show();
} var css={}
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opts.Opacity*100+')';
}
else
{
css.opacity= opts.Opacity;
}
$("#MarkZZ").css(css);
var w,h,de;
de = document.documentElement;
w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;
var diagtop = h/2-(opts.Height/2)+eval($(document).scrollTop());
var diagleft = w/2-(opts.Width/2)+eval($(document).scrollLeft());
$("#Dialogx").css({"top" : diagtop,"left":diagleft,"width":opts.Width+"px","height":opts.Height+"px"}); $("#Dialogx").append("<div class='top'></div>");
$("#Dialogx .top").append("<div class='title'>"+ opts.Title+"</div>");
$("#Dialogx .top .title")
.css("margin-left","10px")
.css("width",($("#Dialogx .top").width()-50)+"px");
;
$("#Dialogx .top").append("<div class='button' style='width:35px;cursor: hand; '><span class='close'>X</span> </div>"); $("#Dialogx").append("<div class='content'></div>");
$("#Dialogx .content").css("height",($("#Dialogx").height()-40)+"px").css("width",($("#Dialogx").width()-10)+"px");
if( opts.Content)
{
$("#Dialogx .content").html(opts.Content);
}
else if(opts.Url)
{
$("#Dialogx .content").html("<iframe src='' style='height:100%; width:100%;' scrolling='no' frameborder='0'></iframe>");
$("#Dialogx .content>iframe").attr("src", opts.Url);
} $(window).scroll(function(){
var diagtop = h/2-(opts.Height/2)+eval($(document).scrollTop());
var diagleft = w/2-(opts.Width/2)+eval($(document).scrollLeft());
$("#Dialogx").css({"top" : diagtop,"left":diagleft });
});
$("#Dialogx .top .button .close").mousemove(
//function(){
// $(this).attr("src",skinurl2);
//}
).mouseout(
//function(){
// $(this).attr("src",skinurl);
//}
).click(function(){
$("#Dialogx").remove();
$("#MarkZZ").remove();
}) var _move =false;
var _x =$("#Dialogx").pageX-parseInt($("#Dialogx").css("left").replace("px",""));
var _y= $("#Dialogx").pageY-parseInt($("#Dialogx").css("top").replace("px",""));
$("#Dialogx").click(function()
{
//alert("click");//点击(松开后触发)
}).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(this).css("left").replace("px",""));
_y=e.pageY-parseInt($(this).css("top").replace("px",""));
$(this).fadeTo(20, 0.5);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#Dialogx").css({top:y,left:x});//控件新位置
}
}).mouseup(function(){
_move=false;
$("#Dialogx").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
})
}; })(jQuery);

我利用网上特效开发的Jquery插件的更多相关文章

  1. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  2. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  3. 自己开发开源jquery插件--给jquery.treeview加上checkbox

    很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...

  4. 网站开发常用jQuery插件总结(11)折叠插件Akordeon

    实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...

  5. 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed

    这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...

  6. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

  7. 助你简化开发的 jQuery 插件

    Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完 ...

  8. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  9. 如何开发一个Jquery插件

    Jquery有两种开发插件的方法: 1.jquery.fn.extend(object); 2.jquery.extend(object); 第一种方法是给Jquery对象添加方法,jquery.fn ...

随机推荐

  1. js 中数字问题

    在js中请注意数字是没有长度的, 不能使用for循环遍历数字的长度 操作时通过.toString()把数字转换成字符串后通过字符串的.length 属性得到长度

  2. vi常用命令

    哎,看书上vi命令那么多,真是记不住.记几个常用的备忘吧. 在一般模式下(不可编辑),比如用vi命令打开或创建一个文件,常用的命令如下: 按键 作用 h或← 光标左移动一个字符 j或↓ 光标下移动一个 ...

  3. Python算法-冒泡排序

    #coding:utf-8 """ 冒泡排序 原理:依次重复访问每一个需要排序的元素,每次比较相邻的两个元素是否符合顺序,若不符合就交换,直到没有不符合顺序的为止. &q ...

  4. ubuntu软件推荐

    本文推荐的ubuntu工具均为笔者亲用.原则:在精不在多. 0.万能类 笔者崇尚[极简主义],常用的工具如果有网页版的就尽量不用单独的client.如网页版微信. 1.系统类 截图:Deepin-sc ...

  5. python猜数脚本(电脑猜测)(二分法)

    # coding=utf-8# 猜数# 记录猜数的过程import randomcom_result=[]  #存放电脑结果,数组com_count=0 #存放电脑猜测次数ran=random.ran ...

  6. NodeJs解析web一例

    var http = require('http'); var fs = require('fs'); var url = require('url'); http.createServer(func ...

  7. nginx的反向代理和负载均衡的一个总结

    之前一直觉的nginx的反向代理和负载均衡很厉害的样子,最近有机会接触了一下公司的这方面的技术,发现技术就是一张窗户纸呀,捅破了啥都明白了! 接下来先看一下nginx的反向代理: 简单的来说就是ngi ...

  8. AIX 环境下遇到Device Busy问题

    IBM AIX v5.3操作系统环境下在对网络或网卡进行操作过程中经常遇到"Device Busy"而终止操作例如:#rmdev -l ent1遇到如下返回信息Method err ...

  9. OpenSSL主配置文件openssl.cnf

    虽说配置文件很多设置不用修改就能直接使用,但是了解它是配置openssl相关事项所必须的.而且要实现复杂多功能,必然要对配置相关了然于心. 1.man config 该帮助文档说明了openssl.c ...

  10. pascal闪电入门系列目录

    第一章  准备工作 第二章  Hello,world! 第三章  输出.输入 第四章  变量常量.基本数据类型 第五章  格式.注释 第六章  运算符.表达式.优先级 第七章  分支结构 第八章  数 ...