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 相关文章推荐
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
js实现AI五子棋人机大战
May 28 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python装饰器decorator介绍
2014/11/21 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python实现定时发送qq消息
2019/01/18 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python定义一个函数的方法
2020/06/15 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
公司联欢会策划方案
2014/05/19 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
新闻稿怎么写
2015/07/18 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
python脚本框架webpy的url映射详解
2021/11/20 Python