今天来学习JS网页图片检察器－可把持图片缩小减少挪动｜兼容IE、FF
接下来是布局思维方式，可能大家在接触DIV+CSS的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。[*]
[*]
这是一个网上对照经常使用的JS网页图片检察器，可把持图片缩小、减少、复原、挪动地位、拖动等操纵，而且兼容IE扫瞄器和FF火狐扫瞄器，能够用在图片网站、舆图网站等
<html><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>JS网页图片检察器－可把持图片缩小减少复原挪动效果</title><METAHTTP-EQUIV="imagetoolbar"CONTENT="no"><styletype="text/css">body{font-family:"Verdana","Arial","Helvetica","sans-serif";font-size:12px;line-height:180%;}td{font-size:12px;line-height:150%;}</style><SCRIPTlanguage=JavaScript>drag=0move=0//拖拽工具//拜见：http://blog.sina.com.cn/u/4702ecbe010007pevarie=document.all;varnn6=document.getElementById&&!document.all;varisdrag=false;vary,x;varoDragObj;functionmoveMouse(e){if(isdrag){oDragObj.style.top=(nn6?nTY+e.clientY-y:nTY+event.clientY-y)+"px";oDragObj.style.left=(nn6?nTX+e.clientX-x:nTX+event.clientX-x)+"px";returnfalse;}}functioninitDrag(e){varoDragHandle=nn6?e.target:event.srcElement;vartopElement="HTML";while(oDragHandle.tagName!=topElement&&oDragHandle.className!="dragAble"){oDragHandle=nn6?oDragHandle.parentNode:oDragHandle.parentElement;}if(oDragHandle.className=="dragAble"){isdrag=true;oDragObj=oDragHandle;nTY=parseInt(oDragObj.style.top+0);y=nn6?e.clientY:event.clientY;nTX=parseInt(oDragObj.style.left+0);x=nn6?e.clientX:event.clientX;document.onmousemove=moveMouse;returnfalse;}}document.onmousedown=initDrag;document.onmouseup=newFunction("isdrag=false");functionclickMove(s){if(s=="up"){dragObj.style.top=parseInt(dragObj.style.top)+100;}elseif(s=="down"){dragObj.style.top=parseInt(dragObj.style.top)-100;}elseif(s=="left"){dragObj.style.left=parseInt(dragObj.style.left)+100;}elseif(s=="right"){dragObj.style.left=parseInt(dragObj.style.left)-100;}}functionsmallit(){varheight1=images1.height;varwidth1=images1.width;images1.height=height1/1.2;images1.width=width1/1.2;}functionbigit(){varheight1=images1.height;varwidth1=images1.width;images1.height=height1*1.2;images1.width=width1*1.2;}functionrealsize(){images1.height=images2.height;images1.width=images2.width;block1.style.left=0;block1.style.top=0;}functionfeatsize(){varwidth1=images2.width;varheight1=images2.height;varwidth2=360;varheight2=200;varh=height1/height2;varw=width1/width2;if(height1<height2&&width1<width2){images1.height=height1;images1.width=width1;}else{if(h>w){images1.height=height2;images1.width=width1*height2/height1;}else{images1.width=width2;images1.height=height1*width2/width1;}}block1.style.left=0;block1.style.top=0;}</SCRIPT><scriptlanguage="JavaScript"type="text/JavaScript"><!--functionMM_reloadPage(init){//reloadsthewindowifNav4resizedif(init==true)with(navigator){if((appName=="Netscape")&&(parseInt(appVersion)==4)){document.MM_pgW=innerWidth;document.MM_pgH=innerHeight;onresize=MM_reloadPage;}}elseif(innerWidth!=document.MM_pgW||innerHeight!=document.MM_pgH)location.reload();}MM_reloadPage(true);//--></script><styletype="text/css"><!--td,a{font-size:12px;color:#000000}#Layer1{position:absolute;z-index:100;top:10px;}#Layer2{position:absolute;z-index:1;}--></style></head><bodyleftmargin="0"topmargin="0"marginwidth="0"marginheight="0"onLoad="init();"oncontextmenu="returnfalse"ondragstart="returnfalse"onselectstart="returnfalse"onselect="document.selection.empty()"oncopy="document.selection.empty()"onbeforecopy="returnfalse"onmouseup="document.selection.empty()"style="overflow-y:hidden;overflow-x:hidden;"><divid="Layer1"><tableborder="0"cellspacing="2"cellpadding="0"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></div><divid=block1style=z-index:10;height:0;left:0px;position:absolute;top:0px;width:0class="dragAble"></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
任何语言都有它的优越性，Div作为网页布局的标签，它可以很轻快的达到想要的效果，并且可以节约代码，我希望以后学这个标签的同学，要掌握它的每一个知识点，充分利用这个标签。 由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 学Dreamweaver技术的过程其实是一个增加信心的过程。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
页:
[1]