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

原创 2018年04月17日 21:17:02

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

仅适用于新手练习

<!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之联动菜单简单实例

初学JS的时候,跟着燕十八老师一起做的JS实现联动菜单功能。 联动菜单 var area = [ ['朝阳', '海淀', '自定义'], ['请选择', '长治',...
  • xiao_tommy
  • xiao_tommy
  • 2016-11-16 10:44:54
  • 648

JS入门小案例

js计算指定日期第几天? js计算阶乘 js求素数 js求斐波那契数
  • qq_33936481
  • qq_33936481
  • 2017-09-05 17:34:10
  • 244

基于jquery的滚动菜单(滚动条)的实现.

本来是打算做一个jquery插件, 只是本人水平属于那种欠扁级别的, 最近又比较忙, 没有时间学习jquery的插件开发, 所以, 做这么个小东西, 供大家玩乐, 呵呵.index.html是示例sc...
  • lgg201
  • lgg201
  • 2009-12-03 01:33:00
  • 6884

iscroll.js--滚动加载实例

滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。 首先是html结构: ...
  • SirM2z
  • SirM2z
  • 2015-08-04 10:34:18
  • 4188

JS基础整理+实例

JavaScript 是脚本语言 JavaScript 对大小写是敏感的。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代...
  • pakuma07
  • pakuma07
  • 2015-07-24 21:12:01
  • 1472

菜单高亮滚动监听

*{ margin: 0;padding: 0;} .main{ width: 12...
  • sinrryzhang
  • sinrryzhang
  • 2016-04-18 10:35:14
  • 539

js鼠标滚动到某个位置导航菜单显示

js鼠标滚动到某个位置导航菜单显示: $(function(){ var pcontent_right_height = $(".pcontent_right").offset().top; $...
  • boyit0
  • boyit0
  • 2016-12-05 10:54:36
  • 1041

JS左右滑动的菜单效果

  • 2013年12月27日 10:22
  • 34KB
  • 下载

python基础案例100

  • 2017年04月23日 14:42
  • 91KB
  • 下载

js创建滚动菜单

滚动菜单         var index=9;     var link=new Array(8);     link[0]="#";     link[1]="#";     lin...
  • xyy_933
  • xyy_933
  • 2016-05-06 16:09:54
  • 139
收藏助手
不良信息举报
您举报文章:js入门级别案例 --------滚动的菜单
举报原因:
原因补充:

(最多只允许输入30个字)