jquery photoFrame 圖片邊框美化顯示插件
更新時(shí)間：2010年06月28日 19:42:42 作者：
jquery.photoFrame是很方便的一個(gè)相框插件，原理也很簡(jiǎn)單，將選定對(duì)象用九宮格table包裹，再設(shè)置其邊框的背景圖片即可。
三種樣式都是用photoframe實(shí)現(xiàn)的，我會(huì)繼續(xù)豐富其樣式，目標(biāo)是拿來(lái)即用，簡(jiǎn)化頁(yè)面代碼。
使用：
<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>
參數(shù)
direction : top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight
目標(biāo)：
/陰影效果
/頂部banner效果
/郵票效果
毛邊相框效果
云朵包圍效果
問(wèn)題（未解決）：
上下左右四個(gè)圖片拉伸效果如何實(shí)現(xiàn)？
image解決方案：內(nèi)置image并設(shè)置其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
打包下載地址http://chabaoo.cn/jiaoben/28010.html
使用：
復(fù)制代碼 代碼如下:
<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>
參數(shù)
direction : top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight
目標(biāo)：
/陰影效果
/頂部banner效果
/郵票效果
毛邊相框效果
云朵包圍效果
問(wèn)題（未解決）：
上下左右四個(gè)圖片拉伸效果如何實(shí)現(xiàn)？
image解決方案：內(nèi)置image并設(shè)置其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
打包下載地址http://chabaoo.cn/jiaoben/28010.html
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示動(dòng)畫(huà)邊框特效
- jQuery實(shí)現(xiàn)邊框動(dòng)態(tài)效果的實(shí)例代碼
- jquery插件corner實(shí)現(xiàn)圓角邊框的方法
- JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上顯示邊框效果
- jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
- jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
- jquery(1.3.2) 高亮選中圖片邊框
- jquery實(shí)現(xiàn)邊框特效
相關(guān)文章
單選按鈕以及復(fù)選按鈕的使用情況還是蠻多的，接下來(lái)為大家介紹下通過(guò)JQuery操作單選按鈕和復(fù)選按鈕，希望對(duì)大家有所幫助2013-09-09
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)，文中通過(guò)示例代碼詳細(xì)的介紹了$.ajax()的用法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左右圖片輪播，實(shí)現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
在本篇文章里小編給大家整理的是一篇關(guān)于jQuery沖突問(wèn)題解決方法，有興趣的朋友們可以學(xué)習(xí)下。2021-01-01
JQuery中attr方法和removeAttr方法用法實(shí)例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實(shí)例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
jquery UI Datepicker時(shí)間控件的使用方法（基礎(chǔ)版）
這篇文章主要介紹了jquery ui datepicker時(shí)間控件的使用方法，需要的朋友可以參考下2015-11-11
jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了JQuery節(jié)點(diǎn)元素屬性操作方法,實(shí)例分析了attr與removeAttr方法操作節(jié)點(diǎn)元素屬性的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
jQuery.Validate表單驗(yàn)證插件的使用示例詳解
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。接下來(lái)通過(guò)本文給大家介紹jQuery.Validate表單驗(yàn)證插件的使用示例，一起看看吧2017-01-01