网奇CMS - 成熟易用的.NET网站管理系统
旧版官网 | 客服论坛 | 彩虹服务 | 加入收藏 | TEL:400-600-2788

全屏拖动图片的实现方法

  
  制作步骤:


  一、准备图片,取名back.jpg,


  二、建一个htm文件取名drag.htm,并写入下列代码:


  < html>


  < head>


  < title>CMS模板< /title>


  < meta http-equiv="Content-Type" content="text/html; charset=gb2312">


  < /head>


  < body bgcolor="#FFFFFF" text="#000000" scroll=no topmargin=0 leftmargin=0 onmousedown="x=event.x;y=event.y;setCapture()" onmouseup="releaseCapture()" onmousemove="if(event.button==1)top.moveTo(screenLeft+event.x-x,screenTop+event.y-y)" ondblclick="self.close()">


  < img src="back.jpg" width="120" height="120" style="cursor:hand;border:3 gold ridge">


  < /body>


  < /html>


  drag.htm便是一个可以被拖动的页面。


  三、在其他页面中调用drag.htm,加上下面的代码:


  < head>


  < title>可全屏拖动的图片< /title>


  < meta http-equiv="Content-Type" content="text/html; charset=gb2312">


  < script language="javascript">


  function drag(){


  var win;


  win=window.open("drag.htm","","fullscreen");


  win.moveTo(200,200);


  win.resizeTo(126,126);


  win.focus();


  }


  < /script>


  < /head>


  并用链接打开:


  < a href="javascript:drag()">点击这里< /a>

0 顶一下 打印 阅读:
界面制作中最有帮助的文章