叶子网络bbs论坛

标题: javascirpt 特效编程 [打印本页]

作者: rain    时间: 2014-10-14 21:48
标题: javascirpt 特效编程
本帖最后由 rain 于 2014-10-18 00:41 编辑

先来个最基础的js入门程序,往后就省略开头,直接写中间部分内容。
<script type="text/javascript">
   document.write("Hellow World !");
</script>

一、自动刷新页面
方法一:<meta http-equiv="refresh" content="20">      每20秒刷新一次
方法二:用js写
<script type="text/javascript">
function fresh(){
   window.location.reload();
}
setTimeout('fresh()',20000);         //自动刷新定时器
</script>
//reload()函数的作用是让浏览器刷新当前网页。



作者: rain    时间: 2014-10-17 16:10
本帖最后由 rain 于 2014-10-17 16:13 编辑

二、写个让页面前进和后退的按钮
1、js部分
//前进
function goForward(){window.history.forward();}
//后退
function goBack(){window.history.back();}
2、网页部分写好按钮
<input type="button" value="前进"  onclick="goForward()"/>
<input type="button" value="后退"/>

效果

ps:history 对象里,还有一个go()函数,用正负值表示,例如go(1)表示前进一页。
作者: rain    时间: 2014-10-17 21:35
本帖最后由 rain 于 2014-10-17 21:41 编辑

三、关闭页面按钮
1、js
function  closeWin(){window.close();}
2、css
<input type="button" value="关闭窗口" onclick=closeWin()/>    //onclick 动作省去了“”,防止代码干扰

单击按钮,则该页面关闭
作者: rain    时间: 2014-10-18 00:22
本帖最后由 rain 于 2014-10-18 02:31 编辑

