JQuery插件:图片放大镜
来源:互联网 发布:vb csng 编辑:程序博客网 时间:2024/06/06 05:13
jqzoom是一款基于jQuery的图片方法插件。https://github.com/mindprojects/jqzoom/
使用方法: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图片放大镜插件
- jquery 图片放大镜插件
- jQuery图片放大镜插件
- JQuery插件:图片放大镜
- JQUERY图片放大镜插件(jqzoom)
- JQuery 实现图片放大镜插件
- jquery图片放大镜插件使用
- jQuery图片放大镜插件jqzoom
- jQuery插件:图片放大镜--jQuery Zoom
- jQuery 图片放大镜效果插件:jQZoom
- jQuery图片放大镜插件Cloud Zoom
- 图片放大镜效果【jQZoom-JQuery插件】
- 轻量级jQuery图片放大镜插件 - mlens
- jQuery的图片放大镜效果插件 - elevateZoom
- loner_li JQuery 插件之 放大镜图片效果
- 【jQuery】图片放大镜插件——jqzoom
- 【JQuery】图片放大镜插件——jqzoom
- jquery图片放大镜插件—jqzoom
- spring2.5使用jdk1.7及以上解决办法
- log4j.properties配置文件
- 一看就明白的爬虫入门讲解:基础理论篇
- ubuntu安装deb包
- springmvc注入properties文件属性
- JQuery插件:图片放大镜
- 接口post的syso输出调用的方法
- shape相关属性测试(默认矩形)
- HashSet 和 TreeSet 区别
- bootstrap-datetimepicker年视图中endDate设置之后比正常时间提前两个月
- groovy for
- Full Binary Tree(山东省第五届ACM大学生程序设计竞赛 )
- [实例] x509 命令(读取一个证书的信息)
- json格式解析