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://m.fzitv.net/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://m.fzitv.net/jiaoben/28010.html
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示動(dòng)畫邊框特效
- 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)文章
jquery keypress,keyup,onpropertychange鍵盤事件
項(xiàng)目所需，在試圖用js實(shí)現(xiàn)這樣的功能：文本框失去焦點(diǎn)時(shí)，判斷輸入字符串的長(zhǎng)度，以驗(yàn)證是否超出范圍，超出范圍則自動(dòng)截取。2010-06-06
js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法
今天小編就為大家分享一篇js根據(jù)json數(shù)據(jù)中的某一個(gè)屬性來(lái)給數(shù)據(jù)分組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
關(guān)鍵詞匹配搜索想必大家一定會(huì)想到百度，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
本文主要介紹jQuery 3中一些新增的特性和一些變更的特性，以及一些廢棄刪除的特性，另外介紹了jQuery 3.0 最大的變化就是徹底放棄對(duì) IE8 的支持，大家可以先看一下。2016-04-04
javascript和jquery修改a標(biāo)簽的href屬性
a標(biāo)簽的href如何修改，下面為大家介紹下使用javascript或jquery來(lái)簡(jiǎn)單實(shí)現(xiàn)，感興趣的朋友可以參考下2013-12-12
jquery插件開(kāi)發(fā)注意事項(xiàng)小結(jié)
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)2013-06-06
jQuery中的類名選擇器（.class）用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡(jiǎn)單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下2018-05-05
jQuery插件實(shí)現(xiàn)文件上傳功能（支持拖拽）
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)文件上傳功能，可支持拖拽文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
用jQuery獲取table中行id和td值的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇用jQuery獲取table中行id和td值的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05