编程 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 相关文章推荐

JS类库Bindows1.3中的内存释放方式分析

Mar 08 Javascript

用Greasemonkey 脚本收藏网站会员信息到本地

Oct 26 Javascript

javascript 浏览器检测代码精简版

Mar 04 Javascript

合并table相同单元格的jquery插件分享(很精简)

Jun 20 Javascript

jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍

Jan 10 Javascript

js的.innerHTML = ""IE9下显示有错误的解决方法

Sep 16 Javascript

jQuery实现html元素拖拽

Jul 21 Javascript

浅析$(function) ready和onload 的区别

Sep 03 Javascript

微信小程序保留小数(toFixed)详细介绍

Nov 16 Javascript

js针对图片加载失败的处理方法分析

Aug 24 Javascript

基于Vue el-autocomplete 实现类似百度搜索框功能

Oct 25 Javascript

用webAPI实现图片放大镜效果

Nov 23 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

7个超级实用的PHP代码片段

2011/07/11 PHP

PHP中header函数的用法及其注意事项详解

2016/06/13 PHP

php支付宝APP支付功能

2020/07/29 PHP

Laravel用户授权系统的使用方法示例

2018/09/16 PHP

php微信公众号开发之关键词回复

2018/10/20 PHP

纯JAVASCRIPT图表动画插件Highcharts Examples

2011/04/16 Javascript

jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍

2011/10/21 Javascript

杨氏矩阵查找的JS代码

2013/03/21 Javascript

原生JS实现响应式瀑布流布局

2015/04/02 Javascript

多个js毫秒倒计时同时进行效果

2016/01/05 Javascript

关于javascript原型的修改与重写(覆盖)差别详解

2016/08/31 Javascript

关于 jQuery Easyui异步加载tree的问题解析

2016/12/06 Javascript

微信端开发--登录小程序步骤

2017/01/11 Javascript

jQuery初级教程之网站品牌列表效果

2017/08/02 jQuery

bootstrap table sum总数量统计实现方法

2017/10/29 Javascript

vue的传参方式汇总和router使用技巧

2018/05/22 Javascript

Angular2中监听数据更新的方法

2018/08/31 Javascript

使用 Element UI Table 的 slot-scope方法

2019/10/10 Javascript

原生JS生成指定位数的验证码

2020/10/28 Javascript

[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

python3.6 +tkinter GUI编程实现界面化的文本处理工具(推荐)

2017/12/20 Python

python smtplib模块实现发送邮件带附件sendmail

2018/05/22 Python

使用虚拟环境打包python为exe 文件的方法

2019/08/29 Python

python网络爬虫 CrawlSpider使用详解

2019/09/27 Python

python使用正则表达式去除中文文本多余空格，保留英文之间空格方法详解

2020/02/11 Python

一款利用html5和css3实现的3D滚动特效的教程

2015/01/04 HTML / CSS

大学生实习思想汇报

2014/01/12 职场文书

干部考核评语

2014/04/29 职场文书

住宅使用说明书

2014/05/09 职场文书

考试作弊检讨书

2014/10/21 职场文书

房地产置业顾问岗位职责

2015/04/11 职场文书

2015年英语教学工作总结

2015/05/25 职场文书

小学生暑假生活总结

2015/07/13 职场文书

保姆聘用合同

2015/09/21 职场文书

2016年“世界环境日”校园广播稿

2015/12/18 职场文书

Python使用BeautifulSoup4修改网页内容

2022/05/20 Python