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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 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
PHP类的使用 实例代码讲解
2009/12/28 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
详解php用static方法的原因
2018/09/12 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python多进程重复加载的解决方式
2019/12/13 Python
python画图常规设置方式
2020/03/05 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
学生会主席竞聘书
2014/03/31 职场文书
教师职位说明书
2014/07/29 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技