js实现图片漂浮效果的方法

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

js实现图片漂浮效果的方法

来源：阅读：2382 次日期：2015-03-06 11:41:30

温馨提示：小编为您整理了“js实现图片漂浮效果的方法”,方便广大网友查阅！

这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下：

描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！

代码如下:

<html>

<head>

#All{ width: 100%; height: 3000px;}

</style>

</head>

<body>

<!--Begin

var xPos = document.body.clientWidth - 20;

var yPos = document.body.clientHeight / 2;

var step = 1;

var delay = 10;

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);

}

function pause_resume() {

if (pause) {

clearInterval(interval);

pause = false;

} else {

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

pause = true;

}

start();

// End -->

</script>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：使用npm发布Node.JS程序包教程

下一篇：ECMAScript 5中的属性描述符详解

手机网站地址：js实现图片漂浮效果的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！