javascript 网页拖动实例

HTML代码:

[cce_html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>拖动</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag1.js"></script>
</head>

<body>
    <div class="loginPanel" id="loginPanel">
        <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <div class="login_logo_webqq"></div>
        <div class="inputs">
            <div class="sign-input"><span>帐 号:</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div>
            <div class="sign-input"><span>密 码:</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
        </div>
        <div class="bottomDiv">
            <div class="btn" style="float: left"></div>
            <div>
                <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
                    <div id="loginStateShow" class="login-state-show online">状态</div>
                    <div class="login-state-down">下</div>
                    <div class="login-state-txt" id="login2qq_state_txt">在线</div>
                    <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
                        <li id="online" class="statePanel_li">
                            <div class="stateSelect_icon online"></div>
                            <div class="stateSelect_text">我在线上</div>
                        </li>
                        <li id="callme" class="statePanel_li">
                            <div class="stateSelect_icon callme"></div>
                            <div class="stateSelect_text">Q我吧</div>
                        </li>
                        <li id="away" class="statePanel_li">
                            <div class="stateSelect_icon away"></div>
                            <div class="stateSelect_text">离开</div>
                        </li>
                        <li id="busy" class="statePanel_li">
                            <div class="stateSelect_icon busy"></div>
                            <div class="stateSelect_text">忙碌</div>
                        </li>
                        <li id="silent" class="statePanel_li">
                            <div class="stateSelect_icon silent"></div>
                            <div class="stateSelect_text">请勿打扰</div>
                        </li>
                        <li id="hidden" class="statePanel_li">
                            <div class="stateSelect_icon hidden"></div>
                            <div class="stateSelect_text">隐身</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

[/cce_html]

javascript代码:

[cce_js]
[cce]
//取class函数
function getByClass(clsName, parent) {
    var oParent = parent ? document.getElementById(parent) : document,
        eles = [],
        elements = oParent.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}
//面板操作
window.onload = dray;

function dray() {
    var oTitle = getByClass("login_logo_webqq", "loginPanel")[0];
    //拖动
    oTitle.onmousedown = fnDown;
    //关闭
    var oClose = document.getElementById('ui_boxyClose');
    oClose.onclick = function() {
        var oBox = document.getElementById('loginPanel');
        oBox.style.display = 'none';
    }
}
//面板按下
function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel');
    // 光标和面板之间的距离
    disX = event.clientX - oDrag.offsetLeft;
    disY = event.clientY - oDrag.offsetTop;
    // 光标移动时执行
    document.onmousemove = function(event) {
        fnMove(event, disX, disY);
    };
    // 光标停止时执行
    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
// 光标移动
function fnMove(e, posX, posY) {
    var oDrag = document.getElementById('loginPanel'),
        // 移动后盒子需要显示的准确位置
        l = e.clientX - posX,
        t = e.clientY - posY,
        // 窗口显示的高和宽
        winW = document.documentElement.clientWidth || document.body.clientWidth,
        winH = document.documentElement.clientHeight || document.body.clientHeight,
        // 显示的最大高的宽
        maxW = winW - oDrag.offsetWidth,
        maxH = winH - oDrag.offsetHeight;
    // 判断显示的边界
    if (l < 0) {
        l = 10;
    } else if (l > maxW) {
        l = maxW - 10;
    }
    if (t < 10) {
        t = 10;
    } else if (t > maxH) {
        t = maxH;
    }
    // 设置盒子显示的位置
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';

}

[/cce]
[/cce_js]

显示效果:

jdfw

javascript 解决浏览器兼容常用封装获取class的方法

函数代码:

[cce_js]
function getbyClass (clsname,parent){//需要两个参数:类名(必选),父元素ID(可选),
	var oParent = parent?document.getElementById(parent):document,//获得父元素对象
		eles = [],//定义存放class空数组
		elements = oParent.getElementsByTagName('*');//获得父元素下所有元素
		for (var i = 0,l = element.length; i < l; i++) {//遍历数组elements
			if (element[i].className == clsname) {
				eles.push(element[i]);//相同类名添加到class数组中
			}
		}
	return eles;//返回class数组
}
[/cce_js]

使用里需要注意:

return 的结果是一个数组,默认第一个数组元素就是需要找的class,所以在使用时需要在调用后加入下标[0]

 

也可以直接封装在一个方法里使用:

getclass.js代码内容

[cce_js]
var getClass = {
	getC: function(className,parent) {
		 var oParent=document.getElementById(parent)||document;
		 	 eles = [];
		 	 elements = oParent.getElementsByTagName('*');
		 	 for (var i = 0,l=elements.length; i < l; i++) {
		 	  	if (elements[i].className==className) {
		 	  		eles.push(elements[i]);
		 	  	}
		 	  	
		 	  }
		 	  return eles;

	}
};
[/cce_js]

javascript 用户登陆事件案例

代码:

[cce_js]
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Document</title>
  <style>
   *{margin:0;padding:0;}
     .head{font-size:12px;padding:6px 0 0 10px;}
     #login_box{width:300px;height:150px;background:#eee;
     border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
     #login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
     #close{width:14px;height:14px;background:blue;position:absolute;right:4px;top:6px;}
  </style>
  <script>
      window.onload=function(){
        var login_btn=document.getElementById('login'),
            login_box=document.getElementById('login_box'),
            close=document.getElementById('close');
        // 封装添加事件监听程序
        function addEvent(ele,type,hander){
           // 执行代码
           ele.addEventListener(type,hander);//增加事件,不支持IE8以下
        }
        // 显示登录层函数
        function showLogin(){
          // 执行代码
            login_box.style.display="block";
        }
        // 隐藏登录层函数
        function hideLogin(){
          // 执行代码
          login_box.style.display="none";
        }
        //点击登录按钮显示登录层 
        // 执行代码
        addEvent(login_btn,'click',showLogin);
        //点击关闭按钮隐藏登录层
        // 执行代码
        addEvent(close,'click',hideLogin);
      }
  </script>
</head>
<body>
  <div class="head">亲,您好!<input type="button" value="登 录" id="login"></div>
  <div id="login_box">
    <p>用户登录</p><span id="close"></span>
  </div>
</body>
</html>
[/cce_js]

效果:

jdfw

javacrpt 事件跨浏览器封装方法程序包:

封装方法的包:event.js

[cce_js]
 var zjsj = { //定义对象
     //定义增加事件方法
     addsj: function(element, type, func) {
         //判断是否是除IE6.7.8之外的浏览器
         if (element.addEventListener) {
             element.addEventListener(type, func, false);
         } else if (element.attachEvent) { //判断是否是IE浏览器
             element.attachEvent('on' + type, func);
         } else {
             element['on' + type] = func; //判断是否是其它浏览器
         }
     },
     //定义删除事件方法
     removesj: function(element, type, func) {
         //判断是否是除IE6.7.8之外的浏览器
         if (element.removeEventListener) {
             element.removeEventListener(type, func, false);
         } else if (element.detachEvent) { //判断是否是IE浏览器
             element.detachEvent('on' + type, func);
         } else {
             element['on' + type] = func; //判断是否是其它浏览器.element.使用element[]代替。
         }
     },
     //获取event
     hqevent: function(event) {
         return event ? event : window.event;
     },
     //获取对象类型
     hqtype: function(event) {
        return event.type;
     },
     //获取事件目标
     hqelement: function(event) {
      if (event.target) {
        return event.target;
      } else {
        return event.srcElement;//IE属性
      }
     },
     //阻止事件冒泡
     zzsj:function(event) {
      if (event.stopPropagation) {
        return event.stopPropagation();
      } else {
        return  event.cancelBubble('true');//IE属性
      }
     },
     //阻止默认行为
     zzmrsj: function(event) {
      if (event.preventDefault) {
        return event.preventDefault();
      } else {
        return event.returnValue('false');//IE属性
      }
     }
      

 };

[/cce_js]

调用案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="event.js"></script>
</head>

<body>
    <div id="box">
        <input type="button" id="btn" value="类型">
        <input type="button" id="btn2" value="目标">
        <input type="button" id="btn3" value="阻止冒泡">
    </div>
    <a href="test.html" id="go">跳转</a>
    <script>
    var btn = document.getElementById('btn'),
        box = document.getElementById('box'),
        go = document.getElementById('go'),
        event = zjsj.hqevent(event);
    //获取事件类似
    function showMsg(e) {
        alert(zjsj.hqtype(e));
    }
    //获取事件目标
    function showMb(e) {
        alert(zjsj.hqelement(e).nodeName);//获取事件的元素名
    }

    function showBox() {
        alert('我是box');
    }
    //阻止事件冒泡
    function showZz(e) {
        alert("阻止冒泡");
        zjsj.zzsj(e);
    }
    //阻默认行为
    function showGo(e) {
        zjsj.zzmrsj(e);//阻止A的行为
    }
    
    zjsj.addsj(btn, 'click', showMsg);
    zjsj.addsj(btn2, 'click', showMb);
    zjsj.addsj(box, 'click', showBox);
    zjsj.addsj(btn3, 'click', showZz);
    zjsj.addsj(go, 'click', showGo);
    </script>
</body>

</html>

[/cce_js]

 

javascript 动画下拉菜单

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动画菜单</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    
    a {
        color: #333;
        text-decoration: none
    }
    
    ul {
        list-style: none;
    }
    
    .nav {
        height: 30px;
        border-bottom: 5px solid #F60;
        margin-left: 50px;
        width: 600px;
    }
    
    .nav li {
        float: left;
        position: relative;
        height: 30px;
        width: 120px
    }
    
    .nav li a {
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 120px;
        background: #efefef;
        margin-left: 1px;
    }
    
    .subNav {
        position: absolute;
        top: 30px;
        left: 0;
        width: 120px;
        height: 0;
        overflow: hidden
    }
    
    .subNav li a {
        background: #ddd
    }
    
    .subNav li a:hover {
        background: #efefef
    }
    </style>
    <script>
    window.onload = function() {
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onmouseover = function() {
                    //鼠标经过一级菜单,二级菜单动画下拉显示出来
                    var aUl = this.getElementsByTagName('ul')[0]; //获取第一个Ul
                    clearInterval(aUl.time); //清除计时器
                    aUl.time = setInterval(function() { //定义计时器
                        aUl.style.height = aUl.offsetHeight + 5 + "px"; //ul高度加5
                        if (aUl.offsetHeight >= 200) {
                            clearInterval(aUl.time); //清除计时器
                        };
                    }, 20);

                }
                //鼠标离开菜单,二级菜单动画收缩起来。    
            aLi[i].onmouseout = function() {
                var aUl = this.getElementsByTagName('ul')[0];
                clearInterval(aUl.time);
                aUl.time = setInterval(function() {
                    aUl.style.height = aUl.offsetHeight - 5 + "px";
                    if (aUl.offsetHeight <= 0) {
                        clearInterval(aUl.time);
                    };
                }, 20);


            }


        }
    }
    </script>
