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 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
javascript基本语法
May 31 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php explode函数实例代码
2012/02/27 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
在python中pandas的series合并方法
2018/11/12 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python可迭代对象操作示例
2019/05/07 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
项目建议书模板
2014/05/12 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python