转载jQuery图片放大插件[twiPicZoom]

转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/

功能说明：

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

截图效果：

（例子一效果）

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

如何使用：（include）

1、样式 twiPicZoom.css

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

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

4、核心 jquery.twiPicZoom.js

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

$(function () {

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

});

例子1：

<head>

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

$(function () {

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

});

</script>

</head>

<body>

</div>

</body>

</html>

例子2：（复杂的结构，选择的不是图片对象，也可配置属性）

<head>

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

$(function () {

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

});

</script>

#imgContainer div

{

display:inline-block;

}

</style>

</head>

<body>

<h2>Desert</h2>

</div>

<h2>Hydrangeas</h2>

</div>

<h2>Lighthouse</h2>

</div>

<h2>Jellyfish</h2>

</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 ...

随机推荐

MySQL配置文件my.cnf中文详解附mysql性能优化方法分享
Mysql参数优化对于新手来讲,是比较难懂的东西,其实这个参数优化,是个很复杂的东西,对于不同的网站,及其在线量,访问量,帖子数量,网络情况,以及机器硬件配置都有关系,优化不可能一次性完成,需要不断的 ...
【PHP面向对象(OOP)编程入门教程】1.什么是面向对象？
面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成 ...
ecshop之transport和jquery冲突之完美解决方案
众所周知:ecshop的transport.js文件和Jquery是冲突的,两个文件不能同时调用,现给出以下完美解决方案:原因分析:在transport.js文件中,大概 580行到590行之间,这个 ...
Android三种消息提示
Android消息提示有三种方式: 1 使用Toast显示消息提示框 Toast类用于在屏幕中显示一个提示信息框,该消息提示框没有任何控制按钮,并且不会获得焦点,经过一定时间后自动消失.通常用于显示 ...
javaweb 解决将ajax返回的内容用document.write写入，FireFox一直加载的问题
在document.write方法后加上document.close就解决了, 想知道原理的小伙伴可以继续看浏览器在解析html时会打开一个流,这是用document.write中写入,是加入当解析 ...
CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
Android学习笔记（十五）——实战：强制下线
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 实现强制下线功能的思路也比较简单,只需要在界面上弹出一个对话框, 让用户无法进行任何其他操作, 必须要点击对话 ...
Activity的四个启动模式
/** * Activity有四种启动模式(android:launchMode) * 分别是: * 1. standard(默认),可以不停的在栈中创建新的Activity * 2. singleT ...
Open CV缩放图像
缩放图像是图像处理中需要经常使用的操作.太小的图像在图像识别中不能很好的处理,需要将其放大,太大的图像不方便储存,需要将其缩小,下面记录OpenCV图片缩放方法. 缩放函数 , , int inter ...
eclipse中整合springMvc和velocity
1.项目所需要的jar包(有些可能多余) 2.在src目录下创建一个bean 一个一个controller ,路径如下 person代码: package com.test.bean; import ...

转载jQuery图片放大插件[twiPicZoom]

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

随机推荐

热门专题