四、页面载入等待界面
1、js
function submitForm(){
    var doing = document.getElementById('doing');      //获取界面的dom
    doing.style.display=' ';         //取消隐藏
    self.location.reload();           // 重新刷新页面

2、css
<div id="doing" style="z-index:99; left:0px;top:0px;display:none; width:100%; position:absolute;height:100%;background:#ccc;">
载入中,请等待。。。。
</div>
<p>
         <input type="button" value="提交表单" />
</p>

点击按钮时出现等待提示,提交完成后恢复页面
作者: rain    时间: 2014-10-18 02:25
五、若干秒后不操作自动关闭窗口
var willClose = true;                          //定义一个是否关闭的全局变量
function clickBody(){
       willClose = false;                          //单击网页后,把变量置为false
}
setInterval ( function() {
      if (willClose){
           window.close();                           //关闭窗口
        }else{
           willClose = true ;
                }
                                    },10000);                 //      10秒后才执行该函数


setInterval() 用来记时和进行重复操作。本例中是10秒后执行第一个参数。

作者: rain    时间: 2014-10-18 03:05
六、修改网页标题

1、js
    function changeTitle(){
     var newTitle=document.getElementById('newTitle').value;      //得到新的Title值
     document.title=newTitle;                          //修改标题
}

2、css
<input type="text" name="newTitle" id="newTitle" value="" />
<input type="button" value="修改标题" />

在这里输入内容,点击按钮,则页面标题就改掉了
作者: rain    时间: 2014-10-18 03:51
本帖最后由 rain 于 2014-10-18 04:04 编辑

七、禁止网页放入框架
防止网页被随意地引入到别人的框架里。

if(self != top){                                   //判断当前页是否为最顶层框架的网页
top.location.href=self.location.href;   //如果不是,则进行跳转
                    }

top和self是否等同,可以作为网页是否在一个框架中打开的判断标准。
作者: rain    时间: 2014-10-18 04:02
本帖最后由 rain 于 2014-10-18 04:04 编辑

八、跳转到其它页面

function changURL(){
    var newURL = document.getElementById('newURL').value;   //得到新的url值
    self.location.href=newURL;       //通过修改地址栏的地址来跳转到新的网页地址

下面写个输入组件就可以了

如果网页处于一个框架当中,那么这样的跳转仅限于框架里,而不是整个窗口。如果整个窗口跳转,应把self换成window。
作者: rain    时间: 2014-10-18 04:07
九、进入页面时的问候

alert('欢迎您的光临');          //弹出对用户的问候


可以放在</html>后边
作者: rain    时间: 2014-10-18 05:12
十、在网页里动态加载javascript

function  loadJs(){
     var  theHead = document.getElementsByTagName('head').item(0);    //得到html的头部dom
     var  myScript = document.createElement('script');    //创建脚本的dom对象实例
     myScript.src='./myjs.js';          //指定脚本路径
     myScript.type='text/javascript';     //指定脚本类型
     myScript.defer=true;         //程序下载完后再解析和执行
     theHead.appendChild(myScript);    //把dom挂载到头部
                            }


定义按钮
<input type="button" value="动态加载JS"  onclick=loadJS() />  
作者: rain    时间: 2014-11-13 15:55
<html>
        <head>
                <title>从下往上的信息滚动特效</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script type="text/javascript">               
                        var timer = null;                                //定时器
                        //页面加载完成的事件回调
                        function init(){
                                var time = 30;                                //定义滚动的时间间隔,毫秒
                                //获取容器的DOM
                                var container = document.getElementById('container');
                                var d1 = document.getElementById('con1');
                                var d2 = document.getElementById('con2');
                                d2.innerHTML = d1.innerHTML        //把第二个容器的内容填充为第一个
                                function MyMarquee(){                        //定义滚动的函数
                                        //如果d2的高度已经超过最大的限制
                                        if(d2.offsetHeight <= container.scrollTop)
                                                //把容器的滚动条恢复到最初的位置
                                                container.scrollTop -= d1.offsetHeight;
                                        else{
                                                //滚动条的位置往top移动一个像素
                                                container.scrollTop++;
                                        }
                                }
                                timer = setInterval(MyMarquee,time);//开始一个定时执行
                                container.onmouseover=function() {        //定义鼠标放上事件
                                        clearInterval(timer);                        //结束滚动
                                }
                                container.onmouseout=function() {        //定义鼠标移出事件
                                        timer=setInterval(MyMarquee,time);//再次开始
                                }
                        }                       
                </script>       
        </head>
        <body style="text-align:center" onLoad="init();">
                <div id="container" style="overflow:hidden;height:100px;">
                        <table align="left" cellpadding="0" cellspace="0" border="0">
                                <tr>
                                        <td id="con1" valign="top">
                                        <img src="1.jpg"><img src="1.jpg"><img src="1.jpg">
                                        </td>
                                </tr>
                                <tr>
                                        <td id="con2" valign="top"></td>
                                </tr>
                        </table>
                </div>
        </body>
</html>
作者: rain    时间: 2014-11-13 16:47
本帖最后由 rain 于 2014-11-13 20:27 编辑

<html>
        <head>
                <title>可以拖动的层</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script type="text/javascript">
                        var isOver = false;                                                //是否正在移动的标志变量
                        var l = 0;                                                                //left变量
                        var t = 0;                                                                //top变量
                        //监听网页加载完成的事件
                        function init(){
                                //获取层box的DOM
                                var boxTitle = document.getElementById('boxTitle');
                                boxTitle.onmousedown = mouseDown;        //设置mousedown事件
                                boxTitle.onmousemove = mouseMove;        //设置mousemove事件
                                boxTitle.onmouseup = mouseUp;                //设置mouseup事件
                        }
                        //定义box的鼠标按下事件
                        function mouseDown(event){
                                var e = event;                                                //定义事件e变量
                                x = e.clientX;                                                //得到事件发生的x坐标
                                y = e.clientY;                                                //得到事件发生的y坐标
                                //得到box的左上角的坐标
                                l = parseInt(document.getElementById("box").style.left);
                                t = parseInt(document.getElementById("box").style.top);
                                isOver=true;                                                //把正在移动变量设置为true
                        }
                        function mouseMove(event){
                                if(isOver){                                                        //当正在移动的时候
                                        var e = event;                                        //得到事件变量e
                                        //得到box的DOM
                                        var box = document.getElementById("box");
                                        var newleft = l + e.clientX - x;//计算新的left的值
                                        var newtop = t + e.clientY - y;        //计算新的top的值
                                        box.style.left = newleft + "px";//设置新的left值,带上单位
                                        box.style.top = newtop + "px";        //设置新的top值,带上单位
                                }
                        }
                        function mouseUp(event){                                //鼠标按下释放事件                                
                                if(isOver){
                                        isOver = false;                                 //设置变量为false
                                }
                        }
                </script>        
                <style>
                </style>               
        </head>
        <body style="text-align:center">
                <div id="box" style="border: 1px solid black; position: absolute; left: 200px; top: 100px; width: 300px; height: 200px; z-index: 99;">
                        <h4 align="right" id="boxTitle" style="margin: 0px; padding: 3px; background-color: black; opacity: 0.75; border: 1px solid black; height: 18px; cursor: pointer;">
                        <span style="float:left; color:white;">这里是标题栏</span></h4>
                        <div id="boxMsg">这是一个可拖动的层</div>
                </div>
        </body>
</html>
作者: rain    时间: 2014-11-13 17:39
本帖最后由 rain 于 2014-11-13 17:43 编辑

<html>
        <head>
                <title>广告图切换特效</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script type="text/javascript">               
                var currIndex = 1;
                function init(){
                        var length = 5;
                        for(var i = 0; i < length; i++)
                        {
                                document.getElementById('slideshow_footbar').innerHTML += '<div class="slideshow-bt" index="'+(length-i)+'"></div>';
                        }
                        var btns = document.getElementsByClassName('slideshow-bt');
                        btns[length-1].className += ' bt-on';
                        for(var i=0;i<btns.length;i++){
                                btns.onclick=function(){
slideTo(this.attributes['index'].value);
                                };
                        }
                        setInterval(function(){               
                                if(currIndex + 1 > 5)
                                        currIndex = 0;
                                slideTo(currIndex + 1);
                        },3000);
                }
                function slideTo(index){
                        index = parseInt(index);
                        var picArr = document.getElementById('slideshow_photo').childNodes;
                        for(var i=0;i<picArr.length;i++){               
if(picArr.attributes
                                        && picArr.attributes['index']
                                        && parseInt(picArr.attributes['index'].value)==index){
                                        picArr.style.zIndex = 2;
                                        currIndex = index;
                                }else if(picArr.attributes
                                        && picArr.attributes['index']){
                                        picArr.style.zIndex = 1;
                                }
                        }
var btns = document.getElementsByClassName('slideshow-bt');
                        for(var i=0;i<btns.length;i++){
                                if(parseInt(btns.attributes['index'].value) == index){
                                        btns.className = 'slideshow-bt bt-on';
                                }else{
                                        btns.className = 'slideshow-bt';
                                }
                        }
                }
                </script>        
                <style>
#slideshow_wrapper {
        POSITION: relative;
        PADDING-BOTTOM: 0px;
        BACKGROUND-COLOR: #121212;
        PADDING-LEFT: 0px;
        WIDTH: 650px;
        PADDING-RIGHT: 0px;
        HEIGHT: 400px;
        OVERFLOW: hidden;
        PADDING-TOP: 0px
}
#slideshow_footbar {
        Z-INDEX: 5;
        POSITION: absolute;
        FILTER: alpha(opacity=50);
        WIDTH: 100%;
        BOTTOM: 0px;
        HEIGHT: 30px;
        background-color: black;
        opacity:0.5;
}
#slideshow_photo {
        POSITION: absolute;
        WIDTH: 100%;
        HEIGHT: 100%;
        CURSOR: pointer
}
#slideshow_photo A {
        Z-INDEX: 1;
        BORDER-BOTTOM: 0px;
        POSITION: absolute;
        BORDER-LEFT: 0px;
        MARGIN: 0px;
        DISPLAY: block;
        BORDER-TOP: 0px;
        TOP: 0px;
        BORDER-RIGHT: 0px;
        LEFT: 0px
}
#slideshow_footbar .slideshow-bt {
        BACKGROUND-COLOR: #d2d3d4;
        MARGIN: 10px 10px 0px 0px;
        WIDTH: 10px;
        DISPLAY: inline;
        FLOAT: right;
        HEIGHT: 10px;
        FONT-SIZE: 0px
}
#slideshow_footbar .bt-on {
        BACKGROUND-COLOR: #30b1eb
}
                </style>
        </head>
        <body style="text-align:center">
                <DIV id="slideshow_wrapper">
                        <DIV id="slideshow_photo">
                                <A target="_blank" style="Z-INDEX: 2" href="#" index="1"><IMG border=0 src="2.jpg"></A>
                                <A target="_blank" style="Z-INDEX: 1" href="#" index="2"><IMG border=0 src="3.jpg"></A>
                                <A target="_blank" style="Z-INDEX: 1" href="#" index="3"><IMG border=0 src="3.jpg"></A>
                                <A target="_blank" style="Z-INDEX: 1" href="#" index="4"><IMG border=0 src="3.jpg"></A>
                                <A target="_blank" style="Z-INDEX: 1" href="#" index="5"><IMG border=0 src="3.jpg"></A>
                        </DIV>
                        <DIV id="slideshow_footbar"></DIV>
                </DIV>
        </body>
