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="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的更多相关文章
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 【JavaScript】放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript写放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- JavaScript图形实例:图形放大镜效果
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...
- javascript html 鼠标放大镜效果
1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示: <!DOCTYPE html> < ...
随机推荐
- Apache-系统-网络部分配置
参考了很多东西,但有些理解可能会有错误的地方,希望看到错误的地方可以即使纠正. 参考的内容. http://netsecurity.51cto.com/art/200608/30428.htm htt ...
- Java组待开发的任务
周枫: A.将digital,xylinkWeb修改为支持oracle版,并完成测试工作.准备好实施安装的步骤和每步需要的文件,比如发布的项目,tomcat,jdk,memcached,数据库等,在单 ...
- C++ Code_HotKey
Code::使用HotKeyCtrl定义一个系统热键 // 关联HotKeyCtrl控件变量 m_HotKey1 BEGIN_MESSAGE_MAP(CXyzDlg, CD ...
- 模块化JavaScript设计模式(一)
在可扩展JavaScript的世界里,假设我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成. 在可能的情况下.通过一处依赖性.松耦合 ...
- linux下网络编程常见问题
网络程序异常退出无core文件产生 这种情况发生在一边连接端已经关闭,但是另外一边还在对连接句柄做send操作,这样做send操作的进程会收到SIGPIPE信号,默认行为是直接退出且不会产生core. ...
- LeetCode39 Combination Sum
题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C ...
- Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)
来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...
- Burn the Linked Camp(bellman 差分约束系统)
Burn the Linked Camp Time Limit: 2 Seconds Memory Limit: 65536 KB It is well known that, in the ...
- Java SE ---流程控制语句
java的控制流程有三种: 一,顺序流程 自上而下,按照代码的先后顺序执行 二,分支流程 1,if/else语句 2,swit ...
- 如何写出好的Java代码?
1. 优雅需要付出代价.从短期利益来看,对某个问题提出优雅的解决方法,似乎可能花你更多的时间.但当它终于能够正确执行并可轻易套用于新案例中,不需要花上数以时计,甚至以天计或以月计的辛苦代价时,你会看得 ...