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 相关文章推荐
实现placeholder效果的方案汇总
Jun 11 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
使用javascript做在线算法编程
May 25 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
javascript基础知识讲解
2017/01/11 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python实现给字典添加条目的方法
2014/09/25 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
职业教育毕业生求职信
2013/11/09 职场文书
普通话宣传标语
2014/06/26 职场文书
就业证明函
2015/06/17 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Python集合的基础操作
2021/11/01 Python
Python之matplotlib绘制饼图
2022/04/13 Python
使用Python获取字典键对应值的方法
2022/04/26 Python