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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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目录导航文件代码
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP7内核之Reference详解
2019/03/14 PHP
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
找工作最新求职信
2013/12/22 职场文书
考试没考好检讨书
2014/01/31 职场文书
白酒市场营销方案
2014/02/25 职场文书
《画家乡》教学反思
2014/04/22 职场文书
一份文言文检讨书
2014/09/13 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
婚宴新郎致辞
2015/07/28 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers