- 浏览: 655751 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (173)
- ajax (4)
- ant (4)
- css (14)
- eclipse (1)
- exe4j (0)
- hibernate (7)
- html (29)
- http (2)
- install4j (0)
- java (35)
- javascript (31)
- jdbc (1)
- jquery (2)
- jsp (15)
- linux命令 (8)
- ooad (2)
- properties (3)
- servlet (1)
- spring (3)
- struts (6)
- swing (4)
- thread (2)
- version_control (1)
- webservice (4)
- xml (4)
- 数据库 (19)
- 正则表达式 (5)
- 其他 (16)
- 面试题 (1)
- 框架 (9)
- maven (1)
- util (29)
- 设计模式 (1)
最新评论
-
herodie4444:
看起来好像不难。
Java Struts2创建Excel文件并实现文件下载 -
心轨翼:
Java遍历Set集合方法 -
魔鬼的献祭:
...
java的web开发分页工具类 -
Nmxszxsl:
能发一个没有被墙的代码到我的邮箱吗?万分感谢。54365156 ...
Google翻译post提交无长度限制的在线翻译例子 -
782763595:
...
jar包混淆器介绍
/* Name: b_RoundCurve Css圆角框组件--冰极峰 Version: 1.0 Author: biny Email:szbiny@163.com 冰极峰博客地址:http://www.cnblogs.com/binyong 你可以免费使用和修改代码,但请保留完整的版权信息。 有如下五种调用方法: b_RoundCurve("bottom","#F8B3D0","#FFF5FA",1);//普通圆角框 b_RoundCurve("left1","#AE0474","#FB7D3F",3,"h3","","image/bg5.gif");//标题用背景图片 b_RoundCurve("right1","#863313","#84D4CA",3,"h3","#BAB556");//标题只用纯色背景 b_RoundCurve("right2","orange","",3,"h3","");//标题不带背景色 b_RoundCurve("top","#4C7C9B","",4);//圆角背景图片 b_RoundCurve("img","#999","#FFF5FA",2);//圆角IMG图片 */ /* 圆角函数 传递7个参数 1.class类名 2.边框色 3.主体内容区背景色 4.风格切换方式,从1-5,5种圆角框样式,针对不同环境使用。 5.标题的html结构标签名 6.标题背景色 7.标题背景图片路径(和6是相斥的,两个选择一个) */ function b_RoundCurve(classname,b_c,bg_c,state,tagname,titlebg,titleimg){ var divs=getElementsByClassName(classname); for(var i=0;i<divs.length;i++){ var obj=divs[i]; var path=window.location.href;//当前页面的路径 path=path.substring(0,path.lastIndexOf('/')+1); //b标签的通用样式 var comstyle="height:1px; font-size:1px;overflow:hidden; display:block;"; //b标签的结构样式 var b1="margin:0 5px;";//和b8相同 var b2="margin:0 3px;border-right:2px solid; border-left:2px solid;";//和b7相同 var b3="margin:0 2px;border-right:1px solid; border-left:1px solid;";//和b6相同 var b4="margin:0 1px;border-right:1px solid; border-left:1px solid;height:2px;";//和b5相同 var content="border-right:1px solid;border-left:1px solid;overflow:hidden;position:relative;"; var bgColor="background:"+bg_c+";";//背景色 //img图片的背景定位 var imgPos2="background-position:-4px top;"; var imgPos3="background-position:-2px -1px;"; var imgPos4="background-position:-1px -2px;"; var conPos="background-position:left -4px;"; var imgPos5="background-position:-1px bottom;"; var imgPos6="background-position:-2px bottom;"; var imgPos7="background-position:-4px bottom;"; //定义一些变量,这些变量包含不同的样式,在各种风格中拼合组装 var imgBgStr,imgPos3,imgPos4,conPos,imgPos5,imgPos6,imgPos7; var b_img2,b_img3,b_img4,b_img5,b_img6,b_img7,c_img,imgurl; //五种不同的风格切换 if(state==1){//最通常使用的线框 //组装样式 b_img2=bgColor; b_img3=bgColor; b_img4=bgColor; c_img=bgColor; b_img5=bgColor; b_img6=bgColor; b_img7=bgColor; } if(state==2){//如果是img图片方式,则用背景模拟圆角,注意IMG标签必须显式指定宽高,否则在safari中显示不出来。 var imgObj=divs[i].getElementsByTagName('img')[0]; var imgheight=imgObj.height;//图片高度 var contentheight=imgheight-10;//中间图片的高度 var imgweight=imgObj.width;//图片宽度 obj.style.width=(imgweight+2)+"px"; var imgsrc=imgObj.src.replace(path,'');//图片文件的相当路径 var imgBgStr="background:url("+imgsrc+") no-repeat;"; //组装样式 conPos="height:"+contentheight+"px;width:"+imgweight+"px;overflow:hidden;"; b_img2=imgBgStr+imgPos2; b_img3=imgBgStr+imgPos3; b_img4=imgBgStr+imgPos4; c_img=conPos; b_img5=imgBgStr+"background-position:-1px -"+ (imgheight-4)+"px;"; b_img6=imgBgStr+"background-position:-2px -"+ (imgheight-2)+"px;"; b_img7=imgBgStr+"background-position:-4px -"+ (imgheight-1)+"px;"; imgurl=imgsrc; } if(state==3){//如果是带标题方式,又可分为两种情况,一种直接用背景色,一种是用背景图片方式 var objh3=obj.getElementsByTagName(tagname)[0]; if(titleimg!=null){//标题带水平平铺的背景图片 var bgimg="background:url("+titleimg+") repeat-x;"; b_img2=bgimg+imgPos2; b_img3=bgimg+imgPos3; b_img4=bgimg+imgPos4; //标题栏样式 objh3.style.background="url("+titleimg+") repeat-x left -4px"; objh3.style.borderBottomColor=b_c; } else{//标题不带水平平铺的背景图片 var bg_c="background:"+titlebg+";";//背景色 b_img2=bg_c; b_img3=bg_c; b_img4=bg_c; //标题栏样式 objh3.style.background=titlebg; objh3.style.borderBottomColor=b_c; } //组装样式 c_img=bgColor; b_img5=bgColor; b_img6=bgColor; b_img7=bgColor; } if(state==4){//如果是背景图片方式,则。。。 //先从样式表中获取背景图片的样式,要求加入图片的容器明确定义宽度和高度,和背景图片,这是用在JS用来搜寻的依据。 var bgimg=getStyle(obj,"backgroundImage"); var bgWidth=getStyle(obj,"width"); bgimg=bgimg.replace(path,""); bgimg=bgimg.substring(4,bgimg.length); bgimg=bgimg.substring(0,bgimg.length-1); var bgimgheight=getStyle(obj,"height");//图片的高度 bgimgheight=bgimgheight.replace("px",""); var contentheight=bgimgheight-10;//中间图片的高度,包含上下边框2px宽度 bgWidth=bgWidth.replace("px",""); bgWidth=bgWidth-2; bgimg=bgimg.replace("url(\"",""); bgimg=bgimg.replace("\")","");//获得背景图片的全部径。 path=path.substring(0,(path.lastIndexOf('/')+1));//页面地址 bgimg=bgimg.replace(path,""); imgBgStr="background:url("+bgimg+") no-repeat;"; obj.style.background="none";//将原始的背景图片隐藏 //组装样式 b_img2=imgBgStr+imgPos2; b_img3=imgBgStr+imgPos3; b_img4=imgBgStr+imgPos4; c_img=imgBgStr+conPos+"height:"+contentheight+"px;width:"+bgWidth+"px;"; //关键代码,特别是对图片的定位,需要知道图片的高度。 b_img5=imgBgStr+"background-position:-1px -"+ (bgimgheight-4)+"px;"; b_img6=imgBgStr+"background-position:-2px -"+ (bgimgheight-2)+"px;"; b_img7=imgBgStr+"background-position:-4px -"+ (bgimgheight-1)+"px;"; } if(state==2 || state==4){ conDivHeight=""; } else{ var H=getStyle(obj,"height");//获到容器的高度 H=H.replace("px","");//去掉单位 conDivHeight="height:"+(H-8)+"px";//容器的高度伪装成css中的设置的一样 } /*创建一个容器结构体*/ var rDivStr="<b style='"+ comstyle+b1+"background:"+b_c+"'></b>"; rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img2+"'></b>"; rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img3+"'></b>"; rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img4+"'></b>"; rDivStr+="<div style='"+content+"border-color:"+b_c+";"+c_img+conDivHeight+"'>"; rDivStr+="@d_P"; rDivStr+="</div>"; rDivStr+="<b style='"+ comstyle+b4+"border-color:"+b_c+";"+b_img5+"'></b>"; rDivStr+="<b style='"+ comstyle+b3+"border-color:"+b_c+";"+b_img6+"'></b>"; rDivStr+="<b style='"+ comstyle+b2+"border-color:"+b_c+";"+b_img7+"'></b>"; rDivStr+="<b style='"+ comstyle+"margin:0 5px;background:"+b_c+"'></b>"; var htmlText=divs[i].innerHTML; if(state==2){ var str1=htmlText.replace("src=\"","src=\"*"); var strsplit1=str1.split('*')[0]; var strsplit2=str1.split('*')[1]; var url=strsplit2.substring(0,strsplit2.indexOf('\"')); htmlText=strsplit1+imgurl+"\" style='border:0px;position:absolute;top:-4px;left:0px;'/>"; } rDivStr=rDivStr.replace('@d_P',htmlText); divs[i].innerHTML=rDivStr;//替换结构 } } // 说明:准确获取指定元素 CSS 属性值 // 此函数的两个参数,elem为要获取的对象,name为样式属性,如“backgroundColor” function getStyle( elem, name ) { //如果该属性存在于style[]中,则它最近被设置过(且就是当前的) if (elem.style[name]) { return elem.style[name]; } //否则,尝试IE的方式 else if (elem.currentStyle) { return elem.currentStyle[name]; } //或者W3C的方法,如果存在的话 else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); //获取style对象并取得属性的值(如果存在的话) var s = document.defaultView.getComputedStyle(elem,""); return s && s.getPropertyValue(name); //否则,就是在使用其它的浏览器 } else { return null; } } /*根据类名获得对象 调用方法:var topicnum=getElementsByClassName("classname"); */ function getElementsByClassName(searchClass, node,tag){ if(document.getElementsByClassName){return document.getElementsByClassName(searchClass)} else{ node = node || document; tag = tag || "*"; var classes = searchClass.split(" "), elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), patterns = [], returnElements = [], current, match; var i = classes.length; while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));} var j = elements.length; while(--j >= 0){ current = elements[j]; match = false; for(var k=0, kl=patterns.length; k<kl; k++){ match = patterns[k].test(current.className); if (!match) break; } if (match) returnElements.push(current); } return returnElements; } }
原文地址:
http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html
- demo.rar (98.9 KB)
- 下载次数: 7
发表评论
-
java前后台字符串编码转换
2016-12-15 15:52 727此文为应用中遇到字符串编码转换问题网上找资料解决问题记录笔记, ... -
JavaScript replace字符串替换函数的用法
2016-10-19 15:21 808replace 语法 stringObj.replace(rg ... -
JS前端DES加密参数
2016-07-08 14:27 11640DES加密为可解密的机制,这里使用DES进行加密方便后台解密还 ... -
JS Date函数整理
2015-01-30 10:43 1003JS Date 对象用于处理日期和时间。 创建 Date 对象 ... -
js中setInterval与setTimeout用法
2014-11-19 17:09 992下面详述js中的延时任务与周期任务的实现。 1.setTim ... -
转 js中数据类型判断(转)
2012-11-05 11:07 1098转载自: http://www.cnblogs.com/yjh ... -
包含日期和时间的选择器(转)
2012-09-27 16:11 1019转载自: http://www.cnblogs.com/swe ... -
jsp通用分页实现脚本
2012-09-26 17:12 1658工具脚本使用时只需替换url的问号前半部分即可。 此页面需要j ... -
Java过滤html标签
2012-09-21 09:54 1745方法一: String oldStr="< ... -
Web项目设置页面不缓存
2012-08-04 19:55 2793htm网页 <meta http-equiv=&qu ... -
javascript判断变量是否全为数字
2012-03-11 17:09 1076function isNumber(value){//校验 ... -
JS动态创建表格(转)
2012-01-06 18:40 1132目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号 ... -
ajax设置请求头发送带中文参数
2011-12-30 11:08 6486这里举个删除文件的ajax例子说明设置请求头,允许文件名带中文 ... -
扩充js的Array对象添加contains函数
2011-12-22 11:33 1458用js实现数组包含函数,在与ligerUI同时使用时,第一种方 ... -
ajax请求带中文url的参数转码解码
2011-12-13 10:56 3688js提交ajax请求,默认编码方式是ISO-8859-1,此编 ... -
CSS模块化设计——从空格谈起
2011-12-06 12:00 955引子: 今天在蓝点看 ... -
html框架页面文档声明
2011-12-06 10:55 2119通俗地讲,文档类型声明(Document Type Decl ... -
本地、远程图片上传预览
2011-11-24 11:00 1847本地、远程图片上传预览,带文件类型检查等功能,更多功能等待仔细 ... -
图片上传预览
2011-11-23 18:31 1359支持IE和FireFox,动态添加图片。 <!DOC ... -
修改 input file 的按钮值
2011-11-23 14:32 3830在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解 ...
相关推荐
前序:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。...在我的《CSS圆角框组件V1.0》中,可以变化出
Canvas 中文名称叫“画布”,它是游戏中所有UI组件的“容器”。一个场景中,可以允许多个Canvas对象的存在,还允许Canvas之间可以进行“嵌套”使用。需要注意的是,场景中的任何一个UI对象,都肯定是某个Canvas对象...
Cocos Creator 利用Mask组件裁剪圆角矩形
内容索引:脚本资源,Ajax/JavaScript,圆角 冰极峰CSS圆角框插件,基于JavaScript编写,不但可以完成网页元素边框的圆角化,还可以对图片进行圆角,而且兼容几乎所有的浏览器、 封装HTML结构,只需定义想要的结构就行...
本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件、页头组件、缩略图组件和警告框组件。 一.巨幕组件 巨幕组件主要是展示网站的关键性区域。 //在固定的范围内,有圆角 网站标题</h
Ideal forms JavaScript迷你表单美化插件,一款轻量级的表单美化架构,美化架构简单,基于jQuery框架,能够帮助web开发人员快速创建漂亮和界面友好的表单组件。Ideal forms框架可将普通的input表单元素改变为圆角的...
FEA是一款轻量级、模块化的中文前端框架可快速... 修复滚动监控空#错误删除 modal 组件, 添加 dialog 组件primary状态更改为info状态更改按钮及输入框圆角大小更改网格类分栏类名[col-* 改为 width-*]删除封面[cover]
摘要:脚本资源,jQuery,表单美化 Ideal forms JavaScript迷你表单美化框架,一款轻量级的表单美化架构,美化架构简单,基于jQuery框架,能够帮助web开发人员快速创建漂亮和界面友好的表单组件。Ideal forms框架可将...
当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: ‘body’选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之后,与其合作的页面元素可能变得更宽或是去圆角)。 在禁止使用的...
像边界半径角之类的iOSReact组件React ios角演示-https://pie6k.github.io/react-ios-corners/创建像圆角之类的ios(squircle)。 与常规边框半径进行比较:使用不同的“圆度”设置,您可以获得与iOS主屏幕应用程序...
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数...代码的演示效果如下: 组件fishcomponent.js的代码如下: 复制代码代码如下: CanvasR
库开发,提供丰富的类别组件及UI,封装有多个组件,以及相关的Ajax请求调用,并且都以jQuery标准插件的方式组合在一起,所以非常方便进行二次开发或再扩展。 兼容性: IE8.0 +,Chrome [最佳],Firefox,Safari。...
修复了图表对 ZUI 独立组件 colorset.js 的依赖,现在快捷指定图表配色不需要单独引入 colorset.js 插件; 数据表格: 增加 fixCellHeight 选项用于禁用自动调整行高(行高可以使用 CSS 设定,从而避免每次自动...
Vue Canvas Poster :party_popper: 一个通过 css 属性画 canvas 图片的轻量级的 vue 组件。 (A lightweight vue components use canvas draw image by css properties.)主要特性:绘制文本(换行、超出内容省略号、中...
Ideal forms JavaScript迷你表单美化框架,一款轻量级的表单美化架构,美化架构简单,基于jQuery框架,能够帮助web开发人员快速创建漂亮和界面友好的表单组件。Ideal forms框架可将普通的input表单元素改变为圆角的...
组件丰富、海量插件:拼图前端框架重新定义了CSS基础、常用元件及JS组件,可快速构架前端界面,实现跨屏响应。同时兼容所有jQuery插件,在项目中可以灵活使用,让前端开发如虎添翼。 轻量高效、国产开源:拼图基于...
50个jquery效果源码,js特效,指向滑动按扭,选项卡,选项卡切换,手风琴效果,图片的缩放,相片画廊,淡化效果,水平或垂直的列表,拾色器,高亮图片框,验证规则,表单Check样式,星形评级系统,多功能表格,拖拽插件,拖拽树形菜单...