日期:2014-05-18 浏览次数:20221 次
以下是HTML网页特效代码,点击运行按钮可查看效果: 以下是程序代码<!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>zhou's html</title> </head> <body> 一共三个层,下面还有一个,把他拖上来 <div id="test" style='cursor:move;border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div></font> <font face=Verdana><div id="test1" style='cursor:move;border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span><br/><input type="text" style="width:80px" maxlength="9"/></div></font> <font face=Verdana><div id="test3" style="border:3px solid #C3D9FF;text-align:center;left:700px;top:100px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test31" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#C3D9FF;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来<br/><textarea style="width:130px;height:150px;">有了拖动层,做局部拖动很简单</textarea><br/><input type="button" value="submit it"/></div></font> <font face=Verdana><div id="test4" style="border:3px solid #CDEB8B;text-align:center;left:480px;top:150px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test41" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#CDEB8B;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来<br/><textarea style="width:130px;height:150px;">顺便练习下颜色搭配</textarea><br/><input type="button" value="submit it"/></div></font> <font face=Verdana><div id="test2" style='cursor:move;border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span><br/><input type="button" value="hit me"/></div></font> <font face=Verdana><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script type="text/javascript" charset="utf-8"> var $=function(id){return document.getElementById(id)}; Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;} function divDrag(){ var A,B,$cn; var zIndex=1; this.dragStart=function(e){ e=e||window.event; if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return; var pos=this.$pos; $cn=this.parent||this; if(document.defaultView){ _top=document.defaultView.getComputedStyle($cn,null).getPropertyValue("top"); _left=document.defaultView.getComputedStyle($cn,null).getPropertyValue("left");} else{ if($cn.currentStyle){_top=$cn.currentStyle["top"];_left=$cn.currentStyle["left"];}} pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left); pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top); if(!!A){ if(document.removeEventListener){