|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
接下来是布局思维方式，可能大家在接触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作为网页布局的标签，它可以很轻快的达到想要的效果，并且可以节约代码，我希望以后学这个标签的同学，要掌握它的每一个知识点，充分利用这个标签。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:37:03
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