在放大图片效果的同时，我们怎么原图和放大窗体增加间隔呢？

我们只需应用一个table就行了：

源码上：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/MagicZoom.css" type="text/css" media="screen" />
<script src="http://files.cnblogs.com/files/caidupingblogs/mz-packed.js" type="text/javascript"></script>
<style>
	img {
		border-width: 0px;
	}
	body, p {
		font-size: 12px;
    }
</style>
<title>JavaScript之放大镜效果</title>
</head>
<body>

<table border="0">
<tr>
<td>
<a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_03.jpg" id="zoom1" rel="drag-mode: true; always-show-zoom: true; zoom-position: custom" title="MagicZoom: Super bike" class="MagicZoom"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_03.jpg"/></a>
<p>单击并且拖动盒子</p>
</td>
<td>自定义缩放窗口</td>
<td id="zoom1-big"></td>
</tr>
</table>
</body>
</html>

鼠标单击左键移动查看效果：

单击并且拖动盒子

 自定义缩放窗口  

JavaScript之放大镜效果2的更多相关文章

  1. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  2. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  3. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  6. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

随机推荐

  1. Sql中的union和union all的讲解

    SQL UNION 和 UNION ALL操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相 ...

  2. Mysql中使用树的设计

    原来一直使用id与 parent_id结合的办法设计树,最近发现有些问题: 1.查询此结点下所有子结点的需求. 2.查询此结点上所有父结点的需求. 这些需求在oracle和sql server中可以使 ...

  3. 【M28】智能指针

    1.什么是智能指针? 所谓智能指针就是,看起来,用起来,感觉起来都像原始指针,但是提供了更多功能. 2.使用智能指针取代原始指针,可以获得更多的控制权.如下: a.在构造和析构的时候,可以做一些事. ...

  4. Codeforces Round #260 (Div. 1) C. Civilization 并查集，直径

    C. Civilization Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/probl ...

  5. 使用 Team Foundation 版本控制命令

    使用 Team Foundation 版本控制命令 Visual Studio 2013   其他版本 Visual Studio 2010 Visual Studio 2008 Visual Stu ...

  6. MySQL 5.7 深度解析: 临时表空间

    http://www.actionsky.com/docs/archives/159  2016年1月8日  杨涛涛 先来说说临时表的概念. 临时表顾名思义,就是临时的,用完销毁掉的表. 数据既可以保 ...

  7. FileSystemWatcher触发多次Change事件的解决办法 .

    最近要用到FileSystemWatcher来监控某个目录中的文件是否发生改变,如果改变就执行相应的操作.但在开发过程中,发现FileSystemWatcher在文件创建或修改后,会触发多个Creat ...

  8. [Java,JavaEE] 最常用的Java库一览

    引用自:http://www.importnew.com/7530.html 本文由 ImportNew - 邢 敏 翻译自 programcreek.欢迎加入Java小组.转载请参见文章末尾的要求. ...

  9. 140个google面试题

    某猎头收集了140多个Google的面试题,主要是下面这些职位的. Product Marketing Manager Product Manager Software Engineer Softwa ...

  10. 精通CSS高级Web标准解决方案（1-2 层叠与特殊性）

     层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...