DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 巧制可全屏拖動的圖片
巧制可全屏拖動的圖片
編輯:Dreamweaver相關      日期:2016/12/27 11:07:08
  我們可以用鼠標把Dreamweaver的層在頁面內拖動,但要全屏拖動就困難了,下面是一種實現的方法:

制作步驟:

一、准備圖片,取名替換webdesign.chinaitlab.com/dwsl/back.jpg,如下:

二、建一個htm文件取名drag.htm,並寫入下列代碼:

< HTML>
  < head>
  < title>可拖動的圖片< /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="替換webdesign.chinaitlab.com/dwsl/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>

好了,保存看看效果吧!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved