jquery使用ColorBox弹出图片组浏览层实例演示

本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址：http://www.keleyi.com/keleyi/phtml/colorbox/ 以下是本效果的完整代码，将以下代码保存到html文件，打开即可预览效果。复制代码代码如下: <!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> <title>使用ColorBox弹出图片组浏览层</title> <link rel="stylesheet" href="http://www.keleyi.com/keleyi/phtml/colorbox/colorbox.css" /> <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://www.keleyi.com/keleyi/phtml/colorbox/jquery.colorbox-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".keleyi_com").colorbox({ rel: 'group1', transition: "none", innerWidth: '700px' }); }); </script> </head> <body> <div style="width:400px;margin-left:auto;margin-right:auto;"> 请点击下面链接，即可在弹出层显示图片组。 <p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" title="菊花">图片一</a></p> <p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k03.jpg" title="开心">图片二</a></p> <p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k05.jpg" title="宋慧乔">图片三</a></p> <p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picqiehuan/p3.jpg" title="梦想">图片四</a></p> </div></body> </html>

　　推荐阅读

　　jQuery用unbind方法去掉hover事件及其他方法介绍

今天遇到jquery怎么去掉hover的问题，最开始以为直接unbind(“hover”)就可以搞定，可是搞了半天都失败拉。百度也搜了很多关于jquery中对hover事件unbind,后还是在一个老外的博客上看到了正确的方法，现在爱微网拿>>>详细阅读

本文标题：jquery使用ColorBox弹出图片组浏览层实例演示

地址：http://www.17bianji.com/kaifa2/JS/22244.html

1/2 1