`
happy175
  • 浏览: 3547 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

超简单用JS实现DIV、图片圆角效果,关键是很兼容简单

阅读更多

此代码也是从网上找的,代码很兼容,操作也很简单,只需要加载JS文件即可;附件在下面下载。

 

JS调用方法:

 

DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);
DD_roundies.addRule('.websjy2', '5px', true);
DD_roundies.addRule('.websjy3', '500px', true);

 

 

HTML代码使用方法:

直接演示:http://www.websjy.com/bbs/viewthread.php?tid=12275

 

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#66FFFF; margin-bottom:10px;" class="websjy1">DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);</div>
<h3>效果2</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#EEE; margin-bottom:10px;" class="websjy2">DD_roundies.addRule('.websjy2', '5px', true);</div>
<h3>效果3</h3>

<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#ff0000; margin-bottom:10px;" class="websjy3">DD_roundies.addRule('.websjy3', '1000px', true);</div>
 

效果:



 

 

下载文件:

 

 

 

 

  • 大小: 18 KB
分享到:
评论

相关推荐

    js实现div布局圆角效果

    超简单实用JS实现DIV、图片圆角效果 兼容性很好

    JS实现DIV、图片圆角效果

    综上所述,JS实现DIV和图片圆角效果虽然比纯CSS3略显复杂,但通过合理的代码组织和浏览器兼容性检查,可以确保在各种环境下提供良好的用户体验。同时,随着浏览器对新特性的支持度不断提高,使用原生CSS3的圆角效果...

    JS实现图片改成圆角效果

    总的来说,使用JavaScript实现图片圆角效果涉及到CSS样式设置、DOM操作以及事件监听等多个方面,理解这些知识点对于网页开发非常重要。通过灵活运用这些技术,我们可以创造出更加美观且适应性强的网页界面。

    不使用图片div的js圆角curvyCorners

    本话题主要探讨的是“不使用图片div的js圆角curvyCorners”这一技术,它是一种利用JavaScript实现div元素圆角的方法。 "curvyCorners" 是一个早期流行的JavaScript库,它允许开发者在不使用任何图像的情况下,为...

    实现图片和DIV圆角显示的javascript

    JavaScript作为一种强大的客户端脚本语言,能够帮助我们实现图片和div元素的圆角显示,从而提升用户体验。本文将深入探讨如何利用JavaScript来实现这一功能,同时也会涉及相关的HTML、CSS基础知识。 首先,让我们...

    gif透明实现图片圆角效果

    总的来说,通过`blank.gif`实现图片圆角效果是一种早期的解决方案,虽然现在可能不是最佳实践,但在某些场景下仍然有用。随着前端技术的进步,开发者有更多的工具和方法来实现这种视觉效果,而且这些新方法通常具有...

    js解决圆角兼容

    "js解决圆角兼容"这一主题就是针对这个问题,通过JavaScript来实现跨浏览器的圆角效果。 在CSS3出现之前,如果想要在IE6、IE7等老版本浏览器中实现圆角,通常需要使用图片或者复杂的CSS Hack。然而,这种方法不仅...

    JS圆角DIV

    综上所述,"JS圆角DIV"是一个涉及前端开发、JavaScript编程和浏览器兼容性的技术话题,它体现了开发者在没有CSS3支持的情况下为实现视觉效果所做的创新。提供的文件揭示了一种可能的实现方式,包括HTML示例、背景...

    DIV+CSS 圆角边框

    在早期的CSS版本中,实现圆角边框需要使用图片或者JavaScript,但随着CSS3的引入,这一过程变得更加简洁。 首先,我们来看CSS3中的`border-radius`属性,这是实现圆角边框的关键。`border-radius`允许开发者为每个...

    Javascript 图片圆角

    在本篇文章中,我们将深入探讨如何使用 JavaScript 实现图片圆角,包括基本方法、阴影效果以及其他一些相关特效。 1. CSS 首选方案: 在现代浏览器中,CSS3 提供了 `border-radius` 属性,可以轻松地为图片添加圆角...

    实现DIV圆角的JavaScript代码.doc

    本文将详细介绍如何使用JavaScript实现DIV元素的圆角效果。 首先,我们介绍的核心文件是`rounded_corners.js`,这是一个开源的JavaScript库,专门用于动态创建DOM元素的圆角效果。使用这个库,无需修改任何图像,就...

    Js圆角框插件,DIV、图片圆角效果

    摘要:脚本资源,Ajax/JavaScript,Js圆角框插件,圆角 超简单实用的JS圆角框插件,实现DIV、图片圆角效果,关键是代码很兼容很简单,调用了一个自已写的圆角封装插件,只需个参数即可实现漂亮的圆角边框,对于DIV和...

    css+div漂亮的圆角tab选项卡

    CSS是美化这些元素的关键,特别是当我们要创建圆角效果时。CSS3引入了`border-radius`属性,允许我们为元素的边框设置圆角。例如,如果我们希望tab标题有10像素的圆角,可以这样写: ```css .tab-title { border-...

    css3处理所有浏览器都兼容的无图片圆角问题

    本文将详细介绍如何使用CSS3处理在所有浏览器中都兼容的无图片圆角问题,并探讨利用JavaScript库如`curvycorners.js`来进一步增强兼容性。 首先,让我们了解CSS3中的圆角属性。CSS3提供了`border-radius`属性,用于...

    div的圆角的制作,兼容FF, IE等浏览器

    在本主题中,我们将深入探讨如何使用CSS技术为`div`元素创建圆角,同时确保这种效果在Firefox(FF)和Internet Explorer(IE)等不同浏览器上都能良好地兼容。 1. CSS3边框半径属性 CSS3引入了`border-radius`属性...

    DIV_圆边圆角的实现

    这是实现圆边圆角的关键,它允许我们为元素的每个角落指定不同的半径值,从而创建出圆形、椭圆形或者部分圆角的效果。`border-radius`的语法如下: ```css border-radius: 上左圆角 上右圆角 下右圆角 下左圆角; ``...

    javascript+css无图片圆角效果

    在网页设计中,圆角效果可以为用户界面增添柔和与现代感,但早期实现圆角效果通常需要依赖图片切片或者使用多个背景图像,这种方法既复杂又不灵活。随着JavaScript和CSS技术的发展,我们可以通过纯代码方式实现无...

    纯CSS3实现圆角效果(含IE兼容解决方法)

    对于IE9之前的版本,开发者可以使用JavaScript库CurvyCorners,它通过动态生成div标签的方式模拟圆角效果,并且支持消除锯齿的功能,以此来弥补IE浏览器的兼容性问题。CurvyCorners的使用非常简单,只需在页面中引入...

    jquery实现圆角实例

    在网页设计中,圆角效果可以为用户界面增添柔和与现代感。jQuery 是一个流行的 JavaScript ...对于背景的圆角,可以通过设置元素的背景色或使用圆角背景图片来实现。在设计时,要考虑到不同设备的兼容性和响应式设计。

    JQeruy实现圆角

    1. **图片圆角**:对于图片的圆角效果,可以使用jQuery的`wrap()`方法配合CSS来实现。首先,创建一个具有圆角样式的div包裹图片,然后使用`wrap()`方法将图片包裹在这个div内。例如: ```javascript $('img').wrap...

Global site tag (gtag.js) - Google Analytics