</head>

<body>
    <ul class="nav">
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>
</body>

</html>

[/cce_js]

效果:

jdfw

javascript 菜单伸展动画代码

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:30px; line-height:30px; }
</style>
<script>
window.onload = function (){
  var aA =document.getElementsByTagName('a');
  for (var i = 0; i < aA.length; i++) {
    aA[i].onmouseover = function(){
      clearInterval(this.time); //清理计时器
      var This = this; //当前元素对象赋值给变量
      This.time = setInterval(function(){ //设置计时器
        This.style.width = This.offsetWidth+8+"px";//offsetWidth当前宽度
        if (This.offsetWidth>=160) {
          clearInterval(This.time);
        };
      } , 30);
    }

    aA[i].onmouseout = function(){
      clearInterval(this.time);
      var This = this;
      This.time = setInterval(function(){
        This.style.width = This.offsetWidth-8+"px";
        if (This.offsetWidth<=120){
          This.style.width ="120px";//给当前元素对像宽度赋值
          clearInterval(this.time);
        };
      }, 30);
    }
  };
}
  
</script>
</head>
<body>
<ul>
    <li><a class="on" href="#">首  页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>
[/cce_js]

效果:

jdfw

javascript 比较三个数案例

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    第一个数
    <input type="text" id="num1" /> 第二个数
    <input type="text" id="num2" /> 第三个数
    <input type="text" id="num3" />
    <button id="bt" onclick="bjsx()">升序</button>
    <button id="bt" onclick="bjjx()">降序</button>
    <script>
    function sx(a, b) {
        return a - b;
    }

    function jx(a, b) {
        return b - a;
    }

    function bjsx() {
        var num = new Array();
       		num[0] = document.getElementById("num1").value,
            num[1] = document.getElementById("num2").value,
            num[2] = document.getElementById("num3").value;

        num.sort(sx);
        alert(num);
    }

    function bjjx() {
        var num = new Array();
        	num[0] = document.getElementById("num1").value,
            num[1] = document.getElementById("num2").value,
            num[2] = document.getElementById("num3").value;
        num.sort(jx);
        alert(num);
    }
    </script>
