javascript如何实现动态效果

JavaScript020

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 的特点是无穷无尽的，只要你有创意。

这个确实比较多，常用的特效就是 淡入淡出啊、渐变啊、滑动、展开伸缩、移动、拖动、最常用。其实你看下jQuery ui的官网基本就了解了所有常用的特效了

按类型可以分为下面几大类的特效集合：

Ui 类的：

背景

对话框

筛选及排序

反馈

弹出层

悬停

布局

图表

加载

圆边

滚动

标签

文本链接

工具提示

网络类型

输入类型的：

拾色器

定制和风格

日期和时间

拖和放

通用输入

自动完成

密码

投票率

搜索

选择框

快捷键

触摸

丰富的输入

上传

验证

媒体类型：

音频和视频

幻灯片和轮播图

图片展示

图像

地图

滑块和旋转

Tabs

导航：

水平导航

垂直导航

文件树

分页

手风琴菜单

其他