js控制图片的缩放代码示例

下面的代码给出一个简单的js检测鼠标点击事件来动态放大图片的功能，这个功能在亚马逊，京东等电商网站很实用。

<!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">
<title>图片动态放大测试</title>
</head>
<body><div class="thumb"><div id="demo" style="overflow:hidden;width:220px;text-align:center;padding:10px"><img src='http://10.10.110.149/img/2014102210163154565.jpg' border=0></div></div><div id="enlarge_images"></div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");for(i=0; i<gg.length; i++){var ts = gg[i];ts.onmousemove = function(event){event = event || window.event;ei.style.display = "block";ei.innerHTML = '<img src="' + this.src + '" />';ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";}ts.onmouseout = function(){ei.innerHTML = "";ei.style.display = "none";}ts.onclick = function(){window.open( this.src );}}
</script>
</body>
</html>

demo的前提是，先要在网站根目录的img文件夹下面事先存放一个图片文件。下面是效果截图

js控制图片的缩放代码示例相关推荐

html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览源码下载实现的代码: <div id= ...
android 手势事件重写,Android实现通过手势控制图片大小缩放的方法
本文实例讲述了Android实现通过手势控制图片大小缩放的方法.分享给大家供大家参考,具体如下: 该程序实现的是通过手势来缩放图片,从左向右挥动图片时图片被放大,从右向左挥动图片时图片被缩小,挥动速度 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
JS控制图片滚动的效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang=it dir= ...
html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例
本篇文章小编给大家分享一下html2canvas生成清晰的图片实现打印代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 基本用法处理模糊问题细节问题-压缩base ...
php 图片等比缩小图片,php 图片比例缩放代码
利用了getimagesize来获取原图片的大小然后再x0.5就是把图片/5. array getimagesize ( string $filename [, array &$imagein ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
JS控制图片显示的大小（图片等比例缩放）
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

js控制图片的缩放代码示例

js控制图片的缩放代码示例相关推荐

最新文章

热门文章