2.js按钮特效大全

最新推荐文章于 2024-08-17 12:53:28 发布
学习急先锋
最新推荐文章于 2024-08-17 12:53:28 发布
阅读量2.9k
点赞数
分类专栏：特效 javascript实战特效
本文链接：https://blog.csdn.net/myvanguard/article/details/53538592
版权
特效同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
javascript实战特效
2 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第二章按钮特效17个</title>
    </head>
    <script>
    //2.1页面刷新按钮
    //重点:刷新页面的方法 reload 如果要使用meta元素 使用refresh属性
    function renovates(){
        document.location.reload();
    }

    //2.2按Enter键调用登录按钮
    function keyLogin(){
        if(event.keyCode==13){//按键enter的键值为13
            document.getElementById("input1").click();//调用登录按钮
        }
    }

    //2.3动态创建按钮 提高页面的访问速度
    //重点:createElement(),appendChild()
    var i=0;
    function addInput(){
        var o=document.createElement("input");//创建DOM
        o.type="button";//设置类型
        o.value="按钮"+i++;//设置属性
        o.attachEvent("onclick",addInput);//添加事件
        document.body.appendChild(o);//添加到主窗体
        o=null;//释放对象
    }

    //2.9获取按钮的绝对位置
    //使用this作为当前参数传递,读取offsetTop/Left属性
    function getAddress(e){
        var t=e.offsetTop;
        var l=e.offsetLeft
        while(e=e.offsetParent){
            t+=e.offsetTop;//取x坐标
            l+=e.offsetLeft;//取y坐标
        }
        alert("x坐标"+x+"y坐标"+l)
    }

    //2.10删除时确认提示
    function del(){
        if(confirm('确认要删除吗')){
            alert('已经删除');
        }else{
            alert('已经取消删除操作');
        }
    }

    //2.11防止按钮连击 重复提交数据
    //重点:如何判断页面的状态readyState属性
    function doubleCheck(){
        if(window.document.readyState!=null&&window.document.readyState!='complete'){//判断页面是否执行完
            alert("正在处理,请稍等!");
            return false;
        }else{
            return true;
        }
    }

    //2.12图片式的按钮
    //重点:selectedIndex属性,获取用户的选择,然后指定导航地址location
    function goTo(){
        var myindex=document.myform.mailBox.selectedIndex;//获取下拉选中的索引
        location=document.myform.mailBox.options[myindex].value;//获取下拉框的选择值
    }

    //2.14选择不同的列表项时候显示不同的按钮
    //重点:innerHTML
    function butSelect(){
        var selVal=document.getElementById("sel").value;
        if(selVal=="1"){
            document.getElementById("td").innerHTML="<input type='button' value='按钮1' onclick='btnc1();' />";
        }else if(selVal=="2"){
            document.getElementById("td").innerHTML="<input type='button' value='按钮2' onclick='btnc2();' />";
        }else{
            document.getElementById('td').innerHTML='';
        }
    }
    function btnc1(){
        alert("单击了按钮1");
    }
    function btnc2(){
        alert('单击了按钮2');
    }

    //2.15使用按钮控制文本渐变
    //重点:使用eval将普通字符串连成函数名
    var x=9;
    var change='on';
    if(navigator.appName=='Netscape'){//浏览器是NetScape
        visShow="'show'";//显示
        visHide="'hide'";//隐藏
        docStyle="document.";
        styleDoc="";
    }else{//浏览器是IE
        visHide="'hidden'";//显示
        visShow="'visible'";//隐藏
        docStyle="";
        styleDoc=".style";//设置样式
    }
    function hide1(){
        eval(docStyle+'object1'+styleDoc+'.visibility='+visHide);
    }
    function hide2(){
        eval(docStyle+'object2'+styleDoc+'.visibility='+visHide);
    }
    function hide3(){
        eval(docStyle+'object3'+styleDoc+'.visibility='+visHide);
    }
    function show1(){
        eval(docStyle+'object1'+styleDoc+'.visibility='+visShow);
    }
    function show2(){
        eval(docStyle+'object2'+styleDoc+'.visibility='+visShow);
    }
    function show3(){
        eval(docStyle+'object3'+styleDoc+'.visibility='+visShow);
    }
    function change1(){
        x+=1;
        eval("show"+x+"()");
        if(x<2){
            setTimeout("change1()",75);
        }else{
            change2();
        }
    }
    function change2(){
        x-=1;
        eval("show"+x+"()");
        if(x>1){
            setTimeout("change2()",75);
        }else{
            change1();
        }
    }
    function changeOn(){//开始变化的控制
        x=2;
        change="on";
        change1();
    }
    function changeOff(){//结束变化的控制
        change="off";
    }

    //2.16大翻页效果的公告栏
    var Scroll=new Function(){
        this.delay=2000;//延迟时间
        this.height=20;//行高
        this.step=4;//步长
        this.curHeight=0;
        this.stimer=nll;
        this.timer=null;
        this.start=function(){//开始翻页
            this.move();
        }
        this.move=function(){
            var self=this;
            if(this.curHeight==this.height){//显示完一行
                this.timer=setTimeout(function(){self.move()},this.delay);//使用定时器
            this.height=0;
            if(this.element.scrollTop>=this.element.scrollHeight-this.height){
                this.element.scrollTop=0;//浏览器信息完成
            }
            return true;
            }
            this.element.scrollTop+=this.step;
            this.curHeight=setTimeout(function(){self.move()},30);
        }       
        this.stop=function(){//清除定时器
            clearTimeout(this.timer);
        }
    }

    //2.17动态设置控件的事件
    //为控件绑定事件
    function addClick(obj){
        obj.onclick=function(){
            alert('动态添加事件成功');
        }
    }
    </script>
    <style>
        #divMsg{
            line-height: 20px;
            height: 20px;
            overflow: hidden;
        }
    </style>
    <body onload="alert('页面刷新了!')" onload="addInput();">
        <p align="center"><input type="button" value="刷新" name="renovates" onclick="renovates()"/></p>

        <input id="input1" value="登录" type="button" onclick="alert('调用成功!')"/>

        <!--2.4平面按钮 让按钮保持平面风格 无三围效果-->
        <!--难点:CSS样式设置-->
        <input type="submit" value="保存" style="border: 1px;solid:#666666;height: 35px;
            width: 50px;font-size: 15pt;background-color:#E8E8FF;color:#666666" name="submit" />
        <input id="button1" type="button" value="保存" style="height: 35px;width: 50px;font-size: 15pt;" />

        <!--2.5按钮的嵌入效果-->
        <input type="button" 
            onmouseover="this.className='over';" 
            onmouseout="this.className='';"
            onmousedown="this.className='down';"
            onmouseup="this.className='over';"
            onclick="this.value='嵌入成功!'"
            name="button"
            />

        <!--2.6改变状态信息栏按钮-->
        <!--难点:在于获取主窗口的状态栏 self表示当前窗体 也可以使用window.status-->
        <input type="button" value="修改状态信息栏" onclick="self.status='欢迎光临我们的工作室'" name="button" />

        <!--2.7定义按钮热键-->
        <!--重点:input的accessKey通常用来设置一些热键,内容是一些大写的字母-->
        <form action="http://www.google.com" method="get" name="form1">
            <textarea rows="5" cols="50"></textarea><br />
            <input type="submit" accesskey="8" value="提交(Alt+s)"/>
        </form>

        <input type="button" id="button2" value="坐标" onclick="getAddress(this)"/>

        <input type="button" id="button3" value="删除" onclick="del()"/>

        <!--2.10按钮只能点击一次-->
        <input type="button" name="btn" value="单击" onclick="this.disabled=true" />
        <p>单击上面的按钮测试是否只能点击一次</p>

        <input type="text" name="txt1" value="this is test!"/>
        <input type="button" value="提交" onclick="doubleCheck()"/>

        <form name="myform">
            <br />
            <select name="mailBox" size="1">
                <option selected="选项"></option>
                <option value="http://www.163.net">163电子邮局</option>
                <option value="http://www.263.net">263电子邮局</option>
            </select><br />
            <a href="javascript:goTo()" onmouseover="self.status='';return true" onmouseout="self.status='';return true">
                <img src="按钮1.gif" border="0" align="middle" style="width: 73px; height: 40px;" />
            </a>            
        </form>

        <!--2.13按钮底部显示文字-->
        <button style="width: 100px;height: 100px;padding-top: 80px;">看看底部的文字</button>

        <table>
            <tr>
                <td>                
                <select onchange="butSelect();" id="sel">
                    <option value=""></option>
                    <option value="1">but1</option>
                    <option value="2">but2</option>
                </select>
                </td>
                <td id="td">
                </td>
            </tr>           
        </table>

        <div id="divMsg">
            窗前明月光<br />
            疑是地上霜<br />
            举头望明月<br />
            低头思故乡<br />
        </div>
        <script>
            scroll.element=document.getElementById('divMsg');
            scroll.start();
        </script>
        <input type="button" value="开始" onclick="scroll.start();" />
        <input type="button" value="结束" onclick="scroll.stop();" />

        <input id="button4" type="button"/><br />
        <input type="button" id="button5" value="为上面的按钮添加事件" onclick="addClick(button4)"/>
    </body>
</html>