HTML5+CSS3+JavaScript从入门到精通-18
原创HTML5+CSS3+JavaScript从入门到精通-18
原创
qiqi_fu
发布于 2021-12-06 16:13:47
发布于 2021-12-06 16:13:47
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第十八章 JavaScript的网页特效
案例
18-01 文字的跑马灯效果
<!DOCTYPE html>
<!--web18-01-->
<!--跑马灯这段逻辑要好好看一下，包括position++和substring那里-->
<html>
<head>
<meta charset="utf-8" />
<title>文字的跑马灯效果</title>
<script type="text/javascript">
var id, pause = 0, position = 0;
function banner()
{
var i, k;
//设置跑马灯的文字字符串
var m1 = " 欢迎学习javascript！";
var m2 = " 文字的跑马灯效果！";
var msg = m1 + m2;
//文字运动的速度
var speed = 2;
document.isnform.mytext.value = msg.substring(position, position + 160);//这个160可为任何大于msg.lengh的一个值
if (position++ == msg.length)
{
position = 0;
}
id = setTimeout("banner()", 2000 / speed);//时隔2000/speed后再重新调用函数banner();
}
</script>
</head>
<body onload="banner()">
<h3 align="center">文字的跑马灯效果</h3>
<hr />
<form method="post" name="isnform">
<input type="text" size="48" maxlength="256" name="mytext" />
</form>
</body>
</html>
18-02 打字动画效果
<!DOCTYPE html>
<!--web18-02-->
<html>
<head>
<meta charset="utf-8" />
<title>打字动画效果</title>
<script type="text/javascript">
var max = 0;
function textlist()//利用函数创建一个textlist对象
{
//arguments是所有函数都可使用的局部变量，表示函数的参数
max = textlist.arguments.length;
for (i = 0; i < max; i++)
{
this[i] = textlist.arguments[i];
}
}
t1 = new textlist(
"程序设计语言所支持的数据类型是这种语言最为基础的部分",
"JavaScript能够处理多种类型的数据，这些数据类型可以分为两类，基础数据类型和引用数据类型",
"JavaScript的基本数据类型包括常用的数值型、字符串和布尔型，以及两个特殊的数据类型：空值和未定义",
"JavaScript的引用数据类型包括数组、函数和对象等。");
var x = 0, pos = 0;
var l = t1[0].length;
function textticker()
{
document.tickform.myta.value = t1[x].substring(0, pos) + "_";
if (pos++ == l)
{
pos = 0;
setTimeout("textticker()", 400);
if (++x == max)
x = 0;
l = t1[x].length;
}
else {
setTimeout("textticker()", 200);
}
}
</script>
</head>
<body onload="textticker()">
<h3 align="center">打字动画效果</h3>
<hr />
<form method="post" name="tickform">
<textarea name="myta" rows="10" cols="80" wrap="virtual" style="background-color:yellow;color:red;border:15px groove green;font-size:15px;"></textarea>
</form>
</body>
</html>18-03 大小不断变化的文字动画效果
<!DOCTYPE html>
<!--web18-03-->
<html>
<head>
<meta charset="utf-8" />
<title>大小不断变化的文字动画效果</title>
</head>
<body>
<h3 align="center">大小不断变化的文字动画效果</h3>
<hr />
<script type="text/javascript">
var speed = 100;
var cycledelay = 2000;
var maxsize = 28;
var x = 0;
var themessage = "大小不断变化的文字动画效果";
document.write('<span id="wds"></span><br/>');//建立一个span标签，用于放置文字变化的
//文字变大函数
function upwords()
{
if (x < maxsize) {
x++;
setTimeout("upwords()", speed);
}
else
{
setTimeout("downwords()", cycledelay);
}
wds.innerHTML = "<center>" + themessage + "</center>";
wds.style.fontSize = x + 'px';//fontSize的大小写要注意，否则看不到效果；
wds.style.color = "red";
}
//文字变小函数
function downwords()
{
if (x > 1) {
x--;
setTimeout("downwords()", speed);
}
else
{
setTimeout("upwords()", cycledelay);
}
wds.innerHTML = "<center>" + themessage + "</center>";
wds.style.fontSize = x + 'px';
wds.style.color = "red";
}
setTimeout("upwords()", speed);
</script>
</body>
</html>
18-04 颜色不断变化的文字动画效果
<!DOCTYPE html>
<!--web18-04-->
<html>
<head>
<meta charset="utf-8" />
<title>颜色不断变化的文字动画效果</title>
</head>
<body>
<h3 align="center">颜色不断变化的文字动画效果</h3>
<hr />
<script type="text/javascript">
function initArray()
{
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
{
this[i] = initArray.arguments[i];
}
}
var ctext = "颜色不断变 化的文字动画效果";
var speed = 2000;
var x = 0;
var color = new initArray(
"#ffff00",
"#ff0000",
"#ff00ff",
"#0000ff",
"#ffffff",
"#000000",
"#00ff00",
"#00ffff",
"#ff00ff");
//IE浏览器中新建一个层，用于存放文字
if (navigator.appVersion.indexOf("MSIE") != -1)//用IE测试，并没有成立且进入块语句
{
document.write('<div id="c"><center><b>' + ctext + '</b></center></div>');
}
//NS浏览器中新建一个层，用于存放文字
if (navigator.appName == "Netscape")//用IE和google测试，此条件均成立
{
//document.write('<layer id="c"><center>' + ctext + '</center></layer><br />');//<hr />
document.write('<layer id="c"><center>xxxx</center></layer><br />');//<hr />
}
//改变颜色函数
function chcolor()
{
//IE浏览器输出文字颜色
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.all.c.style.color = color[x];
}
else
{
//NS浏览器输出文字颜色
if (navigator.appName == "Netscape")
{
//在菜鸟教程范例中找到的。script的代码，可在IE中调试，若有问题，IE中F12后会提示。
var la = document.getElementById("c");
la.innerHTML = '<center><font color="' + color[x] + '">' + ctext + '</font></center>';
//书中这个块中的语句有问题，并不能设置颜色
//document.c.document.write('<center><font color="' + color[x]);
//document.c.document.write('">' + ctext + '</font></center>');
//document.c.document.close();
}
}
(x < color.length - 1) ? x++ : x = 0;
}
setInterval("chcolor()", 1000);
</script>
</body>
</html>18-05 来回升降的文字动画效果
<!DOCTYPE html>
<!--web18-05-->
<html>
<head>
<meta charset="utf-8" />
<title>来回升降的文字动画效果</title>
<script type="text/javascript">
var done = 0;
var step = 4;
function anim(yp, yk)
{
document.all["shengjiang"].style.top = yp + "px";//书中范例，只有赋值数字，没有px，测试没有升降的效果。加上px后就可以了
if (yp > yk)
{
step = -4;
}
if (yp < 20)
{
step = 4;
}
setTimeout('anim(' + (yp + step) + ',' + yk + ')', 35);
}
function start()
{
if (done) return;
done = 1;
shengjiang.style.left = 11 + "px";
anim(20, 100);
}
setTimeout('start()', 10);
</script>
</head>
<body>
<div id="shengjiang" style="position:absolute; top:50px; font-family:宋体; font-size:16px;">
<p><font color="red">来回升降的文字动画效果</font></p>
</div>
</body>
</html>
18-06 动态改变图像的位置
<!DOCTYPE html>
<!--web18-06-->
<html>
<head>
<meta charset="utf-8" />
<title>动态改变图像的位置</title>
<style type="text/css">
#moveobj {
position: relative;
top: 0;
left: 0;
z-index: -10;
}
</style>
<script type="text/javascript">
function moveit()
{
var moveTop = document.myf.topnum.value;
var moveLeft = document.myf.leftnum.value;
moveobj.style.top = moveTop + "px"; //后面若不加px会没有效果；
moveobj.style.left = moveLeft + "px";
}
</script>
</head>
<body>
<h3 align="center">动态改变图像的位置</h3>
<hr />
<form method="post" name="myf" action="javascript:moveit()"><!--action表示，表单提交后交给moveit函数处理-->
上部位置:<input type="text" size="5" name="topnum" value="0" />
  
