文档名称:
文件上传下载、分页类.docx
格式:docx 大小:63KB 页数:16页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表
如果您已付费下载过本站文档,您可以点这里二次下载
文档介绍:文件上传下载、分页类
第1章
用户注册完善
错误!未定义书签。
1.1
问答项目用户注册模块
错误!未定义书签。
第2章
轮播图练习
错误!未定义书签。
2.1
搭建静态页面
错误!未定义书签。
2.2
+'px';
29
30 〃每隔30亳秒向左移动lpx
var timer = setinterval(function()(
32 〃让ul整体向左移动
oUl.style.left = oUl.offsetLeft + 5 +'px';
34 i^(olll. off set Left >= 0)(
oUl.style.left = '-800px';
)
), 30)
38
39 </script>
1.3鼠标移入停止、鼠标离开继续
27 ▼
<script
type="text/javascript">
28
var
main docu/nent.getElementById( 'main');
29
var
oUl main.getElementsByTagName('ul')[0];
30
〃让ul的内容复制一份
31
oUl.innerHTML += oUl.innerHTML;
32
〃让ul的宽度也扩展一倍:1600
33
oUl.style.width oUl.offsetwidth 2 +'px';
34
35
var
speed = 5;
36
function goLeft(){
37
speed = -5;
38
}
39
function goRight()(
40
speed 二 5;
41
42 ▼
var
changePic = function(){
43
〃让ul整体向左移动
44
oUl.style.left = oUl.offsetLeft + speed +'px';
45
if(oUl.offsetLeft >二 0)(
46
oUl.style.left '-800px*;
47
}else if(oUl.offsetLeft < 800)(
48
oUl.style.left = 0;
49
}
52
var timer 二 setlnterval(changePic
30)
53
main.onmouseover = function(){
54
clearlnterval(timer);
55
)
56
main.onmouseout function(){
57
timer setlnterval(changePic,
30);
58
)
59
</s
cript>
第2章自定义动画框架
1.1总结网页中动画行为
通过JavaScript实现的动画
位置的变化:left、top
大小的变化:width、height
透明度的变化:opacity
通过CSS3实现的动画
1.2位置的变化(left、top)
•翊分享html x
<!DOCTYPE html>
<html>
<head>
<-
<n:eta charset=,,utf-8">
<style type="text/cssM>
{margin:0;padding: 0)
#main(width:200px;height:200px;border:lpx solid #666background:orange;position: fixed;right:-200px;top:200px;}
9 #main {width:2Qv:<ibackground: redeposition: absolute;/.e/t:-20px;top:60px;}
</st;le>
</head>
<body>
<iiv id=,*mainM>
立即分享 </pan>
</ Hv>
</body>
</}」】>
鼠标移入的时候,向左走,鼠标离开的时候,向右走
16 ▼
<sc
:ript type="text/javascript">
17
var oDiv = document.getElementById('main');
18
var timer = null;
19
20 ▼
oDiv.onmouseove