javascript如何实现动态效果

JavaScript013

javascript如何实现动态效果,第1张

JS动态效果，参考如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>浮动图片</title>

<script type="text/javascript">

var step = 1 // 移动的像素

var y = -1 // 垂直移动的方向，-1表示向上，1表示向下

var x = 1 // 水平移动的方向，-1表示向左，1表示向右

function myFloat()

{

var img = document.getElementById("myImg")

// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位

var top = img.style.top.replace("px", "")

// top = top - 100

// img.style.top = top + "px"

// 获取图片和当前浏览器窗口左边距

var left = img.style.left.replace("px", "")

// left = left - 100

// img.style.left = left + "px"

// 上下移动

if(top <= 0)

{

y = 1

}

if(top >= document.body.clientHeight)

{

y = -1

}

top = (top*1) + (step * y)

img.style.top = top + "px"

// 左右移动

if(left <= 0)

{

x = 1

}

// alert(img.clientWidth)

if(left >= (document.body.clientWidth - img.clientWidth))

{

x = -1

}

left = (left*1) + (step * x)

img.style.left = left + "px"

setTimeout("myFloat()", 20)

}

</script>

</head>

<body onload="myFloat()" style="height: 400px">

<img id="myImg" src="IP.gif"

style="position: absolute left: 500px top: 400px border: solid 1px black" />

</body>

</html>

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料：

能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。