</body>

</html>

[/cce_js]

javascript 取出数组下标自动加后代码

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var oldArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    function myfun() {
        var n = myform.myform.value - 0;
        var arr1 = oldArr.slice(0, n);
        var arr2 = oldArr.slice(n + 1, 10);
        var arr3 = oldArr.slice(n, n + 1);
        var newArr = arr1.concat(arr2, arr3);
        document.write("新的数组是:");
        for (var i = 0; i < newArr.length; i++) {
            document.write(newArr[i] + ",");
        };
    }
    </script>
</head>

<body>
    原数组是:
    <script>
    for (var i = 0; i < oldArr.length; i++) {
        document.write(oldArr[i] + ",")
    };
    </script>
    <br>请输入需要取出的下标:
    <form action="" name="myform">
        <input type="text" name="myform" />
        <input type="button" value="确定" onclick="myfun()" />
    </form>
</body>

</html>

[/cce_js]

javascript 选项卡实例

案例:

jdfw

[cce_js]
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
        font: 12px normal "microsoft yahei";
    }
    
    #tabs {
        width: 290px;
        padding: 5px;
        height: 150px;
        margin: 20px;
    }
    
    #tabs ul {
        list-style: none;
        display: block; //将ul定义为一个块
        height: 30px;
        line-height: 30px;
        border-bottom: 2px saddlebrown solid;
    }
    
    #tabs ul li {
        background: #fff;
        cursor: pointer;/*定义鼠标为手*/
        float: left;
        list-style: none;
        height: 28px;
        line-height: 28px;
        margin: 0px 3px;
        border: 1px solid #aaaaaa;
        border-bottom: none;
        display: inline-block; //改变li块为内联块
        width: 60px;
        text-align: center;
    }
    
    #tabs ul li.on {
        border-top: 2px solid saddlebrown;
        border-bottom: 2px solid #fff;
    }
    
    #tabs div {
        height: 120px;
        line-height: 25px;
        border: 1px solid #336699;
        border-top: none;
        padding: 5px;
    }
    
    .hide {
        display: none;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oTab = document.getElementById("tabs");
        var oUl = oTab.getElementsByTagName("ul")[0];
        var oLis = oUl.getElementsByTagName("li");
        var oDivs = oTab.getElementsByTagName("div");

        for (var i = 0, len = oLis.length; i < len; i++) {
            oLis[i].index = i;//定义li的索引,需要在后面调用。
            oLis[i].onclick = function() {
                for (var n = 0; n < len; n++) {
                    oLis[n].className = "";
                    oDivs[n].className = "hide";
                }//遍历所有li和div都设置为非按下显示方式
                this.className = "on";//定义按下li显示方式
                oDivs[this.index].className = "";//定义按下div显示方式
            }
        };
    }
    </script>
