jquery photoFrame 图片边框美化显示插件

 更新时间:2010年06月28日 19:42:42   作者:  
jquery.photoFrame是很方便的一个相框插件,原理也很简单,将选定对象用九宫格table包裹,再设置其边框的背景图片即可。
三种样式都是用photoframe实现的,我会继续丰富其样式,目标是拿来即用,简化页面代码。
使用:
复制代码 代码如下:

<link type="text/css" rel="stylesheet" href="stamp/style.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.photoFrame.js"></script>
<script type="text/javascript">
$(function(){
$(".target1").photoFrame();
});
</script>
<div class="target1">
<img src="images/1.jpg" />
</div>

参数
direction : top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight

目标:
/阴影效果
/顶部banner效果
/邮票效果
毛边相框效果
云朵包围效果

问题(未解决):
上下左右四个图片拉伸效果如何实现?
image解决方案:内置image并设置其width和height
ie解决方案: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/counter_bg.jpg', sizingMethod='scale'
css3解决方案: ?

在线演示地址http://demo.jb51.net/js/jquery.photoFrame/shadow.html
打包下载地址https://www.jb51.net/jiaoben/28010.html

相关文章

  • JQuery操作单选按钮以及复选按钮示例

    JQuery操作单选按钮以及复选按钮示例

    单选按钮以及复选按钮的使用情况还是蛮多的,接下来为大家介绍下通过JQuery操作单选按钮和复选按钮,希望对大家有所帮助
    2013-09-09
  • jQuery中$.ajax()方法的具体使用

    jQuery中$.ajax()方法的具体使用

    本文主要介绍了jQuery中$.ajax()方法的具体使用,$.ajax(url,[settings])通过 HTTP 请求加载远程数据,文中通过示例代码详细的介绍了$.ajax()的用法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 基于jQuery实现左右图片轮播(原理通用)

    基于jQuery实现左右图片轮播(原理通用)

    这篇文章主要介绍了基于jQuery实现左右图片轮播,实现原理通用可通用,希望能和大家分享一下思路,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jQuery冲突问题解决方法

    jQuery冲突问题解决方法

    在本篇文章里小编给大家整理的是一篇关于jQuery冲突问题解决方法,有兴趣的朋友们可以学习下。
    2021-01-01
  • JQuery中attr方法和removeAttr方法用法实例

    JQuery中attr方法和removeAttr方法用法实例

    这篇文章主要介绍了JQuery中attr方法和removeAttr方法用法,实例分析了jQuery中attr方法设置属性与removeAttr方法移除属性的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • jquery UI Datepicker时间控件的使用方法(基础版)

    jquery UI Datepicker时间控件的使用方法(基础版)

    这篇文章主要介绍了jquery ui datepicker时间控件的使用方法,需要的朋友可以参考下
    2015-11-11
  • jquery实现全选和全不选功能效果的实现代码【推荐】

    jquery实现全选和全不选功能效果的实现代码【推荐】

    下面小编就为大家带来一篇jquery实现全选和全不选功能效果的实现代码【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05
  • 使用jQuery操作DOM的方法小结

    使用jQuery操作DOM的方法小结

    本文主要介绍了使用jQuery操作DOM的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JQuery节点元素属性操作方法

    JQuery节点元素属性操作方法

    这篇文章主要介绍了JQuery节点元素属性操作方法,实例分析了attr与removeAttr方法操作节点元素属性的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery.Validate表单验证插件的使用示例详解

    jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。接下来通过本文给大家介绍jQuery.Validate表单验证插件的使用示例,一起看看吧
    2017-01-01

最新评论