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

最新推荐文章于 2024-04-05 21:12:09 发布

boat_sea

最新推荐文章于 2024-04-05 21:12:09 发布

阅读量524

点赞数

文章标签： js

本文链接：https://blog.csdn.net/boat_sea/article/details/79980663

版权

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

仅适用于新手练习

<!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>

boat_sea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js入门级别案例 --------滚动的菜单

第一次写博客分享，全作自己的学习笔记，如有错误和问题欢迎提出仅适用于新手练习&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滚动的菜单&lt;/title&gt; &lt;script&gt; link = new Array(9);
复制链接

扫一扫