jQuery插件之jqzoom的使用和参数设置
博主送福利了,微信扫码有惊喜。超值红包等着你。。么么哒
言归正转
jqzoom是一款基于jQuery的图片方法插件。
使用方法:1.引入jQuery与jqzoom,jqzoom.css
2.准备两张一大一小大小相同的图片,小图片放在<img>标签的"src"属性里,给img标签加个<a>标签,<a>标签的"href"属性链向大图片
参数说明:zoomWidht: 小图片所选区域的宽度。
zoomHeight: 小图片所选区域的高度。
zoomType: 默认值为standard。如果设为reverse,在小图片仲,移入鼠标时,所选区域高亮,非选中区域淡灰色。
xOffset: 放大后的图片与小图片间的X(横坐标)距离。
yOffset: 放大后的图片与小图片间的Y(纵坐标)距离。
position: 放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"。
lens: 布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为"false",则放大后的图片上面不会出现主题字样。
imageOpacity: 当zoomType的值为"reverse"时,用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。
preloadImages:布尔值,表示是否重新加载大图像。
preloadText: 重新加载大图像时,小图像显示的文本说明。
title: 大图像顶部是否显示<a>标签里的title。
showEffect: 大图像加载时的特效,可选值:"show"表示直接显示,"fadein"由透明度渐变载入效果。
hideEffect: 大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。
fadeinSpeed: 当大图像的载入特效设为"fadein"时,此属性可设置特效的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。
fadtoutSpeed: 当大图像的隐藏特效设为"fadeout"时,此属性可设置特效载的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。
//html代码 <body>
<div style="margin-left:500px;">
<a id="img1" href="/1big.jpg" title="我的星星" ><img src="/1small.jpg" alt="" /></a>
</div>
</body> //js代码 <script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.jqzoom-core.js" type="text/javascript"></script>
<link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#img1').jqzoom({
zoomWidth:200,
zoomHeight:200,
position:"bottom",
yOffset:50,
lens:true,
imageOpacity:1.0
});
})
</script>
jQuery插件之jqzoom的使用和参数设置的更多相关文章
- jQuery插件之jqzoom
jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...
- jQuery插件开发方式
一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){ $.extend({ fun1: ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 助你简化开发的 jQuery 插件
Vanity Toolset vanity toolset是一套方便的UI工具集,可以帮助你快速的搭建幻灯,聚光灯,占位,收放相关的UI,它完成了大部分的UI功能,你只需要花费很少时间就可以构建一个完 ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- 写jQuery插件时,一种更好的合并参数的方法
看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...
- jQuery插件select2跨域设置xhrFields参数
ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...
- jquery插件cloud-zoom(放大镜)
效果预览:http://www.helloweba.com/demo/cloud-zoom/ 源代码下载:http://pan.baidu.com/s/1eQnadXo Cloud Zoom是一个图像 ...
随机推荐
- mysql replication driver 在jdk1.6下失效问题解决
mysql diver包里有relication driver,可以在jdbc层进行读写分离,主写从读默认的配置方式是指定driver为ReplicationDriver,并改写jdbc url一起j ...
- SPOJ 3267 D-query (可持久化线段树,区间重复元素个数)
D-query Given a sequence of n numbers a1, a2, ..., an and a number of d-queries. A d-query is a pair ...
- 【BZOJ2818】Gcd(莫比乌斯反演,欧拉函数)
题意:给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对 1<=N<=10^7 思路:莫比乌斯反演,同BZOJ2820…… ; ..max]of ...
- SQL SERVER 2012 第三章 T-SQL 基本语句 group by 聚合函数
select Name,salesPersonID From Sales.store where name between 'g' and 'j' and salespersonID > 283 ...
- 分享最近抽空写的一个代码生成器,集成EasyDBUtility数据库访问帮助类
一直想写一个自己的代码生成器,但是因为工作事情多,一直搁置下来,最近下决心终于利用下班时间写完了,现在分享给有需要的朋友,代码生成器集成EasyDBUtility数据库访问帮助类,暂时只支持sqlse ...
- xming + putty remote GUI
xming 和putty的配置网上有很多 但是在使用时发现有个问题, 记录一下. 在配置完成后,远程运行图形化程序经常会说can not open display等错误. 这有可能是因为xming的安 ...
- uva 1411 Ants (权值和最小的完美匹配---KM算法)
uva 1411 Ants Description Young naturalist Bill studies ants in school. His ants feed on plant-louse ...
- Maven项目中遇到的奇葩问题(续)
场景描写叙述 开发项目搞环境是一个很蛋疼的问题.总是会遇到各种奇葩的问题,上一篇文章http://blog.csdn.net/gao36951/article/details/50955526中遇到的 ...
- JavaSE入门学习5:Java基础语法之keyword,标识符,凝视,常量和变量
一keyword keyword概述:Java语言中有一些具有特殊用途的词被称为keyword.keyword对Java的编译器有着特殊的意义.在程 序中应用时一定要谨慎. keyword特点:组成k ...
- react 项目实战(四)组件化表单/表单控件 高阶组件
高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...