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

Prototype 学习 Prototype对象

Jul 12 Javascript

javascript XMLHttpRequest对象全面剖析

Apr 24 Javascript

jquery.post用法示例代码

Jan 03 Javascript

JavaScript插件化开发教程（一）

Jan 27 Javascript

jquery实现图片水平滚动效果代码分享

Aug 26 Javascript

JS动态插入并立即执行回调函数的方法

Apr 21 Javascript

JS使用JSON作为参数实例分析

Jun 23 Javascript

AngularJS入门教程之服务(Service)

Jul 27 Javascript

js 获取范围内的随机数实例代码

Aug 02 Javascript

Angular2.0/4.0 使用Echarts图表的示例代码

Dec 07 Javascript

js实现蒙版效果

Jan 11 Javascript

Vue初始化中的选项合并之initInternalComponent详解

Jun 11 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

收音机频率指针指示不准确和灵敏度低问题

2021/03/02 无线电

PHP strtotime函数详解

2009/12/18 PHP

PHP使用in_array函数检查数组中是否存在某个值

2015/03/25 PHP

动态表单验证的操作方法和TP框架里面的ajax表单验证

2017/07/19 PHP

prototype 1.5相关知识及他人笔记

2006/12/16 Javascript

什么是JavaScript

2009/08/13 Javascript

Javascript下IE与Firefox下的差异兼容写法总结

2010/06/18 Javascript

在JavaScript中处理字符串之fontcolor()方法的使用

2015/06/08 Javascript

js实现图片点击左右轮播

2015/07/08 Javascript

JavaScript实现打字效果的方法

2015/07/10 Javascript

jquery及js实现动态加载js文件的方法

2016/01/21 Javascript

jquery遍历json对象集合详解

2016/05/18 Javascript

JavaScript仿flash遮罩动画效果

2016/06/15 Javascript

jQuery代码实现实时获取时间

2017/01/29 Javascript

js事件委托和事件代理案例分享

2017/07/25 Javascript

微信小程序之蓝牙的链接

2017/09/26 Javascript

JavaScript中错误正确处理方式小结你用对了吗

2017/10/10 Javascript

JavaScript数组排序reverse()和sort()方法详解

2017/12/24 Javascript

JQuery省市联动效果实现过程详解

2020/05/08 jQuery

Python ValueError: invalid literal for int() with base 10 实用解决方法

2015/06/21 Python

基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)

2019/08/06 Python

python爬虫爬取幽默笑话网站

2019/10/24 Python

Python有参函数使用代码实例

2020/01/06 Python

python 解决print数组/矩阵无法完整输出的问题

2020/02/19 Python

如何用python处理excel表格

2020/06/09 Python

Python如何自动获取目标网站最新通知

2020/06/18 Python

python 使用cycle构造无限循环迭代器

2020/12/02 Python

后勤园长自我鉴定

2013/10/17 职场文书

婚礼主持词开场白

2014/03/13 职场文书

岗位竞聘书范文

2014/03/31 职场文书

2014年师德师风学习材料

2014/05/16 职场文书

城市创卫标语

2014/06/17 职场文书

2014小学语文教学工作总结

2014/12/17 职场文书

幼儿园五一劳动节活动总结

2015/02/09 职场文书

读《皮囊》有感：理解是对他人的最大的善举

2019/11/14 职场文书

vue router 动态路由清除方式

2022/05/25 Vue.js