注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

jQuery图片放大插件[twiPicZoom]  

2013-02-28 14:35:41|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

功能说明:

      双击查看大图,鼠标滚动放大缩小,能够切换到上一张和下一张,点击右上角关闭,兼容主流的浏览器。

 

截图效果:

(例子一效果)

jQuery图片放大插件[twiPicZoom] - 飞天心宏 - 飞天心宏的博客

 

 (例子二效果:注,如果第一张的时候,左侧就不会显示前一张箭头,最后一张类似 

jQuery图片放大插件[twiPicZoom] - 飞天心宏 - 飞天心宏的博客

 

 

如何使用:(include)

      1、样式 twiPicZoom.css      

      2、jQuery的类库,不一定要用1.8.3,其他的版本也行。

      3、鼠标滚动放大缩小需要用到 jquery.mousewheel.js

    4、核心 jquery.twiPicZoom.js

    <link href="../../twiPicZoom/twiPicZoom.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="../../twiPicZoom/jquery.mousewheel.js" type="text/javascript"></script>

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

 

在代码中对选择的对像直接使用twiPicZoom()方法。

$(function () {

     $('img[type="twiPicZoom"]').twiPicZoom();

});

 

例子1:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link href="../../twiPicZoom/twiPicZoom.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="../../twiPicZoom/jquery.mousewheel.js" type="text/javascript"></script>

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

    <title>查看图片大图</title>

    <script type="text/javascript">

        $(function () {

            $('img[type="twiPicZoom"]').twiPicZoom();

        });

    </script>

</head>

<body>

     <div id="imgContainer">

         <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Desert.jpg" type="twiPicZoom"/>

         <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Hydrangeas.jpg" type="twiPicZoom"/>

         <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Lighthouse.jpg" type="twiPicZoom"/>

         <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Jellyfish.jpg" type="twiPicZoom"/>

     </div>

</body>

</html>

 

例子2:(复杂的结构,选择的不是图片对象,也可配置属性)

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <link href="../../twiPicZoom/twiPicZoom.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="../../twiPicZoom/jquery.mousewheel.js" type="text/javascript"></script>

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

    <title>查看图片大图/更改配置</title>

    <script type="text/javascript">

        $(function () {

            $('div[type="twiPicZoom"]').twiPicZoom({srcField:'href'});

        });

    </script>

    <style type="text/css">

        #imgContainer div

        {

            display:inline-block;    

        }

    </style>

</head>

<body>

    <div id="imgContainer">

         <div type="twiPicZoom" href="../../samplePictures/Desert.jpg">

             <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Desert.jpg" />

             <h2>Desert</h2>

         </div>

         <div  type="twiPicZoom"  href="../../samplePictures/Hydrangeas.jpg">

             <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Hydrangeas.jpg"/>

             <h2>Hydrangeas</h2>

         </div>

 

            

         <div  type="twiPicZoom" href="../../samplePictures/Lighthouse.jpg">

            <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Lighthouse.jpg"/>

            <h2>Lighthouse</h2>

         </div>

 

         <div  type="twiPicZoom" href="../../samplePictures/Jellyfish.jpg">

            <img style="width:160px;height:120px;" alt="" src="../../samplePictures/Jellyfish.jpg"/>

            <h2>Jellyfish</h2>

         </div>

    </div>

</body>

</html>

 

 

源码下载地址:

twiPicZoom 1.0 http://www.kuaipan.cn/file/id_50389080302682261.htm

 

  评论这张
 
阅读(1653)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017