</head>

<body>
    <div id="tabs">
        <ul>
            <li class="on">房产</li>
            <li>家居</li>
            <li>二手房</li>
        </ul>
        <div>
            275万购昌平邻铁三居 总价20万买一居
            <br> 200万内购五环三居 140万安家东三环
            <br> 北京首现零首付楼盘 53万购东5环50平
            <br> 京楼盘直降5000 中信府 公园楼王现房
            <br>
        </div>
        <div class="hide">
            40平出租屋大改造 美少女的混搭小窝
            <br> 经典清新简欧爱家 90平老房焕发新生
            <br> 新中式的酷色温情 66平撞色活泼家居
            <br> 瓷砖就像选好老婆 卫生间烟道的设计
            <br>
        </div>
        <div class="hide">
            通州豪华3居260万 二环稀缺2居250w甩
            <br> 西3环通透2居290万 130万2居限量抢购
            <br> 黄城根小学学区仅260万 121平70万抛!
            <br> 独家别墅280万 苏州桥2居优惠价248万
            <br>
        </div>
    </div>
</body>

</html>

[/cce_js]

javascript 增加元素案例

1.table增加tr

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
   
    function addNode(){
        var fanode=document.getElementById("table").lastChild;
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML="<input type='text'>";
        tr.appendChild(td);
        td = document.createElement("td");
        td.innerHTML="<input type='text'>";
        tr.appendChild(td);
        td = document.createElement("td");
        td.innerHTML="<a href='javascript:delNode(this)' onclick='delNode(this)'>删除</a>";
        tr.appendChild(td);
        fanode.appendChild(tr);

    }
    </script>
</head>

<body>
    <table id="table" border="1" width="50%">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>01</td>
            <td>小明</td>
            <td><a href="javascript:;" onclick="delNode(this)">删除</a></td>
        </tr>
        <tr>
            <td>02</td>
            <td>小红</td>
            <td><a href="javascript:;" onclick="delNode(this)">删除</a></td>
        </tr>
        <tr>
            <td>03</td>
            <td>小李</td>
            <td><a href="javascript:;" onclick="delNode(this)">删除</a></td>
        </tr>
    </table>
    <input type="button" onclick="addNode()" value="增加一行"/>
</body>

</html>

[/cce_js]