corner.js & greybox.js

最近的任务是改bug,空闲时间比较多,看了两个js文件,在我们做的项目中试验了下,感觉挺好的,原先对js一点不感兴趣,现在发现js有时候的效果真的很牛,记录一下.自己现在只是知道怎么应用这两个js而已.

corner.js:allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean.It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing.

corner.js官网:http://www.netzgesta.de/corner/

使用方法:在文件中导入js文件(我这里是jsp文件中加入:

< script  type ="text/javascript"  src ="js/corner.js" ></ script >

然后设置你要有corner效果的图片:

< img  width =220  height =160  class ="corner iradius16 ishade66 ishadow30"  src ="icon/news.png" />

这里主要是class属性.

下面是应用抓图:

GreyBox.js: 

GreyBox can be used to display websites, images and other content in a beautiful way.

greybox.js官网:http://orangoo.com/labs/GreyBox/ 

使用方法:

 

     < script  type ="text/javascript" > ...
        var GB_ROOT_DIR = "js/greybox/";
     </ script >

     < script  type ="text/javascript"  src ="js/greybox/AJS.js" ></ script >
     < script  type ="text/javascript"  src ="js/greybox/AJS_fx.js" ></ script >
     < script  type ="text/javascript"  src ="js/greybox/gb_scripts.js" ></ script >
     < link  href ="js/greybox/gb_styles.css"  rel ="stylesheet"  type ="text/css"  media ="all"   />

设置要显示的url或者图片:

< a  href ="newspublish.do?method=detail&pk_newspublish=<%=ss[0]%>"  rel ="gb_page_fs[]" >

效果图:

我的这个效果不好,加一张官网的效果抓图:

不错吧,这两个js写的的确很牛.

郁闷为什么编辑页面的抓图显示没任何问题,到主页面就显示红叉,唉,算了,把图片放到相册里算了,好几次都这样了