Jquery mouseover 使用 ---图片放大功能

来源：互联网发布：java 微信菜单click 编辑：程序博客网时间：2024/06/06 02:47

css 样式

#tip {        position: absolute;        color: #333;        display: none;    }    #tip s {        position: absolute;        top: 40px;        left: -20px;        display: block;        width: 0px;        height: 0px;        font-size: 0px;        line-height: 0px;        border-color: transparent #BBA transparent transparent;        border-style: dashed solid dashed dashed;        border-width: 10px;    }    #tip s i {        position: absolute;        top: -10px;        left: -8px;        display: block;        width: 0px;        height: 0px;        font-size: 0px;        line-height: 0px;        border-color: transparent #fff transparent transparent;        border-style: dashed solid dashed dashed;        border-width: 10px;    }    #tip .t_box {        position: relative;        background-color: #CCC;        filter: alpha(opacity=50);        -moz-opacity: 0.5;        bottom: -3px;        right: -3px;    }    #tip .t_box div {        position: relative;        background-color: #FFF;        border: 1px solid #ACA899;        background: #FFF;        padding: 1px;        top: -3px;        left: -3px;    }    .tip {        width: 82px;        height: 82px;        border: 1px solid #DDD;    }

JS 代码

var tip = 'tip';    $(function() {        $('.' + tip).mouseover(function() {            var $tip = $('<div id="tip"><div class="t_box"><div><s><i></i></s><img width="500px" height="500px" src="' + this.src + '" /></div></div></div>');            $('body').append($tip);            $('#' + tip).show('fast');        }).mouseout(function() {            $('#' + tip).remove();        }).mousemove(function(e) {            $('#' + tip).css({                "top": (e.pageY - 60) + "px",                "left": (e.pageX + 30) + "px"            });        });    });

html 代码

<a href="JavaScript:void(0);"><img width="500px" height="500px" class="tip" src="img/img.jpg" /></a>

阅读全文

0 1