`
glorytao
  • 浏览: 28421 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JavaScript悬浮窗口

阅读更多
<%-- 悬浮窗口开始 --%>
<DIV id=img style="Z-INDEX: 1000; POSITION: absolute"
onMouseOver="stop()" onMouseOut="www_helpor_net() ">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD align="right">
<A style="CURSOR: hand" onclick=closepiao()><b>关闭</b> </A>
</TD>
</TR>
<TR>
<TD id='obja'>
<a href="http://www.sohu.com/"> <IMG id=obj src="images/ad.jpg" border=0></a>
</TD>
</TR>
</TABLE>
</DIV>
<%-- 悬浮窗口结束 --%>

<%-- 悬浮窗口开始 --%>
<SCRIPT language=JavaScript>

var xPos = 20;
var yPos = document.body.clientHeight;
var step = 2;
var delay = 60;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function closepiao()
{
document.all("img").style.display = "none";
}

function stop()
{
    clearInterval(interval);
}

function www_helpor_net() {
//closepiao();//注释后显示飘
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
www_helpor_net();
</SCRIPT>
<%-- 悬浮窗口结束 --%>
分享到:
评论

相关推荐

    javascript悬浮窗口控件

    JavaScript悬浮窗口控件是一种网页开发技术,主要用于在用户浏览页面时提供始终可见的交互式窗口。这种窗口可以是通知、菜单、广告或者其他任何需要始终保持在屏幕前层的元素。通过JavaScript,开发者能够创建动态的...

    JavaScript 悬浮窗口实现代码

    ### JavaScript悬浮窗口实现知识点 #### 一、概述 在网页设计与开发中,为了提高用户体验,经常需要在页面上添加一些特殊效果,比如悬浮窗口。本文将详细介绍如何使用JavaScript实现一个简单的悬浮窗口功能。该...

    页面悬浮窗口源码

    总结来说,页面悬浮窗口源码主要涉及HTML结构创建、CSS定位及样式设计,以及可能的JavaScript优化。通过分析并理解这些代码,开发者可以学习如何在自己的网站上实现类似的功能,提升用户体验。在实际项目中,悬浮...

    红包悬浮窗口.rar

    红包悬浮窗口是一个JavaScript插件,它的主要功能是在用户浏览网页时提供一种便捷的方式来接收和处理红包。在现代的网络社交环境中,特别是在中国的互联网生态里,红包已经成为了一种常见的互动方式,尤其是在微信、...

    悬浮窗口及透明化

    在IT领域,悬浮窗口和透明化是两种常见但极具创新性的设计技术,它们极大地提升了用户界面的交互体验。本文将详细解析这两种技术及其在实际应用中的实现方式。 首先,我们来了解一下“悬浮窗口”。悬浮窗口,...

    js左侧悬浮窗口,随滚动条滚动

    在这个特定的场景中,"js左侧悬浮窗口,随滚动条滚动" 是一个常见的网页设计功能,它指的是在网页浏览时,一个窗口或侧边栏会固定在屏幕的左侧,并随着用户滚动页面而上下移动,保持始终可见。 实现这样的效果,...

    javascript实现的固定位置悬浮窗口实例

    在本篇文章中,我们将探讨使用JavaScript如何实现固定位置的悬浮窗口。以下内容将详细讲解其技术实现方法和技巧。 首先,要实现一个固定位置的悬浮窗口,需要掌握CSS定位技术,特别是绝对定位(position: absolute;...

    悬浮窗口点击checkbox选中给text文本.zip

    1. **获取元素**:使用JavaScript获取悬浮窗口中的所有复选框和相关的文本元素。 2. **添加事件监听器**:为每个复选框添加`click`事件监听器,当用户点击时触发回调函数。 3. **处理数据**:在回调函数中,收集选中...

    jquery仿360猜你喜欢隐藏悬浮窗口特效

    本项目"jquery仿360猜你喜欢隐藏悬浮窗口特效"正是利用jQuery的强大功能,实现了一个类似360浏览器中“猜你喜欢”功能的交互式悬浮窗口。 首先,我们需要理解jQuery库的基本概念。jQuery是一个轻量级的JavaScript库...

    jQuery侧边悬浮窗口折叠显示隐藏文字列表效果代码

    在本文中,我们将深入探讨如何使用jQuery实现一个侧边悬浮窗口的折叠显示和隐藏文字列表效果。这个功能常用于网站的导航菜单、帮助文档或侧边栏信息展示,以节省空间并提供良好的用户体验。 首先,我们需要理解...

    javascript左侧悬浮二级菜单

    在本案例中,我们讨论的主题是“JavaScript左侧悬浮二级菜单”,这是一种常见的网页导航设计,能够提供用户友好的浏览体验。这样的菜单通常出现在网页的左侧,始终保持可见,即使用户滚动页面,菜单也会悬浮在屏幕的...

    JS控制弹出悬浮窗口(一览画面)的实例代码

    HTML负责构建悬浮窗口的结构,而JavaScript则负责控制悬浮窗口的显示和位置计算。 #### 页面结构与代码实现 1. **页面上的弹出层代码**:这部分代码通常会用到模板引擎,如JSP的标签语法,来动态地生成悬浮窗口的...

    网页悬浮客服窗口

    而JavaScript则用于处理悬浮窗口的行为,如显示、隐藏、关闭以及与QQ客服的连接逻辑。 使用方法非常简单,只需将`代码.txt`中的代码复制到你的网页源文件的body部分。在代码中找到代表QQ号码的部分,并将其替换为你...

    javascript悬浮广告

    JavaScript悬浮广告是一种常见的网页交互设计,它允许广告在用户滚动页面时始终保持在屏幕的特定位置,从而提高广告的可见性和点击率。这种技术通常利用JavaScript的动态定位和事件监听功能来实现。下面将详细介绍...

    js实现悬浮可拖动登录窗口(demo)

    悬浮窗口通常是通过CSS样式来完成的,主要涉及到`position`属性。设置`position`为`fixed`可以使元素相对于浏览器窗口保持固定位置,即使在滚动页面时也会始终保持在屏幕的某个位置。另外,还需要设置适当的`top`、`...

    使用BootStrap实现悬浮窗口的效果

    首先,要实现悬浮窗口,我们需要确保在HTML文件中引入了Bootstrap的相关CSS和JavaScript库。这通常包括`bootstrap.css`和`bootstrap.min.js`,以及jQuery库,因为Bootstrap的许多功能依赖于jQuery。在示例代码中,...

    jQuery实现页面下拉100像素出现悬浮窗口的方法

    在网页设计中,有时我们需要创建一种...通过调整CSS样式和JavaScript代码,你可以自定义悬浮窗口的外观和行为,以适应你的网站设计需求。学习和理解这一技术有助于提升网页的用户体验,使你的网站更加互动和引人注目。

    右侧跟随悬浮固定窗口.zip

    3. **JavaScript**:为了实现“跟随滚动”的效果,我们需要监听窗口的滚动事件,并根据滚动位置动态调整悬浮窗口的`top`值。这可以通过JavaScript来完成,例如使用jQuery库: ```javascript $(window).scroll...

Global site tag (gtag.js) - Google Analytics