简单的JQuery实现图片增加超链接并且增加lightbox放大效果
JQuery Api文件包下载地址: http://api.jquery.com/
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的JQuery实现图片增加超链接并且增加lightbox放大效果</title> </head> <body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <div id="body1"> <img src="http://images.75271.com/uploads/allimg/120705/1-120F51A5102J.jpg" width=164 /> <img src=http://images.75271.com/uploads/allimg/120705/1-120F51A5102J.jpg width=164 /> </div> <script type="text/javascript"> $(document).ready(function ($) { //<!--JQuery实现图片添加链接--> $('#body1 img').each(function (i) { //只对ID为logPanel的div内的图片操作（可根据实际情况修改，或去掉#logPanel ，即对页面内所有图片遍历操作） if (this.width > 80) { //图片宽度大于80时才对其操作 $(this).wrap("<a href=" + $(this)[0].src + " class=lightbox></a>"); //给符合条件的图片加入自身的链接，加入jquery.lightbox的识别标志之一class=lightbox } }); $("#body1 a.lightbox").lightBox(); //添加lightbox效果，同样需注意#logPanel 的限制 }); //<!--end--> //简单的JQuery实现图片增加超链接并且增加lightbox放大效果< /script> </body> </html> |
开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明简单的JQuery实现图片增加超链接并且增加lightbox放大效果！
