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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
遇到的Mysql的面试题
2014/06/29 面试题
临床医学大学生求职信
2013/09/28 职场文书
寄语十八大感言
2014/02/07 职场文书
高中生操行评语大全
2014/04/25 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
办公室文员岗位职责
2015/02/04 职场文书
工程部主管岗位职责
2015/02/12 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android