巧制可全屏拖动的图片

竟然注销我帐号

竟然注销我帐号

2016-02-19 18:41

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的巧制可全屏拖动的图片懂设计的网友们快点来了解吧!

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

制作步骤:

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

二、建一个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="/Files/BeyondPic/oldjcwimg/2005-11/15/05111512221550167.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

好了,保存看看效果吧!

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

巧制可全屏拖动的图片

Web开发
巧制可全屏拖动的图片

利用DW的DragLayer轻松实现可拖动层

Web开发
利用DW的DragLayer轻松实现可拖动层

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

可拖动的无标题栏窗体

电脑网络
可拖动的无标题栏窗体

在网页中显示可拖动月历

Web开发
在网页中显示可拖动月历

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Illustrator 巧制透明按钮

Illustrator
Illustrator 巧制透明按钮

经典的带阴影的可拖动的浮动层

Web开发
经典的带阴影的可拖动的浮动层

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用Dreamweaver制作网页中关于空格的探讨

用Dreamweaver制作网页中关于空格的探讨

使用MVC模型的几个常见误区

使用MVC模型的几个常见误区
下拉加载更多内容 ↓