第一次写博客分享,全作自己的学习笔记,如有错误和问题欢迎提出
仅适用于新手练习
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>滚动的菜单</title>
<script>
link = new Array(9);
link[0] = 'time1.htm'
link[1] = 'time2.htm'
link[2] = 'time3.htm'
link[3] = 'time1.htm'
link[4] = 'time2.htm'
link[5] = 'time3.htm'
link[6] = 'time1.htm'
link[7] = 'time2.htm'
link[8] = 'time3.htm'
text = new Array(8);
text[0]= '首页'
text[1]= '产品天地'
text[2]= '关于我们'
text[3]= '咨询动态'
text[4]= '服务支持'
text[5]= '会员中心'
text[6]= '网上商城'
text[7]= '官方微博'
text[8]= '企业文化' //scrollamount滚动速度 默认为6,一般为2、3 当低于1时不起效果
document.write("<marquee scrollamount='3' scrolldelay='100' direction='up' width='150' height='150'>"); /*scrolldelay滚动演示 */ /*direction='down'则为向下滚动*/
for(i=0;i<link.length;i++){
document.write(" <img src='img/1.png' width='12' height='12'/><a href="+link[i]+" target='_blank'>");
document.write(text[i]+"</a><br>");
}
document.write("</marquee>")
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
</body>
</html>
作为新手练习,我想大家还是会有一点小疑问的?如下图
为什么href=""里面需要两个加号,这并不是多次一举,
而是因为这里的地址是动态的,例如href="www.baidu.com"
那么这个地址就是写死的,每次都会跳转到百度的页面,
但是我这样写: href=“www.”+link+“.com”(link是一个变量)
如果link是zhidao,那么我点击就可以进入百度知道的页面
感觉不明白的可以去看看拼接链接字符,不同的理解
(我的JS中的单引号和双引号会有所提及)
此效果完全可以用css实现,多学一点css便少敲一行代码!
下面为css效果的实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动的菜单</title>
</head>
<body sty bgcolor="#ffffff" text='#000000'>
<marquee direction='up'scrollamount='3'scrolldelay='100' width='150' height='150'>
<img src="img/1.png" width="12" height="12"/><a href="#">首页</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">文件</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">编辑</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">选择</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">跳转</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">查找</a><br>
<img src="img/1.png" width="12" height="12"/><a href="#">运行</a><br>
</marquee>
</body>
</html>