`

页面图片随机浮动效果

 
阅读更多

本文参考自：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（JS）脚本实现，因为HTML和CSS本身虽然能实现基本的布局和定位，...

    jquery商城网站右下角浮动窗口商品随机展示效果代码

    "jquery商城网站右下角浮动窗口商品随机展示效果代码"是一种实现这一目标的技术手段。这个功能通常被称为“悬浮广告”或“飘窗”，它可以在用户浏览网页时，始终保持在屏幕的右下角，展示随机选择的商品信息，以吸引...

    js特效--图片浮动

    本教程将深入探讨如何使用JS创建图片浮动效果。 首先，我们需要了解HTML结构。在`testIMGfloat.html`文件中，通常会包含一个或多个`&lt;img&gt;`标签，这些标签定义了要浮动的图片。例如： ```html 浮动图片"&gt; ``` 这里...

    js 图片随机不定向浮动的实现代码

    总的来说，通过这篇文章，我们可以学习到如何使用基本的HTML、CSS和JavaScript技术实现一个有趣的图片随机不定向浮动效果，并且可以在此基础上扩展和改进，创造出更具吸引力和实用性的网页设计元素。

    满屏浮动图片例子

    3. **JavaScript增强**：虽然仅使用CSS可以实现简单的浮动效果，但若需要更复杂的交互（如随机移动、碰撞检测），则需要JavaScript的参与。例如，我们可以使用`setInterval`或`requestAnimationFrame`定时更新图片的...

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

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

    符合web标准的浮动广告(图片漂浮广告)效果代码.zip

    在网页设计中，浮动广告（通常称为图片漂浮广告）是一种常见的营销手段，它能够在用户浏览页面时持续显示，以吸引用户的注意力。本压缩包"符合web标准的浮动广告(图片漂浮广告)效果代码.zip"包含了一套前端实现此类...

    JS特效例子（浮动广告，图片特效等）

    在这个"JS特效例子"压缩包中，我们可能会找到一些用于创建浮动广告、滚动图片以及文字变化等效果的代码示例。 1. **浮动广告**：浮动广告是网页上常见的一种广告形式，它通常会随着用户滚动页面而始终固定在屏幕的...

    原生js浮动泡泡

    标题 "原生js浮动泡泡" 涉及到的是使用JavaScript实现一种动态视觉效果，即在网页上创建浮动的气泡或图标。这种效果常见于网站的交互设计中，为用户带来活力和趣味性。接下来，我们将深入探讨如何利用原生JavaScript...

    随机效果js+flash幻灯片

    本主题聚焦于"随机效果js+flash幻灯片"，这是一种结合JavaScript（js）和Flash技术实现的动态图片展示方案。在网页中，这种幻灯片通常用于创建吸引人的轮播效果，使用户能够方便地浏览一系列图片或内容，而无需手动...

    jquery代码实现简单的随机图片瀑布流效果

    瀑布流布局，也称为Masonry布局，是一种网页布局方式，常用于展示图片，使得页面看起来像瀑布一样，每一列图片自上而下排列，不同列的图片底部对齐。这种布局方式可以有效地利用屏幕空间，视觉效果独特。在本示例中...

    jquery右下角浮动窗口.zip

    本项目"jquery右下角浮动窗口.zip"涉及到的知识点主要集中在利用jQuery创建一个动态的、浮于网页右下角的商品展示窗口。下面将详细解析这个项目的相关技术点。 首先，我们要理解jQuery的浮动窗口（Floating Window...

    同时漂浮多个图片广告的JS特效

    "同时漂浮多个图片广告的JS特效"是一种常见的网页交互技术，它允许多张图片在页面上随机位置浮动，每次刷新页面时图片的位置都会有所不同，这样既保持了页面的新鲜感，又能确保广告的曝光率。 这种特效的核心是...

    随机播放照片墙效果

    "随机播放照片墙效果"是一种常见的前端网页设计技术，它为用户提供了一种动态展示图片的方式，使得图片在页面上以随机顺序或者特定动画效果呈现，增强了用户体验和视觉吸引力。这种效果通常应用于个人作品集、摄影...

    实现漫天飞舞浮动广告

    为了实现浮动效果，我们可以使用`position: absolute`或者`position: fixed`属性，配合`top`, `left`, `right`, `bottom`等定位属性来控制广告在屏幕上的位置。例如： ```css #flyingAd { position: absolute; ...

    外国设计师设计10款动感图片展示js代码

    8. **浮动粒子背景**：在图片背景上添加浮动粒子效果，可以提升页面的整体视觉吸引力。JavaScript可以控制粒子的运动轨迹和速度，营造出动态的氛围。 9. **图片相册**：通过JavaScript实现的图片相册功能，支持幻灯...

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

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

    八种华丽主页效果源码

    6. 气球浮动效果：可能是指网页中某些元素（如图标、文字）以气球形式悬浮并动态移动，营造活泼、轻松的氛围。 7. 鼠标悬停图片华丽展示：当鼠标悬停在图片上方时，图片可能会放大、旋转或者添加其他视觉特效，帮助...

    首页右下角浮动视频广告

    【首页右下角浮动视频广告】是一种常见的网页交互设计，旨在吸引用户注意力并展示产品或服务的宣传视频。这种广告通常出现在网站的右下角，不会遮挡主要内容，且具有一定的交互性，允许用户自由控制观看体验。在给定...

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