必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

复制代码 代码如下,是由于该插件为目标元素增

作者: 计算机网络  发布:2019-09-09

jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一些重要的改进。现在项目放在github上,当然为了方便,本文会以附件的形式提供该插件,但要想得到最新版,请到项目的github上拿。
之所以会像变魔术一样地展现圆角及其他样式,是由于该插件为目标元素增加了一些小条块,这些小条块为背景色,所以人眼看上去出现了圆角而已,其实就是小东西遮盖了本来的直角。

原理是利用1px的div,具体实现看代码。
使用方法:

使用jQuery的easydrag插件实现可拖动的DIV弹出框,jqueryeasydrag

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。

在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情!

人们常说没有不劳而获的事情,但在编码的世界中却不是这样。更多的开源框架方面了我们,也毒害了我们!

废话少说,先看效果:

图片 1

全部代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>easydrag实现可拖动的DIV弹出框</title> 
<style> 
/* 重置浏览器默认样式 */ 
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} 
ul,ol,li{list-style:none;} 
input,button{margin:0;font-size:12px;vertical-align:middle;} 
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } 
table{border-collapse:collapse;border-spacing:0;} 
a{ color:#333; text-decoration:none;} 
a:hover{ text-decoration:none;} 
.wrap{ width:960px; margin:20px auto;} 
.box{ display:none; background:#fff; border:1px solid #ccc; position:absolute;} 
#popbox{ width:550px;height:320px;overflow:hidden;} 
#handler{ width:98%; height:30px; line-height:30px; overflow:hidden; color:#fff; border-bottom:1px solid #ccc; background:#ccc; padding-left:2%; float:left;} 
.btn{ display:block; width:90px; height:28px; border:1px solid #ccc; line-height:28px; text-align:center; margin-right:20px; float:left; display:inline; margin-right:15px; cursor:pointer;} 
.close{ display:block; background:url(images/close.gif) no-repeat; width:13px; height:13px; float:right; text-indent:-999em; cursor:pointer; display:inline; margin:8px 12px 0 0;} 
.head i{ float:left; font-style:normal;} 
.content{ width:100%; float:left;} 
.content img{width:100%;} 
</style> 
<!-- 使用百度的jquery在线cdn --> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<!-- easydrag.js没有找到在线的cdn,大家可以自行下载 --> 
<script type="text/javascript" src="js/easydrag.js"></script> 
<script language="javascript"> 
$(function(){ 
//btn绑定click事件 
$('.btn').click(function(){ 
//设置弹出框居中 
$('#popbox').css({ 
left: ($(window).width() - $('#popbox').outerWidth())/2, 
top: ($(window).height() - $('#popbox').outerHeight())/2 + $(document).scrollTop() 
}); 
$('#popbox').easydrag(); 
//淡入已隐藏的div 
$('#popbox').fadeIn(); 
$('#popbox').setHandler('handler'); 
$('.close').click(function(){ 
//淡出效果来隐藏弹出的div 
$('#popbox').fadeOut(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
<b class="btn">打开弹出框</b> 
<div id="popbox" class="box"> 
<div class="head" id="handler"><b class="close">关闭</b><i>点击标题位置进行拖动</i></div> 
<div class="content"><a href="http://blog.csdn.net/xmtblog/"><img src="images/img03.jpg" /></a></div> 
</div> 
</div> 
</body> 
</html> 

以上内容是小编给大家介绍的使用jQuery的easydrag插件实现可拖动的DIV弹出框,希望对大家有所帮助!

看来我真不是干魔术师的料,一上来就先把老底给揭了出来。不急,我再补充一下,这个魔术的一些要求:

复制代码 代码如下:

您可能感兴趣的文章:

  • jQuery 可以拖动的div实现代码 帮客之家修正版
  • 利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
  • jquery实现可拖动DIV自定义保存到数据的实例
  • jquery div拖动效果示例代码
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • jQuery实现DIV层淡入淡出拖动特效的方法
  • jquery实现仿JqueryUi可拖动的DIV实例
  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。 在没遇到easydrag插件之前,想...

1、插件专为block元素编写,所以div、p等均适用;而inline的元素则没有那么幸运了,当然也不是说inline根本不能用,只是面对为span增加corner要多费点神。不过,正常人不会和span的圆角较劲吧,把span改成div得了。
2、对于插件新增的border-radius功能,IE<=8全体不支持,除了IE外全体浏览器都支持。娘的,再对自己国度IE6泛滥的现状深切鄙视一下。

$('.test').rounder();

OK,介绍完了基本要点。教大家如何使用,这是重点,但很简单。 第一步,构建基本HTML网页和DIV格局,并CSS。

这样会根据默认的设置产生一个圆角框,效果如图:图片 2

<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>

圆角处会有点锯齿:(
如果仅此而已,那肯定是不够的。我们会想加上自己的一个样式该怎么办?使用方法:

</html>

复制代码 代码如下:

效果如下:

$('.test').rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'});

图片 3

效果如图:图片 4

第二步,引入jQuery,和jQuery Corner插件。

接下来我就来讲讲实现过程了,先附上jQuery代码如下:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

复制代码 代码如下:

此时,还是刚才图的效果,直角没变。
第三步,写js代码,让插件对DIV块起作用。

(function($){
$.fn.rounder=function(options){
var setting=$.extend({backgroundColor:'#FFF',borderColor:'#AAA',color:'#000'},options||{});
this.each(function(){
var source=$(this);
var container=source.parents(".mapping_rounder");
if(container.size()<=0){
container=$('<div class="mapping_rounder"></div>');
source.before(container);
//添加1pxDIV
container.append('<div class="rounder_px3"></div><div class="rounder_px2"></div><div class="rounder_px1"></div><div class="rounder_px0"></div><div class="rounder_content"></div><div class="rounder_px0"></div><div class="rounder_px1"></div><div class="rounder_px2"></div><div class="rounder_px3"></div>');
container.find('.rounder_content').append(source);
//保持原有的形态,如:高度、宽度等
container.width(source.width());
source.width(source.width()-12);
container.height(source.height());
source.height(source.height()-8);
source.css('lineHeight',source.height()+'px');
container.css('marginTop',source.css('marginTop'));
source.css('marginTop',0);
container.css('marginBottom',source.css('marginBottom'));
source.css('marginBottom',0);
container.css('marginLeft',source.css('marginLeft'));
source.css('marginLeft',0);
container.css('marginRight',source.css('marginRight'));
source.css('marginRight',0);
}
//给1pxDIV添加样式以产生圆角边框的效果
container.find('.rounder_px3').css('backgroundColor',setting.borderColor);
container.find('.rounder_px2').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});
container.find('.rounder_px1').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});
container.find('.rounder_px0').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});
container.find('.rounder_content').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});
//去除原有的样式
source.css('borderStyle','none');
source.css('backgroundColor',setting.backgroundColor);
source.css('color',setting.color);
});
}
})(jQuery);

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("div").corner();

});
</script>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

CSS文件代码:

此时,圆角就出现了。

复制代码 代码如下:

图片 5
至此,小功告成。开始拓展拔高啦。

.rounder_content{padding:0 5px;border-left:1px solid;border-right:1px solid;}
.rounder_px0{margin:0;height:2px;border-left:2px solid;border-right:2px solid;overflow:hidden;}
.rounder_px1{margin:0 1px;height:1px;border-left:2px solid;border-right:2px solid;overflow:hidden;}
.rounder_px2{margin:0 2px;height:1px;border-left:3px solid;border-right:3px solid;overflow: hidden;}
.rounder_px3{margin:0 3px;height:1px;background:#AAA;overflow:hidden;}

本文由betway必威官网发布于计算机网络,转载请注明出处:复制代码 代码如下,是由于该插件为目标元素增

关键词: