JS实现图片放大镜效果的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了JS实现图片放大镜效果的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JS精美的图片放大镜效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

.test{

 margin:0 0 0 200px;

} 

.test a{

 font-size:14px;

 color:#404040;

}

.test img{

 border:#4b4b4b 1px solid;

}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<script src="/js/magnifier.js"></script>

<div class="test">

 <h3><a target="_blank" href="">Picture I</a></h3>

 <img src="/images//m01.jpg" bigsrc="/images/1.jpg">

</div>

<div class="test">

 <h3><a target="_blank" href="">Picture II</a></h3>

 <img src="/images//m02.jpg" bigsrc="/images/2.jpg">

</div>

<div class="test">

 <h3><a target="_blank" href="">Picture III</a></h3>

 <img src="/images//m03.jpg" bigsrc="/images/3.jpg">

</div>

</body>

</html>

补充:magnifier.js插件点击此处本站下载。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
JS中Array数组学习总结
Jan 18 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
js实现有时间限制消失的图片方法
Feb 27 #Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 #Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 #Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 #Javascript
JavaScript中Function详解
Feb 27 #Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 #Javascript
You might like
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
django框架ModelForm组件用法详解
2019/12/11 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python合并多个excel文件的示例
2020/09/23 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
继电保护工岗位职责
2014/01/05 职场文书
高二地理教学反思
2014/01/24 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
群众路线领导对照材料
2014/08/23 职场文书
教师师德考核自我评价
2014/09/13 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP