简单的网页浮动窗口

最新推荐文章于 2024-07-09 22:55:28 发布
最新推荐文章于 2024-07-09 22:55:28 发布
阅读量5.3k 收藏 1
点赞数
分类专栏： 网页 文章标签： function html up button div class

http://blog.sina.com.cn/s/blog_4b0b64d90100i83l.html

一个简单的浮动窗口的实现，功能有些单一：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">
<HTML>
 <HEAD>
  <style>
  .back1 {background-color:blue; width:"85px";height:"85px";color:blue;position:absolute;left:200;
  }
  </style>

 <script>

    var up=false;
    var left =false;
 var ty=5;
 var tx=5;
 var intervalProcess;
 function changediv()
 {
  var obj =document.getElementByIdx("div1");
  
  //alert(obj.currentStyle.left+""+obj.currentStyle.top);
  x =(parseInt(obj.currentStyle.left)||0);
  y =(parseInt(obj.currentStyle.top)||0);
  //alert(x+" "+y);
  if(up)
  { 
   if(y<0){ty=5;up=false;}
  }
  else
   {
  if(y>650){ty=-5;up=true;}
   }
   //alert(ty);
  if(left)
  { 
   if(x<0){tx=5;left=false;}
  }
  else{
  if(x>1050){tx=-5;left=true;}
  }
  //alert(obj.style.left);
  obj.style.top = y+ty;
    obj.style.left = x+tx;
  //alert("success");
 }
 function fly()
 {
   intervalProcess = setInterval("changediv()",50);
 }
 function stop()
 { 
  clearInterval(intervalProcess);
 }

</script>
 </HEAD>

 <BODY>
 <div class="back1"id="div1"οnmοuseοut="fly()"οnmοuseοver="stop()"><ahref="http://www.ujs.edu.cn"><img src="复件562.gif"></a></div>
<!--<input type= "button" onclick ="fly()" value=" 提交">-->

</BODY>
 
</HTML>


bytxl
关注
专栏目录
网页页面浮动窗口示例代码（JavaScript Code）
::: 移动互联网时代开发者 :::
01-16 3万+
      这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：            具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange,
网页浮动广告窗口
06-15
1. 右栏浮动广告 QUOTE: <script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 180px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='border-left:1px solid #2E6287;border-top:1px solid #2E6287;border-right:1px solid #2E6287;font-size:12px;color:#ffffff; border-bottom-color:#2E6287; border-bottom-width:1px'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE><table border='1' width='150' id='table1' height='500' bordercolor='#2E6287'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat0()",1);</script>.........
HTML5和css样式：浮动和清除浮动
最新发布
m0_64450406的博客
07-09 1018
所谓的标准流:就是标签按照规定好默认方式排列.1.块级元素会独占- -行 ,从上向下顺序排列。●常用元素:div、hr、 p、h1~h6、ul、 ol、 d|、 form、table2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。●常用元素:span、a、i、 em等以上都是标准流布局, 我们前面学习的就是标准流,标准流是最基本的布局方式。这三种布局方式都是用来摆放盒子的,舒摆放到合适位置,布局自然就完成了。
浮动窗口
我本无名的专栏
01-15 1347
            var xPos = document.body.clientWidth-20; var yPos = document.body.clientHeight/2; var step = 1; var delay = 5; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon
网页浮动窗口代码
疯狂才可以成就
05-18 979
网页浮动窗口代码 http://www.ccjk.com/blog/cn/magento%E5%AE%A2%E6%88%B7%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8contact-us-%E5%8F%91%E9%82%AE%E4%BB%B6/comment-page-1/
jQuery版简单易用的可拖动右下角浮动窗口.zip
07-11
本项目“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的交互式UI组件，适用于创建具有动态效果的网页元素，特别是那些需要在用户界面上悬浮并可自由拖动的窗口。 这个特效的核心功能在于提供一个...
jQuery之浮动窗口实现代码(两种方法)
10-28
浮动窗口在网页设计中常用于创建模态对话框或提示框，允许用户与页面上的特定内容交互而不离开当前上下文。以下是两种实现这种效果的方法。 **方法一：基本浮动窗口** 首先，我们看到HTML结构中包含两个主要元素：...
jQuery版简单易用的可拖动右下角浮动窗口特效
06-10
总的来说，"jQuery版简单易用的可拖动右下角浮动窗口特效"是一个实用的网页开发工具，它通过简单的代码实现了用户友好的交互功能。无论是用于在线客服系统还是其他类型的浮动提示，都能提升网站的专业性和用户满意度...
简单设计网页聊天窗口（html）
09-19
使用vscode简单设计了网页聊天页面，更多使用到div标签、浮动效果和相对布局relativ。本资源图片没有上传，大家可以自行去iconfont下载48大小的图标，并改好相对路径即可
客服QQ浮动窗口
12-22
以上就是一个简单的客服QQ浮动窗口的实现方式。在实际应用中，开发者可能需要根据具体需求进行更复杂的定制，例如添加动画效果、优化用户体验、适应不同设备的屏幕尺寸等。总的来说，理解和掌握JavaScript和CSS的...
页面悬浮窗口源码
11-11
页面悬浮窗口源码,完美运行不会出现悬浮窗口卡顿那种现象。直接运行test.html看效果！！
html 浮动窗口
06-10
日常老师留的html作业，不知道是否对大家有用，可用于html作业借鉴，学习。=供参考啊。嘻嘻(●'◡'●)
JavaScript实现上下浮动的窗口效果代码
10-23
主要介绍了JavaScript实现上下浮动的窗口效果代码,可实现自定义窗口在垂直方向上弹性移动的效果,代码备有完整的注释说明供读者参考学习,需要的朋友可以参考下
浮动窗口应用
11-25
浮动窗口的设计应用 看看你就知道 你说学校的
java页面左右浮动窗_JavaScript实现上下浮动的窗口效果代码
weixin_39771614的博客
03-02 287
本文实例讲述了JavaScript实现上下浮动的窗口效果代码。分享给大家供大家参考。具体如下：这里介绍使用JavaScript实现上下浮动的窗口，在垂直方向上漂浮，代码内的JS函数有超丰富的浮动层定义功能，像浮动层位置高度、初始化事件触发器、设定浮动层为可见，用style.left设定浮动层左边距、浮动层的运动速度等，还有更多的设置选项都能实现。运行效果截图如下：在线演示地址如下：具体代码如下：上...
黄聪：浮动窗口代码(带关闭按钮+全屏漂浮)
weixin_34279579的博客
05-18 246
代码： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;带关闭按钮的浮动窗口代码(全屏漂浮)&lt;/title&gt; &lt;/head&gt; &lt;style t
网页页面浮动窗口示例代码（JavaScript 代码）——按钮
bytxl的专栏
09-28 2661
http://www.jzxue.com/wangyesheji/wangyetexiao/201106/14-7814.html 这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：             具体使用方法，看下面的这个完整的页面代码应该就知道了。 html> http-equiv="Cont
浮动窗口代码
移动互联网后端服务架构
11-07 2262
网页特效|Linkweb.cn/Js|---页面内的超级酷浮动窗口 a:visited{text-decoration:none;color:slategray;} a:hover{text-decoration:underline;color:slategray;} a:link{text-decoration:none;color:slategray;} -->
实现网页浮动广告的JavaScript代码示例
本文档主要介绍了如何在网页页面中添加浮动广告，通过简单的JavaScript代码实现广告的动态移动和隐藏。首先，我们来看一段示例代码： 1. 首先，一个名为`hidead()`的JavaScript函数被定义，它用于隐藏ID为"ad"的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值