鼠标滑过显示图片

2015-03-13

字数统计: 350字 | 阅读时长: 2分

阅读量

当鼠标滑过某个制定位置，弹出div图片。移出，图片消失。

1、js

$(function() {

    $("#div_Content").mouseover(function() {
        $(this).show();
    });

    $("#div_Content").mouseleave(function() {
        $(this).hide();
    });


    //初次加载
    Loading();

    //鼠标经过
    $(".a_float").mousemove(function() {

        var _showDiv = $(this).attr("rel");
        
        $("#" + _showDiv + " img").eq(0).attr("src","<%=path %><spring:message code="head.weChatFocus"/>" );

        //替换完成

        $(this).mouseover(function() {

            var _l = getLeft(this);
            var _t = getTop(this) + $(this).height();
            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
            $("#" + _showDiv).show();
        });
        $(this).mouseleave(function() {

            $("#" + _showDiv).hide();
        });

    });

});

//鼠标经过

function getTop(e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}
function getLeft(e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
}


function Loading() {

    $(".a_float").each(function() {
        var _showDiv = $(this).attr("rel");

        $("#" + _showDiv + " img").eq(0).attr("src", "<%=path %><spring:message code="head.weChatFocus"/>");

        //替换完成

        $(this).mouseover(function() {
            var _l = getLeft(this);
            var _t = getTop(this) + $(this).height();
            $("#" + _showDiv).css("top", _t); $("#" + _showDiv).css("left", _l);
            $("#" + _showDiv).show();
        });
        $(this).mouseleave(function() {
            $("#" + _showDiv).hide();
        });

    });
}

2、页面引入

<!--浮动产品模板开始-->
<div id="div_Content" class="jy_recom div_style"><a href="#" target="_blank"><img src="img/wechart.jpg" alt="" width="206" height="262" /></a>
</div>
<!--浮动产品模板结束-->