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操作页面表格,元素的一些技巧
Feb 02 Javascript
28个JS验证函数收集
Mar 02 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
获取URL文件名后缀
2013/10/24 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
js常见表单应用技巧
2008/01/09 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python实现的用户登录系统功能示例
2018/02/05 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Django框架反向解析操作详解
2019/11/28 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
企业文化口号
2014/06/12 职场文书
整改落实自查报告
2014/11/05 职场文书
综合实践活动报告
2015/02/05 职场文书
库房管理员岗位职责
2015/02/12 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
我的生日感言
2015/08/03 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
SQL Server中锁的用法
2022/05/20 SQL Server