JavaScript之放大镜效果2

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

我们只需应用一个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="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL2NhaWR1cGluZ2Jsb2dzLzgyODcwMS90XzAzLmpwZw==.jpg"/></a>
<p>单击并且拖动盒子</p>
</td>
<td>自定义缩放窗口</td>
<td id="zoom1-big"></td>
</tr>
</table>
</body>
</html>

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

单击并且拖动盒子

 自定义缩放窗口  
时间： 2024-10-09 03:57:34

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

JavaScript之放大镜效果

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

javascript -- (js放大镜效果)

<style> * { margin: 0; padding: 0; } </style> <script type = "text/javascript" > var body = document.getElementsByTagName('body')[0]; var box1 = document.createElement('div'); var box2 = document.createElement('div'); var mask

原生javascript实现放大镜效果

html部分: <div class="main">  <div id="xiaotu" class="xiaotu">      <img src="http://zhangyan520.com/1.jpg"  />         <div id="yidong" class="yidong"></div>     <

javascript html 鼠标放大镜效果

1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #little_image { width: 400px

Javascript：实操---放大镜效果（2）

CSS部分<style type="text/css">/* body{    padding: 10px;} */#minWrap{    width: 350px;    height: 350px;    border: 1px solid #ccc;    position: relative;}    #slider{    height: 175px;    width: 175px;    background-color: yellow;    opacit

Javascript：实操---放大镜效果

CSS部分<style type="text/css">/* body{    padding: 10px;} */#minWrap{    width: 350px;    height: 350px;    border: 1px solid #ccc;    position: relative;}    #slider{    height: 175px;    width: 175px;    background-color: yellow;    opacit

javascript放大镜效果

JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTML+CSS 二.实现放大镜的功能js 下面来看代码,让你思路变清晰 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>放大镜</title> &l

前端JS电商放大镜效果

前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>26-电商放大镜</title> <style type="text/css"> *{ padding: 0; margin: 0; } #left{ padding: 0; margin: 0; w

淘宝-京东放大镜效果

效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜效果</title> 6 <style type="text/css"> 7 #div1 { 8 width: 180px; 9 height: 180px; 10 position: relative; 11 } 12 #div1