编程 Javascript

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程序设计有所帮助。

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

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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="file"]实现文件上传功能

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