</html>

作者: rain    时间: 2014-11-13 20:26
本帖最后由 rain 于 2014-11-13 20:45 编辑

绕死人的浮动框
<html>
        <head>
                <title>悬浮的广告层</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script type="text/javascript">               
                        function goScroll(o){
                                var space=document.getElementById(o).offsetTop;
                                document.getElementById(o).style.top=space+'px';
                                var goTo = 0;
                                window.setInterval(function(){
                                        var height =document.documentElement.scrollTop+document.body.scrollTop+space;
                                        var top = parseInt(document.getElementById(o).style.top);
                                        if(height!= top){
                                                goTo = height-parseInt((height - top)*0.9);
                                                document.getElementById(o).style.top=goTo+'px';
                                        }
                                },50);
                        }
                        function init(){
                                goScroll('con1');
                        }
                </script>        
                <style>
                        #con1{                                
                                background-color:gray;                                
                                left: 0px;
                                top: 100px;
                                width:100px;
                                height:100px;
                                position: absolute;
                                z-index = 1;
                        }
                </style>
        </head>
        <body style="text-align:center">
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <div id="con1">
                        这是一个广告
                </div>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </body>
</html>


document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。

作者: rain    时间: 2014-11-17 17:29
<html>
        <head>
                <title>让表格行的背景颜色间隔开</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script type="text/javascript">               
                        //为表格改变样式的函数
                        function chCell(){
                                //获取DOM
                                var tbl = document.getElementById('tbl');
                                var rows = tbl.rows;                        //得到当前的表格的row数组
                                var len = tbl.rows.length;                //当前的行数
                                for(var i=1;i<len;i++){                        //遍历所有行
                                        var r = rows[i];                        //当前行
                                        r.onmouseover = function(){        //定义鼠标移入事件
                                                //把背景色变成粉红色
                                                this.style.backgroundColor = 'pink';
                                        };
                                        r.onmouseout = function(){        //定义鼠标移出事件
                                                //把背景色变回白色
                                                this.style.backgroundColor = 'white';
                                        };
                                }
                        }
                </script>       
        </head>
        <body style="text-align:center" onLoad="chCell();">
                <table id="tbl" align="center" border="1">
                        <tr>
                                <th>名字</th>
                                <th>年龄</th>
                        </tr>
                        <tr>
                                <td>A</td>
                                <td>12</td>
                        </tr>
                        <tr>
                                <td>B</td>
                                <td>11</td>
                        </tr>
                        <tr>
                                <td>C</td>
                                <td>15</td>
                        </tr>
                </table>
        </body>
