转载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
转载jQuery图片放大插件[twiPicZoom]的更多相关文章
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 一款简单实用的jQuery图片画廊插件
图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...
- 十个jQuery图片画廊插件推荐
jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQu ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
随机推荐
- JavaScript-也来谈--闭包
闭包,以前研究过,可能是当初理解的不够透彻,现在又忘了,(给自己一个台阶下`-...)毕竟js一直没怎么用, 为了防止自己过段时间再忘了,写篇重要的闭包重点, 这样时不时也能温习下知识,不用每次想了解 ...
- ASP.NET Core -- 安装版
首先安装的→Visual Studio Community 原文地址 本来觉得安装了vs 就可以了,,结果一直报错,,,太天真... 接下来还要安装 →NuGet.Tools.vsix →DotNet ...
- Python网络socket学习
Python 网络编程 Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的 ...
- OC第五节 ——点语法和@property
一.setter和getter函数 1.回忆:如何访问对象中的成员变量 2.setter和getter函数的作用 setter 方法: 修改对象的字段/实例变 ...
- solr
一.启动命令 tar -zxvf solr-.tgz cd solr-\example java -jar start.jar 默认监听8983端口 java -Djetty.port= -jar s ...
- Go - 内置函数大全
Package builtin import "builtin" Overview Index Overview ▾ Package builtin provides docume ...
- Oracle 分区表的新增、修改、删除、合并。普通表转分区表方法
一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Orac ...
- kendoUI grid 过滤时出错:TypeError toLowerCase is not a function
错误原因:类型不一致. 有些过滤类型为字符串,有些为整型时.
- mybaits in
mybatis中的in: <select id="getByInventoryIds" resultMap="beanMap"> SELECT * ...
- Apache2.4.6 添加虚拟主机
apache2.4 与 apache2.2 的虚拟主机配置写法有所不同 apache2.2的写法: <VirtualHost *:80> ServerName domain.com Doc ...