javascript 鼠标方式去显示

document.write("<style type='text/css'>"); 
document.write(".yyfloat_p{width:209px; height:396px;position:fixed!important;position:absolute;left:150px;top:80px;_top:expression(offsetParent.scrollTop+offsetParent.clientHeight-600);z-index:788; background:none; }");
document.write(".yyform_p{width:150px; height:396px; float:left; background:none; }");
document.write(".yybar_p{width:30px; float:left; height:250px; float:left;background:url(/swt/zmd_tcan.gif) left center no-repeat; margin-top:30px;cursor:pointer;} ");
document.write(".zzsm{width:349px; height:182px; position:fixed!important;position:absolute;left:-319px;top:350px;_top:expression(offsetParent.scrollTop+offsetParent.clientHeight-350);z-index:800; background:none; }");
document.write("</style>");
document.write("<div class=\"yyfloat_p\" id=\"yyfloat_p\">");
document.write("<div class=\"yyform_p\"><a href=\"/swt\"><img src=\"/swt/zmd_tc.gif\" /></a></div>");
document.write("<div class=\"yybar_p\"></div>");
document.write("</div>");

//左侧浮动预约
$(document).ready(function () { 
   //预约框
    $(".yybar_p").hover(function(){
            $(".yyfloat_p").css("z-index","1420");
            $(".yyfloat_p").stop().animate( { left: '0px' } , 500 ); 
        },function(){  
            hideobj();  
        });  
    /*郑重申明
    $(".zzsm").hover(function(){
            $(".zzsm").stop().animate( { left: '0px' } , 500 ); 
        },function(){  
            $(".zzsm").stop().animate( { left: '-319px' } , 500 );  
        }); */
});
//隐藏预约框
function hideobj() {var xx = new test_out("yyfloat_p");}
 function test_out(id){
    var _this = this, obj = document.getElementById(id);
    this.in_dom = function(m,n){
        if (m==n) return true;
        else if (!m.parentNode) return false;
        else if (m.parentNode==n) return true;
        else return _this.in_dom(m.parentNode,n);
    };
    obj.onmouseout = function(event){
        var e = arguments[0]||window.event;
        var x = e.relatedTarget||e.toElement; // 鼠标滑出的目标元素
        if (!_this.in_dom(x,obj)){ 
            $("#yyfloat_p").stop().animate({left: '-150px'} , 500 ,function(){$(".yyfloat_p").css("z-index","789");});
            
        }
    }
} 
zmd_tcan.gif 显示的图片
zmd_tc.gif 放上去显示的图片(隐藏)
left: '-150px' 隐藏图片的宽度
posted @ 2013-12-28 09:48  为了这有限的生命  阅读(261)  评论(0编辑  收藏  举报