jqZoom插件
来源:互联网 发布:python split 分隔符 编辑:程序博客网 时间:2024/05/17 05:52
一直对图片缩放饶有兴趣的我今日一个很投机的机会研究了一把
参考官方网站:http://www.mind-projects.it/projects/jqzoom/index.php
参考demo文献:http://www.mind-projects.it/projects/jqzoom/index.php#examples网站下方download一栏
在官方文档下载的demo文献中,有详尽的例子,这里主要解释运用以及options(选项)的含义
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
zoomWidth: 300,
zoomHeight:450,
xOffset:90,
yOffset:30,
preloadImages: true,
alwaysOn:false
});
});
此处为引用正文
html如下:
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
<div class="clearfix">
<a href="../images/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
<img src="../images/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
</a>
</div>
<br/>
<div class="clearfix" >
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small1.jpg',largeimage: '../images/triumph_big1.jpg'}"><img src='../images/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small2.jpg',largeimage: '../images/triumph_big2.jpg'}"><img src='../images/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small3.jpg',largeimage: '../images/triumph_big3.jpg'}"><img src='../images/thumbs/triumph_thumb3.jpg'></a></li>
</ul>
</div>
</div>
此处官方文档有详尽资料,这里也是引用官方资料文献
属性含义如下:
zoomWidth,表示放大框的宽
zoomHeight ,表示放大框的高
xOffset,表示离显示展示中等图片的x距离
yOffset,表示离显示中等图片的Y距离
position,表示显示的放大框在浏览器的center,还是left,还是right
lens,表示显示在中等图片的缩放位置是否显示,默认为true
alwaysOn,表示放大框是否一直显示
- jqZoom插件
- jqzoom图片放大插件
- jQuery插件之jqzoom
- 使用jqzoom插件时
- 使用jqzoom插件时
- JQUERY图片放大镜插件(jqzoom)
- jQuery图片放大镜插件jqzoom
- jquery插件jqzoom放大镜插件特效代码分享
- jQuery插件之jqzoom放大镜插件
- 5、jQuery插件之jqzoom放大镜插件
- jqzoom
- Jquery 实现放大镜效果 jqzoom插件
- jQuery 图片放大镜效果插件:jQZoom
- 图片放大镜效果【jQZoom-JQuery插件】
- 使用jqzoom插件实现图片放大镜效果
- jQuery的图片放大器插件 jQzoom
- jquery插件jquery.jqzoom的用法
- 【jQuery】图片放大镜插件——jqzoom
- (解决方案)ubuntu12.10下搭建hadoop(1.0.4)平台
- ACM next_permutation函数
- form表单提交乱码问题
- 编译Android的源代码,内核及其工具包
- Linux时间函数
- jqZoom插件
- ASP.NET MVC案例教程(四)
- 【Android测试工具】01. Android TraceView工具使用详解
- 项目六
- oracle 11g client 配置
- HDU1754:I Hate It
- WINDOWS可以禁止的服务
- SQL语句大全
- 第五堂课后作业