javascript实现浮动窗口

javascript效果:
  一个不停浮动的图片,遇到浏览器的任何一边,就会改变浮动的方向,如同一个弹球一样。这种效果主要用于网站广告,代码如下,将以下代码保存为htm文件就可以运行了。

<div id="img" style="position:absolute; left:35px; top:556px; width:120; 

height:172">

<img src="injob.jpg" width=100 height=100></img>

</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

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 start() {

img.visibility = "visible";

interval = setInterval('changePos()', delay);

}

start();

// End -->

</script>

时间: 2024-07-30 06:00:18

javascript实现浮动窗口的相关文章

javascript 右下角浮动窗口代码

javascript 右下角浮动窗口代码 var winWidth = 0; var winHeight = 0; var offsetBody=0; function findDimensions(){   if (window.innerWidth)      winWidth = window.innerWidth;   else if ((document.body) && (document.body.clientWidth))      winWidth = document.

求高手点拨:“向Html语言写成的JSP页面中添加可控视频浮动窗口”的JavaScript代码。

问题描述 高手,您好:我是一个学习软件的学生,近日碰到了一个挑战:要在规定的时间里,将一个含有"浮动视频窗口的","使用Html语言写成的JSP页面"的任务.十万火急!!要是再重新将JavaScript语言进行学习的话,时间恐怕来不及了.这个时候,我想到了我的大学导师平台:CSDN.高手,我希望能够向我写成的Html语言的页面的右下角处,添加一个"浮动视频窗口",让我的页面具备:先向访问我的网站的用户的客户端传输"页面内容",

jQuery实现弹出带遮罩层的居中浮动窗口效果_jquery

本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none

jQuery实现底部浮动窗口效果_jquery

本文实例讲述了jQuery实现底部浮动窗口效果.分享给大家供大家参考,具体如下: <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <style type="text/css"> #foot_tel { width:100%;height:43px; background:url(styles/js/swt/tel_bj_20

JS简单实现浮动窗口效果示例_javascript技巧

本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解_javascript技巧

本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

求高手点拨“网页浮动窗口源代码修改细则”。

问题描述 高手,您好:我是一名学习软件工程的学生,碰到了紧急的事情,希望高手能够帮助我,点拨我.如果有下面一段"制作网站右下角浮动窗口"的,JS代码,如何改动,能够让这段代码所制作的浮动窗口具备:"让向客户端传输的网页,具备:"先传输文字,后传输本窗口中的视频文件"的功能?",并且,希望高手点拨:下面的这段JS代码,哪一部分,或者说添加了哪一部分,能够让我的页面,选择我所设置好的"视频文件地址",让我所选中的视频文件,在我的网

jQuery之浮动窗口实现代码(两种方法)_jquery

第一种方法:预览: Html代码 复制代码 代码如下: <html> <head> <title>浮动窗口</title> <link type="text/css" rel="stylesheet" href="css/overflow.css" /> <script type="text/javascript" src="js/jquery.js&

JS实现简单易用的手机端浮动窗口显示效果_javascript技巧

本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果.分享给大家供大家参考,具体如下: html: <style type="text/css"> .fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; } .fdOnline{ background:url(index/images/o