左边位置:<input type="text" size="5" name="leftnum" value="0" />
<input type="submit" value="移动" name="mys" />
</form>
<div id="moveobj">
<img src="b1.png" width="200" height="200" />
</div>
</body>
</html>
18-07 图像不断闪烁的动画效果
<!DOCTYPE html>
<!--web18-07-->
<html>
<head>
<meta charset="utf-8" />
<title>图像不断闪烁的动画效果</title>
<script type="text/javascript">
function soccerOnload()
{
setTimeout("blink()", 400);
}
function blink()
{
//书中写的soccer.style....,错了。要用myimg
if (myimg.style.visibility == "hidden") {
myimg.style.visibility = "visible";
}
else {
myimg.style.visibility = "hidden"
}
setTimeout("blink()", 400);
}
</script>
</head>
<body onload="soccerOnload()">
<h3>图像不断闪烁的动画效果</h3>
<hr />
<img src="b1.png" name="myimg" width="600" height="300" style="filter:alpha(opacity=0)" />
</body>
</html>
18-08 拖动鼠标改变图像大小
<!DOCTYPE html>
<!--web18-08-->
<!--该实例用google浏览器不成功，用IE成功-->
<html>
<head>
<meta charset="utf-8" />
<title>拖动鼠标改变图像大小</title>
<script type="text/javascript">
function resizeImage(evt, name)
{
var newX = evt.x;
var newY = evt.y;
eval("document." + name + ".width=newX");
eval("document." + name + ".height=newY");
}
</script>
</head>
<body>
<h3>拖动鼠标改变图像大小</h3>
<hr />
<!--ondrag为图片的拖动事件-->
<img src="b1.png" name="myimg" width="300" height="250" ondrag="resizeImage(event, 'myimg')" />
</body>
</html>
18-09 分时问候的时间特效
<!DOCTYPE html>
<!--web18-09-->
<html>
<head>
<meta charset="utf-8" />
<title>分时问候的时间特效</title>
</head>
<body>
<h3>分时问候的时间特效</h3>
<hr />
<script type="text/javascript">
var now = new Date();
var hour = now.getHours();
document.write("当前日期与时间：" + now + "<br/ ><br />");
if (hour < 6) { document.write("凌晨好!"); }
else if (hour < 9) { document.write("早上好!"); }
else if (hour < 12) { document.write("上午好!"); }
else if (hour < 14) { document.write("中午好!"); }
else if (hour < 17) { document.write("下午好!"); }
else if (hour < 19) { document.write("傍晚好!"); }
else if (hour < 22) { document.write("晚上好!"); }
else { document.write("夜里好!"); }
</script>
</body>
</html>
18-10 动态显示当前日期和时间效果
<!DOCTYPE html>
<!--web18-10-->
<html>
<head>
<meta charset="utf-8" />
<title>动态显示当前日期和时间效果</title>
<script type="text/javascript">
function showtime()
{
var today = new Date();
var day;
var date;
if (today.getDay() == 0) day = "星期日";
if (today.getDay() == 1) day = "星期一";
if (today.getDay() == 2) day = "星期二";
if (today.getDay() == 3) day = "星期三";
if (today.getDay() == 4) day = "星期四";
if (today.getDay() == 5) day = "星期五";
if (today.getDay() == 6) day = "星期六";
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
document.fgColor = "000000";
date = "今天是" + (today.getFullYear()) + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日" + day + "";
var timeValue = date + "" + ((hours >= 12) ? "下午" : "上午");
timeValue += ((hours > 12) ? hours - 12 : hours);
timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.thetime.value = timeValue;
setTimeout("showtime()", 1000);
}
</script>
</head>
<body onload="showtime()">
<h3>动态显示当前日期和时间效果</h3>
<hr />
<form name="clock">
<p>
<input name="thetime" style="font-size:15pt; color:#000000;border:0" size="50" />
</p>
</form>
</body>
</html>
18-11 时间倒计时页面效果
<!DOCTYPE html>
<!--web18-11-->
<html>
<head>
<meta charset="utf-8" />
<title>时间倒计时页面效果</title>
<style type="text/css">
#mytime {
width: 300px;
height: 40px;
padding: 15px;
background-color: yellow;
color: red;
font-size: 18px;
border: 15px green groove;
}
</style>
</head>
<body>
<h3>时间倒计时页面效果</h3>
<hr />
<div id="mytime">
<script type="text/javascript">
var urodz = new Date("December 25,2021");
var s = "圣诞";
var now = new Date();
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 1)
document.write("今天离" + s + "还有" + dni + "天");
else if (dni == 1)
document.write("只有2天啦！");
else if (dni == 0)
document.write("只有1天啦！");
else
document.write("好像已经过完了~");
</script>
</div>
</body>
</html>
18-12 不允许单击鼠标左右键特效
<!DOCTYPE html>
<!--web18-12-->
<html>
<head>
<meta charset="utf-8" />
<title>不允许单击鼠标左右键特效</title>
</head>
<body>
<h3>不允许单击鼠标左右键特效</h3>
<hr />
<script type="text/javascript">
function click()
{
//按键总共有7中组合
if (event.button == 1)//测试时，按中间键值才为1？
window.alert('不许单击鼠标左键！ ');
if (event.button == 2)
window.alert('不许单击鼠标右键！ ');
}
document.onmousedown = click;//鼠标点击: onmousedown
</script>
</body>
</html>
18-13 动态显示鼠标的当前坐标
<!DOCTYPE html>
<!--web18-13-->
<html>
<head>
<meta charset="utf-8" />
<title>动态显示鼠标的当前坐标</title>
<script type="text/javascript">
//测试的效果是：只能在form表单范围内移动，就有效果，若在其他地方移动，对话框中的值不变；
function MouseMove()
{
if (window.event.x != document.test.x.value &&
window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</script>
</head>
<body onmousemove="MouseMove()">
<h3>动态显示鼠标的当前坐标</h3>
<hr />
<form name="test">
鼠标的X坐标值:<input type="text" name="x" size="4" />
鼠标的Y坐标值:<input type="text" name="y" size="4" />
</form>
</body>
</html>
18-14 下拉菜单特效
<!DOCTYPE html>
<!--web18-14-->
<!--
onmouseout
-->
<html>
<head>
<meta charset="utf-8" />
<title>下拉菜单特效</title>
<script type="text/javascript">
function out()
{
if (window.event.toElement.id != "menu" && window.event.toElement.id != "link")
menu.style.visibility = "hidden";
}
</script>
</head>
<body>
<h3>下拉菜单特效</h3>
<hr />
<div id="back" onmouseout="out()" style="position:absolute;top:60px;left:20px;width:300px;height:20px;z-index:1;visibility:visible;">
<span id="menubar" onmouseover="menu.style.visibility='visible'">网站导航菜单</span>
<div border="1" id="menu" style="position:absolute;top:21px;left:0;width:299px;height:100;z-index:2;visibility:hidden;">
<a id="link" href="">sohu</a><br />
<a id="link" href="">sina</a><br />
<a id="link" href="">chinaren</a><br />
<a id="link" href="">baidu</a><br />
</div>
</div>
</body>
</html>
18-15 滚动的导航栏特效
<!DOCTYPE html>
<!--web18-15-->
<html>
<head>
<meta charset="utf-8" />
<title>滚动的导航栏特效</title>
</head>
<body>
<h3>滚动的导航栏特效</h3>
<hr />
<script type="text/javascript">
var index = 4;
var lin = new Array(4);
var text = new Array(4);
lin[0] = "www.sohu.com";
lin[1] = "www.sina.com";
lin[2] = "www.chinaren.com";
lin[3] = "www.baidu.com";
text[0] = "sohu";
text[1] = "sina";
text[2] = "chinaren";
text[3] = "baidu";
//marquee是HTML语言中的一个标签名，用来实现页面文字移动功能；
//步长1像素，间隔100ms滚动一次，向上滚动；
document.write("<marquee scrollamount=1 scrolldelay=100 direction=up width=150 height=60 >");
for (var i = 0; i < index; i++)
{
document.write("<a href=" + lin[i] + ">" + text[i] + "</a><br />");
}
document.write("</marquee>");
</script>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读