</html>
作者: rain    时间: 2014-11-17 22:11
带下拉菜单的导航栏
<html>
        <head>
                <title>二级导航菜单</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script src="jquery.js"></script>
                <script type="text/javascript">
                        //使用jquery的加载回调函数开始定义菜单的功能
                        $(function(){
                                var menus = $('.menu a');                //得到菜单下所有的链接
                                for(var i=0;i<menus.length;i++){//遍历这些链接
                                        var m = menus[i];                        //得到当前的链接
                                        $(m).mouseover(function(){        //为菜单链接定义onmouover事件
                                                //得到当前鼠标移入的菜单项的下标
                                                var index = $('.menu a').index(this);
                                                $('.sub_menu').hide();        //把所有的二级菜单隐藏
                                                $('.sub_menu').eq(index).show();//显示当前下标的菜单项
                                                //并且计算出这个菜单项应该处于的定位位置
                                                $('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
                                        });
                                }
                        });
                </script>       
                <style>
                        .menu{
                                list-style: none;
                                width: 400px;
                                margin: 10px auto 0;
                                padding:0;
                        }
                        .menu li{
                                float:left;
                                width:98px;
                                border:1px solid black;
                        }
                        .menu a{
                                color:black;
                                width:100%;
                        }
                        .menu a:hover{
                                background-color:pink;
                        }
                        .clearfix:after {
                                visibility: hidden;
                                display: block;
                                font-size: 0;
                                content: " ";
                                clear: both;
                                height: 0;
                        }
                        .sub_menu{
                                border:1px solid black;
                                width: 100px;
                                padding:0;
                                display: none;
                                margin:0;
                        }
                        .sub_div{
                                width: 400px;
                                margin: 0 auto;
                        }
                </style>
        </head>
        <body style="text-align:center">
                <ul class="menu clearfix">
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                        <li><a href="#">菜单</a></li>
                </ul>
                <div class="sub_div">
                        <ul class="sub_menu">
                                <li><a href="#">菜单</a></li>
                        </ul>
                        <ul class="sub_menu">
                                <li><a href="#">菜单</a></li>
                                <li><a href="#">菜单</a></li>
                        </ul>
                        <ul class="sub_menu">
                                <li><a href="#">菜单</a></li>
                        </ul>
                        <ul class="sub_menu">
                                <li><a href="#">菜单</a></li>
                                <li><a href="#">菜单</a></li>
                                <li><a href="#">菜单</a></li>
                        </ul>
                </div>
        </body>
</html>
作者: rain    时间: 2014-11-24 14:52
动态加载导航菜单
<html>
        <head>
                <title>动态加载的导航菜单</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script src="jquery.js"></script>
                <script type="text/javascript">
                        var arr = [];        //定义数据数组变量
                        //为菜单指定数据,包含了名字和URL
                        arr[0] = [{name:'菜单1',url:'#'},{name:'菜单11',url:'#'}];
                        arr[1] = [{name:'菜单2',url:'#'}];
                        arr[2] = [{name:'菜单3',url:'#'},{name:'菜单31',url:'#'},{name:'菜单32',url:'#'}];
                        //在jquery的加载回调函数里操作
                        $(function(){
                                //定义菜单的html内容,以ul打头
                                var html = '<ul class="menu clearfix">';
                                //根据数组变量的长度,开始串联第一级菜单
                                for(var i=0;i<arr.length;i++){
                                        html += '<li><a href="#">菜单'+(i+1)+'</a></li>';
                                }
                                html += '</ul>';
                                //第一级菜单组合完成
                                //开始组合二级菜单
                                html += '<div class="sub_div clearfix">';
                                //使用两次循环开始串联第二级菜单
                                for(var i=0;i<arr.length;i++){
                                        var a = arr[i];
                                        html += '<ul class="sub_menu">';//使用sub_menu的ul
                                        for(var j=0;j<a.length;j++){
                                                var item = a[j];                        //得到数据
                                                //拼接字符
                                                html += '<li><a href="'+item['url']+'">'+item['name']+'</a></li>';
                                        }
                                        html += '</ul>';                                //完成ul
                                }
                                html += '</div>';                                        //完成全部的菜单html
                                $('body').append(html);                                //挂接在body里
                                //开始指定菜单的功能
                                var menus = $('.menu a');                //得到菜单下所有的链接
                                for(var i=0;i<menus.length;i++){//遍历这些链接
                                        var m = menus[i];                        //得到当前的链接
                                        $(m).mouseover(function(){        //为菜单链接定义onmouover事件
                                                //得到当前鼠标移入的菜单项的下标
                                                var index = $('.menu a').index(this);
                                                $('.sub_menu').hide();        //把所有的二级菜单隐藏
                                                $('.sub_menu').eq(index).show();//显示当前下标的菜单项
                                                //并且计算出这个菜单项应该处于的定位位置
                                                $('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
                                        });
                                }
                        });
                </script>       
                <style>
                        .menu{
                                list-style: none;
                                width: 300px;
                                margin: 10px auto 0;
                                padding:0;
                        }
                        .menu li{
                                float:left;
                                width:98px;
                                border:1px solid black;
                        }
                        .menu a{
                                color:black;
                                width:100%;
                        }
                        .menu a:hover{
                                background-color:pink;
                        }
                        .clearfix:after {
                                visibility: hidden;
                                display: block;
                                font-size: 0;
                                content: " ";
                                clear: both;
                                height: 0;
                        }
                        .sub_menu{
                                border:1px solid black;
                                width: 100px;
                                padding:0;
                                display: none;
                                margin:0;
                                float:left;
                        }
                        .sub_div{
                                width: 305px;
                                margin: 0 auto;
                        }
                </style>
        </head>
        <body style="text-align:center">
               
        </body>
</html>
作者: rain    时间: 2014-11-24 14:53
三级联动导航菜单
<html>
        <head>
                <title>三级联动导航菜单</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                <script src="jquery.js"></script>
                <script type="text/javascript">
                        var arr = [];        //定义数据数组变量
                        //为菜单指定数据,包含了名字和URL
                        arr[0] = [{name:'菜单1',url:'#'},{name:'菜单11',url:'#'}];
                        arr[1] = [{name:'菜单2',url:'#'}];
                        arr[2] = [{name:'菜单3',url:'#'},{name:'菜单31',url:'#'},
                                {name:'菜单32',url:'#',child:[
                                        {name:'菜单321',url:'#'}
                                ]}];                        //包含了子菜单
                        //在jquery的加载回调函数里操作
                        $(function(){
                                //定义菜单的html内容,以ul打头
                                var html = '<ul class="menu clearfix">';
                                //根据数组变量的长度,开始串联第一级菜单
                                for(var i=0;i<arr.length;i++){
                                        html += '<li><a href="#">菜单'+(i+1)+'</a></li>';
                                }
                                html += '</ul>';
                                //第一级菜单组合完成
                                //开始组合二级菜单
                                html += '<div class="sub_div clearfix">';
                                //使用两次循环开始串联第二级菜单
                                for(var i=0;i<arr.length;i++){
                                        var a = arr[i];                                        //得到当前的数据
                                        html += '<ul class="sub_menu">';//拼接二级菜单项
                                        var sub_count = 1;                                //开始计数id
                                        for(var j=0;j<a.length;j++){        //遍历
                                                var item = a[j];                        //得到数据
                                                var sub = '';                                //定义拼接有子菜单的class属性
                                                if(item['child'])                        //如果包含了子属性,则定义class
                                                        sub = 'sub sub_'+j+'_'+sub_count++;
                                                //拼接动态的第二级菜单的字符
                                                html += '<li><a href="'+item['url']+'" class="'+sub+'" index="'+j+'">'+item['name']+'</a></li>';
                                        }
                                        html += '</ul>';                                //完成第二级菜单
                                        var sub_count = 1;                                //开始为三级菜单的id计数
                                        for(var j=0;j<a.length;j++){        //遍历第三级菜单
                                                var item = a[j];                        //得到数据
                                                if(item['child']){                        //如果包含三级菜单
                                                        var b = item['child'];        //得到子菜单项的数据
                                                        //拼接第三层的字符
                                                        html += '<ul class="third_menu" id="'+'sub_'+j+'_'+sub_count+++'">';
                                                        //遍历第三层的数据变量
                                                        for(var k=0;k<b.length;k++){
                                                                html += '<li><a href="'+b[k]['url']+'">'+b[k]['name']+'</a></li>';
                                                        }
                                                        html += '</ul>';                //完成第三层
                                                }
                                        }
                                }
                                html += '</div>';                                        //完成全部的菜单html
                                $('body').append(html);                                //挂接在body里               
                               
                                var menus = $('.menu a');                //得到菜单下所有的链接
                                for(var i=0;i<menus.length;i++){//遍历这些链接
                                        var m = menus[i];                        //得到当前的链接
                                        $(m).mouseover(function(){        //为菜单链接定义onmouover事件
                                                //得到当前鼠标移入的菜单项的下标
                                                var index = $('.menu a').index(this);
                                                $('.sub_menu').hide();        //把其他二级菜单隐藏
                                                $('.third_menu').hide();//三级也隐藏
                                                $('.sub_menu').eq(index).show();//显示对应的二级菜单
                                                //计算二级菜单应该定位的位置
                                                $('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
                                        });
                                }
                                //为包含第三级菜单的二级菜单定义onmouseover事件
                                $('.sub').mouseover(function(){
                                        //得到它的class属性
                                        var className = $(this).attr('class');
                                        //得到第三级菜单的id值
                                        var subId = className.split(' ')[1];
                                        $('#'+subId).show();                //显示第三级菜单
                                        var index = $(this).attr('index');//得到它的下标
                                        //计算第三级菜单显示的坐标位置
                                        $('#'+subId).css('margin-top',(parseInt(index)*20)+'px');
                                });
                        });
                </script>       
                <style>
                        .menu{
                                list-style: none;
                                width: 500px;
                                margin: 10px auto 0;
                                padding:0;
                        }
                        .menu li{
                                float:left;
                                width:98px;
                                border:1px solid black;
                        }
                        .menu a{
                                color:black;
                                width:100%;
                        }
                        .menu a:hover{
                                background-color:pink;
                        }
                        .clearfix:after {
                                visibility: hidden;
                                display: block;
                                font-size: 0;
                                content: " ";
                                clear: both;
                                height: 0;
                        }
                        .sub_menu{
                                border:1px solid black;
                                width: 100px;
                                padding:0;
                                display: none;
                                margin:0;
                                float:left;
                        }
                        .sub_div{
                                width: 505px;
                                margin: 0 auto;
                        }
                        .third_menu{
                                display:none;
                                float: left;
                                border:1px solid black;
                                width: 100px;
                                padding:0;
                                margin:0;
                        }
                </style>
        </head>
        <body style="text-align:center">
               
        </body>
</html>




欢迎光临 叶子网络bbs论坛 (https://fob0.com/) Powered by Discuz! X3.3