jquery 圆角遮罩图片实现图片圆角

更新时间：2009年05月18日 00:48:06 作者：

用jquery实现的图片圆角效果代码。

运行后请刷新一次。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15</title> <script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $(".kuang").after("<div class='kuang_div'><img src='https://www.jb51.net/upload/20090518004805261.png' /></div>"); }) </script> <style type="text/css"> li{ list-style:none; float:left; margin-right:20px; margin-top:20px; position:relative; } img{ border:0; width:94px; height:94px; } .kuang_div{ position:absolute; z-index:1000; left:0; top:0; } </style> </head> <body> <div id="board"> <ul> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> <li><a href="#"><img src="https://www.jb51.net/upload/20090518004805144.gif" class="kuang" /></a></li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jQuery使用正则表达式替换dom元素标签用法示例
这篇文章主要介绍了jQuery使用正则表达式替换dom元素标签的方法,结合具体实例形式分析了jQuery正则替换的操作技巧,需要的朋友可以参考下
2017-01-01
解析预加载显示图片艺术
本文主要介绍了预加载显示图片艺术实现的方法--一个jquery库的preLoadImages()函数，使用这个函数就可以轻松实现图片预加载了。需要的朋友可以看下
2016-12-12
jQuery增加和删除表格项目及实现表格项目排序的方法
jQuery对表格的操作是老生常谈的问题了,各种插件也到处都是,这里我们还是来从技术着手jQuery增加和删除表格项目及实现表格项目排序的方法:
2016-05-05
浅谈JQ中mouseover和mouseenter的区别
下面小编就为大家带来一篇浅谈JQ中mouseover和mouseenter的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
2016-09-09
jQuery实现用户信息表格的添加和删除功能
这篇文章主要介绍了jQuery实现用户信息表格的添加和删除功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-09-09
jquery实现根据浏览器窗口大小自动缩放图片的方法
这篇文章主要介绍了jquery实现根据浏览器窗口大小自动缩放图片的方法,涉及jquery操作页面元素属性与样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法，使用jqgrid的朋友可以参考下。
2010-10-10
jQuery打印指定区域Html页面并自动分页
项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下
2014-07-07
JQuery Highcharts 动态生成图表的方法
动态图表生成方法有很多，在接下来的文章中将为大家介绍下使用JQuery Highcharts是如何实现的
2013-11-11
jQuery获取checkboxlist的value值的方法
最近着手一个项目用到了服务器空间checkboxlist ,使用起来是方便，可以想要从js获取值就稍微麻烦点了，google后找到了如下方法，感兴趣的小伙伴们可以参考一下
2015-09-09