jquery图片放大功能简单实现


Posted in Javascript onAugust 01, 2013
<div class="jqzoom"> 
<img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg"> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<style type="text/css"> 
body{margin:0px;} 
div.zoomdiv { 
z-index: 999; 
position : absolute; 
top:0px; 
left:0px; 
width : 200px; 
height : 200px; 
background: #ffffff; 
border:1px solid #CCCCCC; 
display:none; 
text-align: center; 
overflow: hidden; 
} 
div.jqZoomPup { 
z-index : 999; 
visibility : hidden; 
position : absolute; 
top:0px; 
left:0px; 
width : 50px; 
height : 50px; 
border: 1px solid #aaa; 
background: #ffffff; 
opacity: 0.5; 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5; 
filter: alpha(Opacity=50); 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".jqzoom").jqueryzoom({ 
xzoom: 400, //设置放大 DIV 长度(默认为 200) 
yzoom: 400, //设置放大 DIV 高度(默认为 200) 
offset: 10, //设置放大 DIV 偏移(默认为 10) 
position: "right", //设置放大 DIV 的位置(默认为右边) 
preload:1, 
lens:true 
}); 
}); 
</script> 
<!--{include file="jqzoom_js.html"}-->
Javascript 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 #Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 #Javascript
jquery中选择块并改变属性值的方法
Jul 31 #Javascript
JQuery写动态树示例代码
Jul 31 #Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 #Javascript
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vue实现弹幕功能
2019/10/25 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python 调用DLL操作抄表机
2009/01/12 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
绩效工资分配方案
2014/01/18 职场文书
八年级美术教学反思
2014/02/02 职场文书
小学老师寄语大全
2014/04/04 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书