有一种效果，想让大家帮忙找一下是否有类似效果

我要实现的效果是这样的，导航是放在右边的，有点类似QQ客服浮动的效果，是可以实现伸缩，跟着鼠标上下移动的，但我想要的是这个内容不能包含在JS代码中，我需要包含在网页中，就是CSS,JS,和内容三者分离，请大家赐教?

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> 窗体移动 </TITLE>
    <style type="text/css">
    A {
    text-decoration:none;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //当前的宽度
    var curLeft = 0;
    //当前的高度
    var curTop = 0;
    //鼠标移动的X坐标
    var curClientX = 0;
    //鼠标移动的Y坐标
    var curClientY = 0;
    var curBool = false; //鼠标点击事件
    function show() {
    curLeft = document.getElementById("advShow").style.pixelLeft;
    curTop = document.getElementById("advShow").style.pixelTop;
    curClientX = event.clientX;
    curClientY = event.clientY;
    document.onmousemove = showDown;
    curBool = true;
    } //鼠标划过事件
    function showDown() {
    if (curBool) {
    var curX = event.clientX; //鼠标划过的X轴坐标
    var curY = event.clientY;//鼠标划过的Y轴坐标
    document.getElementById("advShow").style.pixelLeft = curLeft + (curX - curClientX);
    document.getElementById("advShow").style.pixelTop = curTop + (curY - curClientY);
    }
    } //当前div的高度
    var curHeight = 0;
    //当前div位置的高度
    var highttTop = 0;
    //当前的高度
    var curHeightTop = 0;
    //移动的步数
    var start = 20; //窗体加载是初始化
    function showHeight() {
    curHeight = document.getElementById("advShow").offsetHeight;
    highttTop = document.getElementById("advShow").style.pixelTop;
    } //小化事件
    function showMin() {
    curHeightTop = document.getElementById("advShow").offsetHeight;
    if (curHeightTop <= start) {
    curHeightTop = start;
    return;
    } else {
    curHeightTop = curHeightTop - start;
    document.getElementById("advShow").style.height = curHeightTop + "px";
    }
    setTimeout("showMin()",100);
    } //大化事件
    function showMax() {
    if (curHeightTop >= curHeight) {
    curHeightTop = curHeight;
    return;
    } else {
    curHeightTop = curHeightTop + start;
    document.getElementById("advShow").style.height = curHeightTop + "px";
    }
    setTimeout("showMax()",100);
    } //当前top位置
    var topHeigth = 0;
    //下框的top位置
    var topId = 0;
    //最大宽度
    var curWidth = 0
    //当前left位置
    var curLeftWidth = 0;
    //最小化事件
    function showHeightMin() {
    showMin();
    topHeigth = document.getElementById("advShow").style.pixelTop;
    curLeftWidth = document.getElementById("advShow").style.pixelLeft;
    topId = document.getElementById("advId").style.pixelTop;
    curWidth = document.body.offsetWidth - document.getElementById("advShow").offsetWidth;
    if (curLeftWidth <= 0) {
    curLeftWidth = 0;
    }
    if (topHeigth >= topId) {
    topHeigth = topId;
    return;
    } else {
    topHeigth = topHeigth + start;
    document.getElementById("advShow").style.pixelTop = topHeigth;
    }
    setTimeout("showHeightMin()",100);
    } //最大化事件
    function showHeightMax() {
    if (curLeftWidth >= curWidth) {
    curLeftWidth = curWidth;
    }
    if (topHeigth <= highttTop) {
    topHeigth = highttTop;
    return;
    } else {
    topHeigth = topHeigth - start;
    document.getElementById("advShow").style.pixelTop = topHeigth;
    }
    showMax();
    setTimeout("showHeightMax()",100);

    } //关闭事件
    function showClose() {
    document.getElementById("advShow").style.display = "none";
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <div id="advShow" style="position:absolute;height:200px;width:200px;z-index:1;background-color:#0080FF;" onmouseup="curBool = false">
    <div style="height:20px;width:200px;text-align:right;background-color:#FF80FF;cursor:hand;" onmousedown="show()">
    <A href="javascript:showMin(),showHeight()">-</A>
    <A href="javascript:showMax()">+</A>
    <A href="javascript:showHeightMin(),showHeight()">最小化</A>
    <A href="javascript:showHeightMax()">最大化</A>
    <A href="javascript:showClose()">关闭</A>
    </div>
    </div>
    <div id="advId" style="position:absolute;width:1190px;height:20px;top:580px;;background-color:#80FF80;"></div>
    </BODY>
    </HTML>
    没听懂你的题意，给你个div
      

  2.   

    楼主你要的效果类似“手风琴效果”，你可以google一下有很多源码
      

  3.   

    是不是这种？？
    <!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">
    <style type="text/css"><!--
    .obj{width:180px; height:300px; position:relative;}
    .box{ width:160px; height:300px; border:1px solid #666666;}
    .btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;}
    --></style>
    <body>
    <div id="obj" class="obj">
    <div class="box" id="box"></div>
    <div class="btn" onclick="set()" id="btn">点<br />我</div>
    </div>
    <div style="height:2000px;"></div>
    <script type="text/javascript">
    <!--
    var ig=document.getElementById("obj");
    var box=document.getElementById("box");
    var btn=document.getElementById("btn");
    var w=box.offsetWidth;
    var isIE = (document.all) ? true : false;  
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); 
    var Bind = function(object, fun) { 
    return function() {
    return fun.apply(object, arguments);
    }
    }
    ig.style.position ="fixed";
    ig.style.zIndex='1000';
    ig.style.left='0'+"px";
    ig.style.top='100'+"px";
    if(isIE6){
    ig.style.position ="absolute";
    ig._fixed = Bind(ig, function(){
    ig.style.marginTop = document.documentElement.scrollTop  + "px";
    ig.style.marginLeft = document.documentElement.scrollLeft + "px";});
    ig._fixed()
    window.attachEvent("onscroll", ig._fixed);
    }
     
    function set(){
    if(ig.offsetLeft+w==0)
    d(1);
    else
    d(-1);
    }
    function d(n){
    var T=setTimeout("d("+n+")",1);
    n=n<0?n-20:n+20
    ig.style.left=ig.offsetLeft+n+"px";
    if(ig.offsetLeft+w<=0){
    clearTimeout(T);
    ig.style.left=-w+"px";
    btn.style.backgroundColor="#0000FF";
    }
    if(ig.offsetLeft>=0){
    clearTimeout(T);
    ig.style.left=0;
    btn.style.backgroundColor="#FF0000";
    }
    }
    // --></script>
    </body>
    </html>