请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
12
返回列表 发新帖
楼主: rain

javascirpt 特效编程

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-13 15:55:34 | 显示全部楼层
<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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-13 16:47:29 | 显示全部楼层
本帖最后由 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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-13 17:39:53 | 显示全部楼层
本帖最后由 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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-13 20:26:36 | 显示全部楼层
本帖最后由 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造成影响。
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-17 17:29:45 | 显示全部楼层
<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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-17 22:11:03 | 显示全部楼层
带下拉菜单的导航栏
<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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-24 14:52:55 | 显示全部楼层
动态加载导航菜单
<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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-24 14:53:35 | 显示全部楼层
三级联动导航菜单
<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>
回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-29 02:20 , Processed in 0.248969 second(s), 20 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表