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 相关文章推荐
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 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
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JS功能代码集锦
2016/05/04 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JavaScript实现简单计算器
2020/03/19 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
校运会口号
2014/06/18 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
老干部座谈会主持词
2015/07/03 职场文书
致运动员赞词
2015/07/22 职场文书