javascript控制DIV打开关闭添加事件

作者:Davidszhou   来源:SEO优化博客   时间:2015-04-21 23:43:05   点击:

        今天分享一个利用Javascript控制一个层DIV的关闭和打开,一般这个用在页面的浮动在线客服比较多。

先贴上全文代码如下:

<!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>企业网站建设_SEO优化_davidszhou</title>
<style>
#outlook { width:280px; height:100px; border:1px solid #000; position:fixed; top:200px; left:30px;} /*演示的DIV定义一个CSS样式。宽280px;高100px;给了边框border,并且给了固定定位,距离顶部200PX;距离左边30PX;*/
</style>
</head>

<body>
<script>
function downClik(){
    var a =document.getElementById('outlook'); /*获取要改变DIV的选择符*/
    a.style.width="25px";  /*定义它的宽为25px*/
    }
    function upClik(){
        var a =document.getElementById('outlook'); /*获取要改变DIV的选择符*/
        a.style.width="280px"; /*改变它的宽为280px;*/
        }
</script>
<div id="outlook">
<p><span onmousedown="downClik();">打开</span><span onmouseup="upClik();">关闭</span></p>/*给两个span添加onmousedown与onmouseup事件*/
</div>
</body>
</html>

这里主要是用到了JavaScript的onmousedown和onmouseup两个事件,结合JavaScript给DIV相应的属性,获得最终效果。具体说明已经在代码后方说明。

       JavaScript设计思想:点击关闭,改变应用DIV的宽度为最小宽度,或者高度,因为最小时也应该有个打开按钮,如不需要打开按钮,可以设置属性为:display:none;,点击打开,让他宽度或者高度恢复原值。

如果一个DIV“a”里面包含一个DIV"b",点击关闭,让div“b”改变属性,应获取DIV“b”的选择符。

javascript控制DIV打开关闭添加事件
文件类型: .html 4629d38bf1c0b6afa10e91a36a3e7dd3.html (805 Bytes)

TAGS:javascript

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/40.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18