您好,欢迎来到素彩网!

巧制可全屏拖动的照片

来源:sc115.com | 332 次浏览 | 2011-06-29

标签: Dreamweaver 巧制可全屏拖动的图片 Dreamweaver综合教程

我们可以用鼠标把Dreamweaver的层在页面内拖动,但要全屏拖动就困难了,下面是一种实现的方法:

制作步骤:

一、准备图片,取名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="http://www.vipcn.com/InfoView/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>

好了,保存看看效果吧!




搜索: Dreamweaver 巧制可全屏拖动的图片 Dreamweaver综合教程 

最热-Dreamweaver综合教程

打造弹出窗口常用技巧九则

网页设计进阶:巧用记事本编辑网页网页设计进阶:巧用记事本编辑

高手进阶:网页设计中的文字运用

网站构成的基本元素—网页布局

让IIS Web服务器不再拒认ASP网页

在网页中显示可拖动月历

用Dreamweaver MX轻松操作表格

用Dreamweaver实现飘浮光球特效

Dreamweaver 4.0使用技巧集锦

用Dreamweaver MX巧妙格式化表格

轻松处理Dreamweaver段落缩进

DreamweaverMX Ultradev探索:技巧荟萃

用Dreamweaver 4.0编制会议通知

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材