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

显示、隐藏密码

Jul 01 Javascript

学习JS面向对象成果借国庆发布个最新作品与大家交流

Oct 03 Javascript

JS操作时间 - UNIX时间戳的简单介绍(必看篇)

Aug 16 Javascript

浅谈Vue-cli 命令行工具分析

Nov 22 Javascript

微信、QQ、微博、Safari中使用js唤起App

Jan 24 Javascript

基于vue,vue-router, vuex及addRoutes进行权限控制问题

May 02 Javascript

vue项目动态设置页面title及是否缓存页面的问题

Nov 08 Javascript

express express-session的使用小结

Dec 12 Javascript

npm 常用命令详解(小结)

Jan 17 Javascript

JavaScript实现矩形块大小任意缩放

Aug 25 Javascript

vue操作dom元素的3种方法示例

Sep 20 Javascript

如何利用 JS 脚本实现网页全自动秒杀抢购功能

Oct 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

Fine Uploader文件上传组件应用介绍

2013/01/06 PHP

PHP中一些可以替代正则表达式函数的字符串操作函数

2014/11/17 PHP

PHP使用内置dir类实现目录遍历删除

2015/03/31 PHP

smarty中常用方法实例总结

2015/08/07 PHP

Session 失效的原因汇总及解决丢失办法

2015/09/30 PHP

深入浅析PHP7.0新特征（五大新特征）

2015/10/29 PHP

YiiFramework入门知识点总结(图文教程)

2015/12/28 PHP

php pdo连接数据库操作示例

2019/11/18 PHP

Javascript valueOf 使用方法

2008/12/28 Javascript

Mootools 1.2教程(21)——类（二）

2009/09/15 Javascript

JQuery扩展插件Validate 1 基本使用方法并打包下载

2011/09/05 Javascript

jquery dataview数据视图插件使用方法

2016/12/23 Javascript

vue的基本用法与常见指令

2017/08/15 Javascript

JavaScript+CSS相册特效实例代码

2017/09/07 Javascript

使用ngrok+express解决本地环境中微信接口调试问题

2018/02/26 Javascript

vue实例中data使用return包裹的方法

2018/08/27 Javascript

用node撸一个监测复联4开售短信提醒的实现代码

2019/04/10 Javascript

微信小程序云开发之使用云数据库

2019/05/17 Javascript

Javascript实现鼠标点击冒泡特效

2019/12/24 Javascript

浅析Python中的getattr(),setattr(),delattr(),hasattr()

2016/06/14 Python

Python实现的FTP通信客户端与服务器端功能示例

2018/03/28 Python

Python3实现的判断环形链表算法示例

2019/03/07 Python

python实现QQ空间自动点赞功能

2019/04/09 Python

python批量修改图片尺寸,并保存指定路径的实现方法

2019/07/04 Python

python 下 CMake 安装配置 OPENCV 4.1.1的方法

2019/09/30 Python

python统计字符的个数代码实例

2020/02/07 Python

Python使用urllib模块对URL网址中的中文编码与解码实例详解

2020/02/18 Python

深入浅出CSS3 background-clip,background-origin和border-image教程

2011/01/27 HTML / CSS

Stefania Mode英国：奢华设计师和时尚服装

2017/10/23 全球购物

自动化毕业生专业自荐书范文

2014/02/04 职场文书

大专应届毕业生求职信

2014/07/15 职场文书

事业单位个人查摆问题及整改措施

2014/10/28 职场文书

2014年移动公司工作总结

2014/12/08 职场文书

（开源）微信小程序+mqtt，esp8266温湿度读取

2021/04/02 Javascript

一条慢SQL语句引发的改造之路

2022/03/16 MySQL

Mysql中@和@@符号的详细使用指南

2022/06/05 MySQL