js入门级别案例 --------滚动的菜单

第一次写博客分享,全作自己的学习笔记,如有错误和问题欢迎提出

仅适用于新手练习

<!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("&nbsp;<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>

阅读更多
文章标签: js
上一篇window.event对象详细介绍 -----转自struggle_beiJing
下一篇JS中的单引号和双引号 ------------转自ranyonsue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