<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312;" />
<title>拖拽,按等比例放大,缩小,任意修改图片大小</title>
<meta name="Keywords" content="图片拖拽,图片扥等比缩放" />
<meta name="Description" content="在页面上实现图片拖拽并可以随意调整图片大小。 但如果按住Ctrl键之后,当再调整图片大小的时候需要按照比例进行调整。" />
</head>
<body>
<style type="text/css">
.chr{cursor:e-resize;}
.cvr{cursor:s-resize;}
.cner{cursor:ne-resize;}
.cnwr{cursor:nw-resize;}
.cdft{cursor:default;}
.cmove{cursor:move;}
</style>
<input type="button" onclick="javascript:makeWord();" value="导出页面到Word">
<img src="f:\\xnh.jpg" alt="PS梦幻效果" style="width:300px;position:absolute;left:100;top:100px;" id="imgsrc" class="cdft" />
<script type="text/javascript">
var img=document.getElementById('imgsrc');
var span=10;
var isDrag=null;
var isIE=!!document.all;
var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
var percent=img.offsetHeight/img.offsetWidth;
function mouseMove(e){
e=e||event;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;
if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';
else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';
else if(x<=span||x>=imgW-span)img.className='chr';
else if(y<=span||y>=imgH-span)img.className='cvr';
else img.className='cdft';
}
function mouseDown(e){
e=e||event;
ex=e.clientX;//保存当前鼠标X轴的坐标
ey=e.clientY;//保存当前鼠标y轴的坐标
ox=parseInt(img.style.left);
oy=parseFloat(img.style.top);
if(img.className=='cdft'){
isDrag=true;
img.className='cmove';
}
else{
isDrag=false;
oh=img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
ow=img.offsetWidth;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标
chrPosX=x<=span;
chrPosY=y<=span;
if(e.ctrlKey){//事件属性可返回一个布尔值,指示当事件发生时,Ctrl 键是否被按下并保持住
ow=oh/percent;//根据比例计算出宽度
img.style.width=ow;//更新图片宽度
}
}
if(isIE)img.setCapture();
document.onmousemove=mouseDownAndMove;
img.onmousemove=null;
return false;
}
function mouseDownAndMove(e){
e=e||event;
if(isDrag===true){
img.style.left=ox+e.clientX-ex+'px';
img.style.top=oy+e.clientY-ey+'px';
}
else if(isDrag===false){
var x=e.clientX-ex,y=e.clientY-ey;
switch(img.className){
case 'chr':
x=chrPosX?-x:x;
y=e.ctrlKey?percent*x+oh:oh;
img.style.width=ow+x+'px';
img.style.height=y+'px';
if(chrPosX)img.style.left=ox-x+'px';
break;
case 'cvr':
y=chrPosY?-y:y;
x=e.ctrlKey?y/percent+ow:ow;
img.style.width=x+'px';
img.style.height=oh+y+'px';
if(chrPosY)img.style.top=oy-y+'px';
break;
case 'cnwr':
case 'cner':
x=chrPosX?-x:x;
if(e.ctrlKey){//按宽等比
y=e.ctrlKey?percent*x+oh:oh;
img.style.width=ow+x+'px';
img.style.height=y+'px';
if(chrPosX)img.style.left=ox-x+'px';
}
else{
y=chrPosY?-y:y;
img.style.width=ow+x+'px';
img.style.height=oh+y+'px';
if(chrPosX)img.style.left=ox-x+'px';
if(chrPosY)img.style.top=oy-y+'px';
}
break;
}
}
}
img.onmousemove=mouseMove;
img.onmousedown=mouseDown;
document.onmouseup=function(){
if(typeof isDrag=="boolean"){
if(isIE)img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象
}
isDrag=null;
img.className='cdft';
img.onmousemove=mouseMove;
document.onmousemove=null;
}
function makeWord()
{
var word = new ActiveXObject("Word.Application");
// var doc = word .documents.open("c:\test.doc"); //此处为打开已有的模版
var doc = word.Documents.Add("",0,1);//不打开模版直接加入内容
//var Range=doc.Range();
//var sel = document.body.createTextRange();
//sel.moveToElementText(img);
//sel.select();
//sel.execCommand("Copy");
//Range.Paste();
word.Application.Visible = true;
var pricture = word.Application.Selection.InlineShapes.AddPicture(img.src);
pricture.width=img.style.width.replace('px','');
pricture.height=img.style.height.replace('px','');
doc.saveAs("f:\\ba.doc"); //存放到指定的位置注意路径一定要是“\\”不然会报错
}
</script>
</body>
</html>
分享到:
相关推荐
js放大缩小拖拽图片(兼容IE、火狐)的js脚本实例
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....
根据网上找的代码修改后的成品,实现了图片的方法,缩小,旋转,拖动查看等功能
WPF 鼠标拖动图片放大缩小 添加图片->然后选择添加的图片->鼠标进行放大缩小->属性面板值变更
打开html可直接查看例子,例子中图片url写死的,是一个网络图片,如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
js实现图片在div内滚轮放大缩小拖动,有滚动条,双击回原状,无插件,赠送网上搜罗的其他的一些图片放大缩小文件,在每个压缩包是一个,打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里,记事本打开...
js百度地图放大缩小拖拽查看效果 js百度地图放大缩小拖拽查看效果
1、图片在指定区域显示、采用刷图方式、可以随指针拖动、放大 缩小、 2、文件路径是通过参数传递的 3、程序中SHOW按钮显示图片 BT1 BT2 没有很好的代码效果 测试使用 4、Imageshow.h和CPP 可以再其他工程中直接使用...
Tomcat部署后移动端访问测试(个人上传最终版本?) 使用hammer.js+cropper.js 实现手势同时操作,即旋转时也可以拖拽放大 添加截取图片功能,可设置截图宽高比例,可设置截取的图片宽高值 添加复位功能
基于vue 图片拖拽放大缩小查看npm包
js实现地图效果,实现地图拖拽、大小缩放,地图放大,地图缩小,地图拖动
JS鼠标为中心放大缩小旋转(实现以鼠标为中心的滚动无限放大缩小)拖动旋转
源码块
WPF实现图片放大,缩小,拖动示例
原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码 原生js支持拖动放大缩小图片截图代码
JS查看图片放大缩小拖动插件 ,可以怼图片进行放大查看,缩小查看,以及在范围内拖动
C#联合halcon,使用halcon控件实现通过鼠标放大缩小图片,拖拽图片。
图片随意拖动放大缩小效果 javascript 代码,效果很好,有点类似于淘宝的效果
5.保证无毒 1.简单,方便,实用 3.实例可以自行改用 1.如有非法,本人无法律责任! 8.更多作品,查找标签“朱建强”7.... 4.如需联系我请看左边数字!1.如不知代表何物,那就放弃计算机吧! 0....CSDN老板不让我上传联系方式。
基于JQuery的图片放大缩小功能,以及拖动等相关功能。