介绍一个十分好用的JQUERY图片放大镜插件

介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图,

传统的另外打开一张大图的话,不大COOL,所以找到了这个插件,

插件下载地址:

http://www.mind-projects.it/projects/jqzoom/

简单介绍下,在下载后,

要准备一张小图和一张清晰点的大图,然后在页面中引入JQUERY和这个插件的JS

<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

然后再引入一个CSS

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">

接着是两张大图和小图

<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
  <img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen"></a>

这里注意的是一张大图,一张小图,并且"kawasakigreen_small.jpg"这个小图中,那个title是要出现在放大镜里的文字标题

然后在JS中

<script type="text/javascript">

$(function() {

var options3 =
            {
                zoomWidth: 200,
                zoomHeight: 200,
                xOffset: 20,
                title: false,
                lens:false

}

$(".jqzoom").jqzoom(options3);
});
</script>

这里就是放大镜的效果了,具体的文档和例子请参考

http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

posted on 2009-12-24 23:45 jackyrong的世界 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/jackyrong/archive/2009/12/24/1631761.html

介绍一个十分好用的JQUERY图片放大镜插件相关推荐

  1. jQuery图片放大镜插件

    运行效果: 代码编辑: <html lang="zh"> <head><meta charset="UTF-8"><m ...

  2. jquery图片放大镜插件—jqzoom

    说明:在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效 ...

  3. jquery 图片放大镜插件

    jQZoom是一个基于最流行的jQuery的图片放大器插件.它功能强大,使用简便.支持标准模式.反转模式.无镜头.无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果,修正IE6的select ...

  4. Jquery图片放大镜效果

    介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL,所以找到了这个插件, 插件下载地址: http ...

  5. 13款jQuery图片放大镜效果代码

    jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...

  6. 一个简单的 jQuery 图片裁剪插件----cropper

    浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...

  7. jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件

    [Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...

  8. 十个jQuery图片画廊插件推荐

    2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...

  9. 精心挑选的23款美轮美奂的 jQuery 图片特效插件

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...

最新文章

  1. JZOJ 100035. 【NOIP2017提高A组模拟7.10】区间
  2. 玩法与叙事撕裂许久,3A与暴力却难分难舍
  3. android_jsbridge,让你和前端愉快的交互
  4. windwos 批处理重定向, 讲的策彻底
  5. CF1183H Subsequences (hard version)
  6. dockerfile 安装mysql_dockerfile构建mysql镜像
  7. vue3——ref reactive函数
  8. 英语总结系列(二十二):Baby偶遇GCT
  9. Java加载Class文件的原理机制
  10. 我的博客css得到别人的认可
  11. Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0
  12. json 格式化工具/网站
  13. Go Web框架 Gin路由(一)
  14. 用技术去掉搜索引擎中的死链接
  15. 【Python3】23.求平方根---牛顿迭代法
  16. 计算机大二学生个人总结报告,计算机学生大二第二学期自我总结计划自我总结计划.doc...
  17. 用户配置 计算机配置文件,Win10系统创建自定义默认用户配置文件
  18. 浅析deep深度选择器
  19. 小米电视看普通电视台,只需几步就能轻松解锁
  20. SpringBoot重点详解--事件监听

热门文章

  1. mysql外键设置sql语句,SQL Server 2008之SQL语句外键
  2. yii2 html 跳转,阐述在Yii2上实现跳转提示页
  3. java windows 2008_Windows server 2008 R2 安装Java环境
  4. 基于java Springboot实现课程评分系统设计和实现
  5. 192.168.8.1手机登陆_高端机型都在鼓吹的ufs3.1是什么?对于手机使感受明显吗?...
  6. tensor数据类型转换_PyTorch的tensor数据类型及其相关转换
  7. linux read recv,read()/ recv()成功,但缓冲区未更改且为空
  8. 存储器块清零c语言版,存储器块清零实验报告
  9. C语言带参宏定义和函数的区别
  10. 谷歌浏览器外贸版_外贸 网站移动端优化 浅析