JS实现图片放大镜效果的方法
更新时间：2015年02月27日 10:38:39 作者：代码家园
这篇文章主要介绍了JS实现图片放大镜效果的方法,实例分析了magnifier.js插件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
设置文本框中焦点的位置的实现代码2009-11-11
今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了使用Javascript简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
Javascript实现快速排序（Quicksort）的算法详解
排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一，要想成为合格的程序员，就必须理解和掌握各种排序算法。2015-09-09
这篇文章主要介绍了原生JS实现的自动轮播图功能,结合实例形式详细分析了基于原生js实现轮播图的原理、操作步骤及操作注意事项,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了js charAt的使用方法,需要的朋友可以参考下2014-02-02
在JavaScript领域,URL 验证方面有了新消息！多年来,人们一直在讨论JavaScript没有一种简便的方法来验证 URL,现在有了一种新方法URL.canParse(),需要的朋友可以参考下2023-09-09
在WEB应用中，如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要。但不可忽视的是,多数情况下，对于数据的呈现方式也是十分重要的。2010-09-09
这篇文章主要介绍了webpack4 入门最简单的例子介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何编写一个 JavaScript 方法来检测浏览器是否支持特定的 CSS3 属性,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
最新评论