`

页面图片随机浮动效果

 
阅读更多

本文参考自：http://zhidao.baidu.com/

自己做了一部分修改与总结，如下：

 

<html>

<head>

</head>

<body>

<div id="img" style="position: absolute;">

<a href="http://www.baidu.com"><img src="baidu.gif" border="0">

</a>

</div>

 

<SCRIPT LANGUAGE="JavaScript">

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

img.visibility = "visible";

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

}

show();

</script>

</body>

</html>

分享到：
| EA数据模型和PostgreSQL数据库之间导入导出 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript网页特效实例大全（8-12）

    实例238　图片在页面浮动　367 实例239　随机变化的网页背景　369 8.5　选择头像　370 实例240　在列表中选择图片　370 实例241　在弹出的新窗口中选择图片　372 8.6　在页面中播放图片　374 实例242　幻灯片式播放...

    html5漂浮的圆形动画背景特效.rar

    html5漂浮的圆形动画背景特效，打开网页后，网页背景显示随机数量、随机大小的圆形，填充颜色也不相同，这些圆形自由浮动，位置随机，最终形成一种很飘逸的背景动画效果，这些圆圈并非调用的图片，而是基于...

    JavaScript网页特效范例宝典源码

    实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 8.6 在页面中播放图片 374 实例242 幻灯片式播放图片 374 实例...

    八种华丽主页效果源码

    八种华丽主页效果源码，包括随机背景，华丽切换页面，双斜焦点图，关键字随鼠标旋转，鼠标滚动切换界面，气球浮动效果，鼠标悬停图片华丽展示等。

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    41:随图片快速翻动幻灯代码下载 42：两边漂浮和中间漂浮组合下载 43:随机显示广告图片代码下载 44:可以设定播放速度的代码下载 45:很不错的漂浮广告代码下载 46：图片变换特效广告代码下载 47:鼠标移动提示的广告...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    41:随图片快速翻动幻灯代码下载 42：两边漂浮和中间漂浮组合下载 43:随机显示广告图片代码下载 44:可以设定播放速度的代码下载 45:很不错的漂浮广告代码下载 46：图片变换特效广告代码下载 47:鼠标移动提示的广告...

    超实用的jQuery代码段

    7.23 页面加载时随机显示图片 7.24 按顺序淡入图片显示 7.25 检测图片的URL是否有效 7.26 强制显示图片的方法 7.27 实现可拖动显示的图片 第8章 jQuery实现AJAX 8.1 动态加载外部文件 8.2 动态加载外部网页 8.3 ...

    网站内容管理系统免费版本

    支持包括普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等10种广告效果；支持限制广告投放次数、点击次数、...

    基点广告系统(COAD) v1.0

    3、支持包括普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等10种广告效果； 4、支持限制广告投放次数、点击...

    基点广告系统 v1.0

    3、支持包括普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等10种广告效果； 4、支持限制广告投放次数、点击...

    COAD基点广告系统 v1.0.rar

    3、支持包括普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等10种广告效果； 4、支持限制广告投放次数、点击...

    青年人创业网 v3.6

    3、支持包括普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等10种广告效果； 4、支持限制广告投放次数、点击...

    web在线广告管理系统

    3、支持包括HTML代码显示、普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等11种广告效果； 4、支持限制广告...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    程序描述：本章将利用开源框架Prototype，讲述如何在网页中实现Windows关机效果，使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章...

    在线广告管理系统 v1.1 加强版

    3、支持包括HTML代码显示、普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等11种广告效果； 4、支持限制广告...

    创佳在线广告管理系统 v1.1 加强版.zip

    3、支持包括HTML代码显示、普通显示、满屏浮动显示、上下浮动显示-右、上下浮动显示-左、全屏幕渐隐消失、普通网页对话框、可移动透明对话框、打开新窗口、弹出新窗口、对联式广告等11种广告效果； 4、支持限制广告...

Magicbox
Global site tag (gtag.js) - Google Analytics