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

截图效果：

（例子一效果）

（例子二效果：注，如果第一张的时候，左侧就不会显示前一张箭头，最后一张类似）

如何使用：（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

转载jQuery图片放大插件[twiPicZoom]的更多相关文章

  1. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 一款简单实用的jQuery图片画廊插件

    图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...

  3. 十个jQuery图片画廊插件推荐

    jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...

  4. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  5. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  6. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  7. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  8. Croppic – 免费开源的 jQuery 图片裁剪插件

    Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData  对 ...

  9. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

随机推荐

  1. 黄学长模拟day1 球的序列

    N个编号为1-n的球,每个球都有唯一的编号.这些球被排成两种序列,分别为A.B序列,现在需要重新寻找一个球的序列l,对于这个子序列l中任意的两个球,要求j,k(j<k),都要求满足lj在A中位置 ...

  2. RNA测序样本检测

    常规转录组测序     样品类型:去蛋白并进行DNase处理后的完整总RNA 样品需求量(单次): 植物和真菌样品:≥20 μg: 人.大鼠.小鼠样品:≥5 μg: 其他类型动物:≥10 μg: 原核 ...

  3. linux 中断理解

    1.进程.线程只针对的是应用层,而内核调用.驱动没有这种概念,调用的都是内核调用里相同的函数或变量,所以应用层多个应用操作同个硬件时,特别是要加互斥操作,8250通过cs针脚决定发送数据给哪个串口 2 ...

  4. springMVC之国际化

    1.工程结构 2.jar包 3.配置文件spring-config.xml,springMVC配置文件 <?xml version="1.0" encoding=" ...

  5. memcache安装

    windows下访问 http://pecl.php.net/package/memcache/3.0.8/windows 下载对应版本memcache的dll文件添加到php目录ext下 PHP.i ...

  6. js 模块化编程

    Javascript模块化编程(一):模块的写法   作者: 阮一峰 日期: 2012年10月26日 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞 ...

  7. SMTP协议--在cmd下利用bat命令行发送邮件

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议 选择‘开始’-‘运行’,输入cmd,进入命令提示符窗口. Windows7默认没有开始Telnet服务,请在运 ...

  8. linux kernel 杂谈

    首先介绍一下背景吧,工作三个星期了．复习了一波u-boot,跟了一下事件上报,搞了下平台设备,扣了一个内存检查代码． 想想生活是不是有点无聊．对啊,真的很无聊!!!! 无聊也没有办法啊,所以找点方法去 ...

  9. POJ 1995 快速幂模板

    http://poj.org/problem?id=1995 简单的快速幂问题 要注意num每次加过以后也要取余,否则会出问题 #include<iostream> #include< ...

  10. gcc编译时对'xxxx'未定义的引用问题

    gcc编译时对’xxxx’未定义的引用问题 gcc编译时对’xxxx’未定义的引用问题 原因 解决办法 gcc 依赖顺序问题 在使用gcc编译的时候有时候会碰到这样的问题,编译为.o(obj) 文件没 ...