- 浏览: 670545 次
- 性别:
- 来自: 石家庄
文章分类
最新评论
-
abao1:
老贾 在安装IDEA的过程中,在激活步骤时,按如下操作即可: ...
IntelliJ IDEA 2016注册方法和注册码 -
bo_hai:
./usr/bin/java: symbol lookup ...
jmagick安装步骤 -
wxcking:
不错的, 收藏一下
JAVA使用POI生成Excel文件 -
zgyfh:
大哥,密码是多少啊?zgyfh@tom.com谢谢了!新手学习 ...
WPF做的必备示例 -
记忆无泪:
jiasongmao 写道你的邮箱是多少,我可以发源代码到邮箱 ...
WPF做的必备示例
该插件能实现各种效果的圆角。
需要的JS文件jquery.corner.js代码如下:
测试用的HTML文件:
需要的JS文件jquery.corner.js代码如下:
jQuery.fn.corner = function(o) { function hex2(s) { var s = parseInt(s).toString(16); return ( s.length < 2 ) ? '0'+s : s; }; function gpc(node) { for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode ) { var v = jQuery.css(node,'backgroundColor'); if ( v.indexOf('rgb') >= 0 ) { rgb = v.match(/\d+/g); return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]); } if ( v && v != 'transparent' ) return v; } return '#ffffff'; }; function getW(i) { switch(fx) { case 'round': return Math.round(width*(1-Math.cos(Math.asin(i/width)))); case 'cool': return Math.round(width*(1+Math.cos(Math.asin(i/width)))); case 'sharp': return Math.round(width*(1-Math.cos(Math.acos(i/width)))); case 'bite': return Math.round(width*(Math.cos(Math.asin((width-i-1)/width)))); case 'slide': return Math.round(width*(Math.atan2(i,width/i))); case 'jut': return Math.round(width*(Math.atan2(width,(width-i-1)))); case 'curl': return Math.round(width*(Math.atan(i))); case 'tear': return Math.round(width*(Math.cos(i))); case 'wicked': return Math.round(width*(Math.tan(i))); case 'long': return Math.round(width*(Math.sqrt(i))); case 'sculpt': return Math.round(width*(Math.log((width-i-1),width))); case 'dog': return (i&1) ? (i+1) : width; case 'dog2': return (i&2) ? (i+1) : width; case 'dog3': return (i&3) ? (i+1) : width; case 'fray': return (i%2)*width; case 'notch': return width; case 'bevel': return i+1; } }; o = (o||"").toLowerCase(); var keep = /keep/.test(o); // keep borders? var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]); // corner color var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]); // strip color var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/; var fx = ((o.match(re)||['round'])[0]); var edges = { T:0, B:1 }; var opts = { TL: /top|tl/.test(o), TR: /top|tr/.test(o), BL: /bottom|bl/.test(o), BR: /bottom|br/.test(o) }; if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR ) opts = { TL:1, TR:1, BL:1, BR:1 }; var strip = document.createElement('div'); strip.style.overflow = 'hidden'; strip.style.height = '1px'; strip.style.backgroundColor = sc || 'transparent'; strip.style.borderStyle = 'solid'; return this.each(function(index){ var pad = { T: parseInt(jQuery.css(this,'paddingTop'))||0, R: parseInt(jQuery.css(this,'paddingRight'))||0, B: parseInt(jQuery.css(this,'paddingBottom'))||0, L: parseInt(jQuery.css(this,'paddingLeft'))||0 }; if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE if (!keep) this.style.border = 'none'; strip.style.borderColor = cc || gpc(this.parentNode); var cssHeight = jQuery.curCSS(this, 'height'); for (var j in edges) { var bot = edges[j]; strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none'); var d = document.createElement('div'); var ds = d.style; bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild); if (bot && cssHeight != 'auto') { if (jQuery.css(this,'position') == 'static') this.style.position = 'relative'; ds.position = 'absolute'; ds.bottom = ds.left = ds.padding = ds.margin = '0'; if (jQuery.browser.msie) ds.setExpression('width', 'this.parentNode.offsetWidth'); else ds.width = '100%'; } else { ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px'; } for (var i=0; i < width; i++) { var w = Math.max(0,getW(i)); var e = strip.cloneNode(false); e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px'; bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild); } } }); };
测试用的HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!-- saved from url=(0014)about:internet --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>JQuery Corner Demo by http://www.codefans.net</title> <style type="text/css"> body { font: Verdana,Arial,sans-serif; /* An explicit background color is required for Safari. */ /* Otherwise your corner chunks will come out black! */ background: #f8f0e0; } div.section { clear: left; } h1 { font-size: 150%; padding: 0 } h2 { background: #ccc; padding: 1px 20px; } div.demo { float: left; width: 18em; padding: 20px; margin: 1em; background: #c92; color:#000; text-align: center; font: verdana, arial, sans-serif; } div.fun { margin: 2px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.corner.js"></script> <script type="text/javascript"> $(function(){ // shorthand for $(document).ready() BTW $('div.demo').each(function() { // The text of the paragraphs in the rounded divs is also the // jQuery code needed to create that effect. Cosmic. eval($('p', this).text()); }); $('#main p').wrap("<code></code>"); }); </script> </head> <body> <h1>jQuery Corner Demo download by http://www.codefans.net(OLD)</h1> <p><b> For the most recent version of this plugin, go to <a href="http://www.malsup.com/jquery/corner/">http://www.malsup.com/jquery/corner/</a> </b></p> <p>Now with more effects, thanks to <a href="http://www.malsup.com/jquery/corner/">Mike Alsup</a>!</p> <p><a href="jq-corner.html">How does this work? How do I use it?</a></p> <p><a href="jquery.corner.js">Just the source, please!</a></p> <div id="main"> <div class="section"> <h1>Available Corner Effects</h1> </div> <div class="demo"><h1>Round</h1> <p>$(this).corner();</p></div> <div class="demo"><h1>Bevel</h1> <p>$(this).corner("bevel");</p></div> <div class="demo"><h1>Notch</h1> <p>$(this).corner("notch");</p></div> <div class="demo"><h1>Bite</h1> <p>$(this).corner("bite");</p></div> <div class="demo"><h1>Cool</h1> <p>$(this).corner("cool");</p></div> <div class="demo"><h1>Sharp</h1> <p>$(this).corner("sharp");</p></div> <div class="demo"><h1>Slide</h1> <p>$(this).corner("slide");</p></div> <div class="demo"><h1>Jut</h1> <p>$(this).corner("jut");</p></div> <div class="demo"><h1>Curl</h1> <p>$(this).corner("curl");</p></div> <div class="demo"><h1>Tear</h1> <p>$(this).corner("tear");</p></div> <div class="demo"><h1>Fray</h1> <p>$(this).corner("fray");</p></div> <div class="demo"><h1>Wicked</h1><p>$(this).corner("wicked");</p></div> <div class="demo"><h1>Sculpt</h1><p>$(this).corner("sculpt");</p></div> <div class="demo"><h1>Long</h1> <p>$(this).corner("long");</p></div> <div class="demo"><h1>Dog Ear</h1><p>$(this).corner("dog");</p></div> <div class="demo"><h1>Dog2</h1><p>$(this).corner("dog2");</p></div> <div class="demo"><h1>Dog3</h1><p>$(this).corner("dog3");</p></div> <div class="section"> <h1>Choose Your Corner</h1> <h2>Use <code>top, bottom, tl, tr, bl, br</code> to identify which corner to style</h2> </div> <div class="demo"><h1>Top Bevel</h1> <p>$(this).corner("bevel top");</p></div> <div class="demo"><h1>Top-Left Bite</h1> <p>$(this).corner("bite tl");</p></div> <div class="demo"><h1>Round Bottom</h1> <p>$(this).corner("bottom");</p></div> <div class="demo"><h1>Bottom-Left Notch</h1><p>$(this).corner("notch bl");</p></div> <div class="demo"><h1>Top-Right Dog Ear</h1><p>$(this).corner("dog tr");</p></div> <div class="demo"><h1>Top-Left, Bottom-Right Cool</h1><p>$(this).corner("cool tl br");</p></div> <div class="section"> <h1>Specify Size</h1> <h2>Include a px value to specify the corner size</h2> </div> <div class="demo"><h1>Round 30px</h1> <p>$(this).corner("30px");</p></div> <div class="demo"><h1>Round 5px</h1> <p>$(this).corner("5px");</p></div> <div class="demo"><h1>Cool 20px</h1> <p>$(this).corner("cool 20px");</p></div> <div class="demo"><h1>Sharp 20px</h1> <p>$(this).corner("sharp 20px");</p></div> <div class="demo"><h1>Bite 30px</h1> <p>$(this).corner("bite 30px");</p></div> <div class="demo"><h1>Wicked 20px</h1><p>$(this).corner("wicked 20px");</p></div> <div class="demo"><h1>Dog 20px</h1><p>$(this).corner("dog 20px");</p></div> <div class="demo"><h1>Dog2 30px</h1><p>$(this).corner("dog2 30px");</p></div> <div class="demo"><h1>Dog3 30px</h1><p>$(this).corner("dog3 30px");</p></div> <div class="section"> <h1>Mix and Match</h1> <h2>Chain corner calls to achieve combined effects</h2> </div> <div class="demo"><h1>Round and Bevel</h1><p>$(this).corner( "bottom").corner("top bevel");</p></div> <div class="demo"><h1>Round and Notch</h1><p>$(this).corner( "br top").corner("notch bl 20px");</p></div> <div class="demo"><h1>Crazy</h1> <p>$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");</p></div> <div class="section"> <h1>Fun Stuff</h1> <h2>Interesting Side Effects</h2> </div> <div class="demo fun"><h1>Left Half of Arrow</h1> <p>$(this).corner("sharp tr br 20px");</p></div> <div class="demo fun"><h1>Right Half of Arrow</h1><p>$(this).corner("sharp tl bl 20px");</p></div> </div> <!-- main --> </body> </html>
- jQueryCorner.rar (38.3 KB)
- 下载次数: 43
发表评论
-
移动端前端UI库—Frozen UI、WeUI、SUI Mobile
2016-04-04 23:28 536Frozen UI 自述:简单易用,轻量快捷,为移动端 ... -
前端JS验证框架
2015-09-10 09:32 514 -
jquery 1.9+兼容以前版本的解决办法
2015-08-10 10:27 724如果页面需要导入1.9版本和1.4版本的jquery,那么实 ... -
js动画框架
2014-12-15 10:54 525比较好用的JS动画库有:velocity和GSAP ... -
js控制ace modal模态对话框显示和隐藏
2014-11-10 17:58 1295//显示 $("#mymodalbox" ... -
10个简单实用的 jQuery 代码片段
2013-07-23 08:36 644尽管各种 JavaScirpt 框架和库层出不穷,jQuer ... -
管理浏览器前弹出提示框
2011-08-18 16:20 758<body onbeforeunload="j ... -
可以选择时间的日历控件js
2011-01-19 11:34 2860<!-- /**//* * 本日历选 ... -
JS注册事件 JS:attachEvent和addEventListener 使用方法
2010-12-08 12:38 959<!DOCTYPE html PUBLIC " ... -
JavaScript Base64编码函数
2010-07-02 12:58 1480本文转载于:http://www.iteye.com/topi ... -
IE 和Firefox完全兼容的Tab代替Enter的Javascript代码
2010-06-07 09:57 971声明:该博文转载于博客园:http://www.cnblogs ... -
JS应用(资料很全) 更新
2010-05-13 18:12 1095如果你找的javascript的东西的话,建议你 ctrl+F ... -
window.showModalDialog以及window.open用法简介
2010-05-13 16:07 914一、window.open()支持环境: JavaScript ... -
javascript中的Linq----------jlinq
2009-11-19 16:44 1039jLinq 是一个用来编写JavaScript对象数组查询的J ... -
jquery插件介绍
2009-11-19 15:05 1034概述 jQuery 是继 prototype 之后又一个优秀 ... -
解决jquery中$与其他JS框架的冲突问题
2009-10-30 10:54 1075项目开发中,有时会引入多个JS框架,为了避免因为其他框架和jq ... -
js判断浏览器版本及版本号
2009-08-10 11:20 1706<script> window[" ... -
JAVASCRIPT控制一行显示的滚动图片
2009-08-10 11:03 1641新浪网和网易都经常用到,用JAVASCRIPT去控制一行显示的 ... -
扩充的一些常用的js函数
2009-08-03 10:47 866/* *************************** ... -
js验证中文字符
2009-08-03 10:40 1397//检查函数: function ischinese(s) ...
相关推荐
为了确保在各种浏览器中都能实现圆角效果,我们需要借助JavaScript来辅助处理。 JS实现圆角效果主要有两种方式:一是通过动态创建CSS样式,二是通过修改DOM元素的HTML结构。下面我们将分别探讨这两种方法: 1. **...
随着CSS3的普及,我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而,有些浏览器可能不支持CSS3,或者在某些特定情况下,我们需要用JavaScript来动态调整圆角。本文将探讨如何用JavaScript来实现CSS3...
总的来说,使用JavaScript实现图片圆角效果涉及到CSS样式设置、DOM操作以及事件监听等多个方面,理解这些知识点对于网页开发非常重要。通过灵活运用这些技术,我们可以创造出更加美观且适应性强的网页界面。
`nifty10js.html`、`nifty10nojs.html`、`nifty2js.html`等文件可能是包含JavaScript实现圆角效果的HTML示例。这些文件通过引入JavaScript库(可能存在于压缩包的其他未列出文件中),在不支持CSS3的浏览器中动态...
在网页设计中,实现圆角效果是常见的需求,但在早期的IE浏览器中,由于CSS3标准的支持不足,单纯使用CSS无法很好地实现这一效果。本文将详细介绍如何使用JavaScript(包括jQuery库)来解决IE浏览器的圆角问题。 ...
在这个场景中,我们将探讨如何使用jQuery来实现圆角边框效果。 首先,`jquery.curvycorners.source.js`、`jquery.curvycorners.min.js` 和 `jquery.curvycorners.packed.js` 这三个文件是jQuery圆角边框插件的不同...
超简单实用JS实现DIV、图片圆角效果 <!--[if lte IE 9]> <script type="text/javascript" src="DD_roundies_0.0.2a.js"> <script type="text/javascript"> DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', ...
为了解决这个问题,开发者开始使用JavaScript库和自定义函数来实现圆角效果的兼容性。 1. **JavaScript实现圆角的基本思路** - 使用JavaScript动态创建元素:通过在元素内部插入额外的DOM元素,如`div`或`span`,...
以下是一个简单的示例,通过JavaScript动态修改元素的样式来实现圆角效果: ```javascript function addRoundedCorners(element, radius) { element.style.borderTopLeftRadius = radius + 'px'; element.style....
超简单实用JS实现DIV、图片圆角效果 兼容性很好
在这个圆角提示框的实现中,JavaScript可能被用来监听用户的鼠标悬停事件,当鼠标停留在特定元素上时,显示提示框;当鼠标离开时,隐藏提示框。 ```javascript // 获取要添加提示框的元素 var element = document....
总的来说,"js圆角框组件(图片)"这个知识点涵盖了使用CSS3的`border-radius`属性和JavaScript实现圆角效果的方法。在实际开发中,开发者应根据目标用户的浏览器兼容性需求来选择合适的技术。对于新项目,优先考虑...
jQuery 插件如 "jQuery.corner" 或 "jQuery.roundCorners" 可以帮助我们在这些浏览器中实现圆角效果。但随着技术的发展,如今大多数浏览器都已经支持 CSS3,因此直接使用 CSS3 实现圆角更为推荐。 如果仍需使用 ...
为了实现圆角效果,我们需要使用`border-radius`属性。这个属性允许我们设置元素边框的圆角半径,从而创造出圆形或椭圆形的边角。例如,如果我们希望导航菜单的每个项都有10像素的圆角,我们可以这样写CSS: ```css...
"滑动门"是一种JavaScript实现的动画效果,它通过改变元素的尺寸或位置来创建平滑过渡,增强用户体验。 在"CSS+JS实现的圆角边框TAB选项卡滑动门代码"实例中,我们将深入探讨以下关键知识点: 1. **CSS圆角边框**...
另外,一些库如jQuery Corner或Rounded Corners lite提供更方便的API来实现圆角效果,但它们可能对性能有一定影响,特别是在大量元素上应用时。 总结来说,实现圆角效果主要依赖CSS3的`border-radius`属性,对于老...
W3C很早就已经在CSS 3 中加入了圆角属性border-radius,但是由于某些流行浏览器的不支持,使得其还是没能被广泛使用,所以我们会想尽办法去进行更好的补充,包括背景图片的圆角实现、js圆角实现等等。但是这些方法在...
本篇文章将详细介绍如何通过JavaScript(JS)和HTML中的DIV元素的绝对定位来实现圆角效果。 首先,我们要理解CSS中的边框半径属性`border-radius`,这是CSS3引入的一个特性,可以直接为元素设置圆角。但在不支持CSS...