利用jqueryzoom实现图片放大镜效果
2024-08-30 00:08:17
- 在你的页面中包含 jqzoom.css
- <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">
- 包含 jQzoom 和 jQuery JS 代码:
- <script type="text/javascript" src="your_path/jquery.js"></script>
- <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>
- 现在创建一个放图片的容器(最好是 DIV),并给
class
赋值为jqzoom
,然后给每 张图片设置一个jqimg
属性,它的值为大图的地址。 - <div class="jqzoom"><img src="data:images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>
- 当页面导入的时候,载入 jQZoom 插件。在head之前写入下面JS
- $(document).ready(function(){ $(".jqzoom").jqueryzoom(); });
- 好了基本设置好了,当然你也可以自己做些简单的设置:
- $(document).ready(function(){
- $(".jqzoom").jqueryzoom({
- xzoom: 300, //设置放大 DIV 长度(默认为 200)
- yzoom: 300, //设置放大 DIV 高度(默认为 200)
- offset: 10, //设置放大 DIV 偏移(默认为 10)
- position: "right", //设置放大 DIV 的位置(默认为右边)
- preload:1,
- lens:1
- });
- });
这个jquery.js,jquery.jqzoom.js可以在网上下,到处都是。这里就不附件了。
最新文章
- 【集合框架】Java集合框架综述
- SQLite入门语句之HAVING和DISTINCT
- 【转】Struts2国际化
- 王爽-汇编语言-综合研究一-搭建简易C环境
- scala学习笔记:理解类继承
- spring beans源码解读
- asp.net中对象的序列化,方便网络传输
- C++ dll调用-动态(显式)
- xml 个人练习2
- 12个高矮不同的人,排成两排(catalan数)
- IKAnalyzer 分词
- 【java虚拟机系列】java虚拟机系列之JVM总述
- Google Protocol Buffers学习
- Web开发——JavaScript基础
- 2018.1.7java转型
- day16 包的使用 json time 常用模块
- C#如何提取.txt文件中的每个字符串
- Spring Boot学习笔记(八)使用jar和war方式打包并在外部Tomcat中部署运行
- C#软件license管理(简单软件注册机制)
- mysql创建、删除用户与授权(linux測试)
热门文章
- 一款APP的开发设计是如何从0到1一步一步设计的
- pwiz, a model generator
- 基于Linux/C++简单线程池的实现
- PhotoZoom Classic 7有什么用?高品质的放大模糊图片!
- 【转】Oralce基础—Sqlplus工具运用 礼记八目 2017-12-20 20:22:45
- CentOS 7 yum 安装redis(更简单)
- The socket is closed!
- Project Euler 13 Large sum
- vue 上传图片到阿里云(前端直传:不推荐)
- CSS 居中【整合】