189 8069 5689

jquery圆角,jquery圆角特效

使用JQuery怎么实现鼠标移上去背景变圆角矩形?

如果是支持CSS3的浏览器,定义border-radius属性,就是盒模型的边界圆角,值越大越圆。

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、成都网站设计、广汉网络推广、小程序开发、广汉网络营销、广汉企业策划、广汉品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供广汉建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

用jquery做的话,就是定义一个带border-radius的class,然后选择相应的元素,在hover事件中使用addClass方法添加这个class。

但是,这是不好的做法,或者说是dumb way。因为直接使用css的hover伪类就可以实现,完全不需要借助jquery或者说js

例如你的这几个div拥有一个class,title-div,那么只需要

.title-div:hover {

border-radius: 8px;

}

就可以实现鼠标一上去圆角。

不过要是需要兼容IE6/7/8这种不支持CSS3特性的浏览器,就得使用CSS3Pie之类的库,你可以搜索下,在官网上看看他介绍。

如何使用jquery实现圆角矩形按钮?求大神帮忙!给出具体步骤,谢谢

你好,很高兴为你作答。

圆角按钮属于外观样式,他们是由CSS决定的,而使用CSS3能够轻松实现圆角按钮,如下代码:

!DOCTYPE html

html

head lang="en"

meta charset="UTF-8"

title圆角按钮/title

style

.btn {

display: inline-block;

padding: 6px 12px;

margin-bottom: 0;

font-size: 14px;

font-weight: 400;

line-height: 1.42857143;

text-align: center;

border: 1px solid transparent;

border-radius: 4px;

color: #fff;

background-color: #337ab7;

border-color: #2e6da4;

}

/style

/head

input type="button" id="button_equal" class="btn" value="我是圆角按钮"

body

/body

/html

jQuery UI widgets IE 圆角化问题

给你一个我用的实现圆角的插件,ie-css3。

这个就是让IE 6,7,8支持部分的CSS3属性。

官网上有下载地址及使用注意。

作者官网:

注意看运行效果,需要部署本地服务器,使用服务器路径打开。

直接双击打开是看不到效果,还报错的。

给一个例子,我写的。

.borderRadius { border:#E6F2FB 1px solid; background:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position:relative; z-index:2; behavior:url(js/ie-css3.htc);}

position:relative;这个必须有,不然没有效果。

jquery.corner 的圆角边框效果

下面的代码,另存为html运行就能看见效果:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

titlejs实现(层,表格)元素圆角的函数/title

META http-equiv=Content-Type content="text/html; charset=gb2312"

STYLEBODY {

FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center

}

.round {

DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue

}

/STYLE

META content="MSHTML 6.00.2900.3243" name=GENERATOR/HEAD

BODY

DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"自动圆角函数BR

回到/DIV

/DIV

DIV class=round id=round1

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式1/DIV/DIV

DIV class=round id=round2

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式2/DIV/DIVBR

DIV class=round id=round3

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式3/DIV/DIV

DIV class=round id=round4

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"样式4/DIV/DIV

DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf"

DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px"说明:BRRoundCorner("欲圆角的元素ID"

[, 圆角样式 ]);BR圆角样式:可选参数,暂时有4种 /DIV/DIV

SCRIPT

RoundCorner("round1",1);

RoundCorner("round2",2);

RoundCorner("round3",3);

RoundCorner("round4",4);

RoundCorner("a",1);

RoundCorner("title",1);

function RoundCorner(obj,style)

{

/********

网页元素圆角函数!!

作者: Longbill

********/

var r = [];

var styles = [

{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},

{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },

{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},

{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}

]; //author: longbill.cn

if (!style || stylestyles.length) style = 1;

style--;

var btop = styles[style].top,bbottom = styles[style].bottom;

if (typeof obj == "string") obj = document.getElementById(obj);

var objp = obj.parentNode;

if (!obj || !objp) return;

var bg = '';

var cssProperty = "backgroundColor";

var mozillaEquivalentCSS = "background-color";

if (objp.currentStyle)

var actualColor = objp.currentStyle[cssProperty];

else

{

var cs = document.defaultView.getComputedStyle(objp, null);

var actualColor = cs.getPropertyValue(mozillaEquivalentCSS);

}

if (actualColor == "transparent" objp.parentNode) bg = arguments.callee(objp.parentNode);

else if (actualColor == null) bg = "#ffffff";

else bg = actualColor;

var HTML = obj.innerHTML;

obj.innerHTML = "";

for(var istop=1;istop=0;istop--)

{

var topborder = document.createElement("b");

topborder.style.display = "block";

topborder.style.height = "2px";

topborder.style.backgroundColor = bg;

for(var i=0;ibtop.length;i++)

{

var b = document.createElement("b");

if (obj.style.backgroundColor)

b.style.backgroundColor = obj.style.backgroundColor;

else if (obj.className)

b.className = obj.className;

b.style.display = "block";

b.style.margin = (istop)?btop[i]:bbottom[i];

b.style.height = "1px";

b.style.overflow = "hidden";

b.style.width = "auto";

topborder.appendChild(b);

}

obj.appendChild(topborder);

if (istop) obj.innerHTML+=HTML;

}

}

/SCRIPT

/BODY/HTML


本文名称:jquery圆角,jquery圆角特效
URL分享:http://cdxtjz.cn/article/dsdjccg.html

其他资讯