javascript跟隨鼠標生成圖片模態框

效果以下圖:
圖片描述html

代碼以下:app

<script>
    $('img').hover(
            function () {
                //得到相對於body的鼠標位置;
                var x = window.event.clientX+document.body.scrollLeft;
                var y = window.event.clientY+document.body.scrollTop;
                var html = '';
                html += '<div id="show" style="position: absolute; padding: 4px; border: 1px solid rgb(243, 243, 243); background-color: rgb(232, 236, 238); top: ' + y + 'px; z-index: 1000; left: ' + x + 'px; right: auto;">';
                html += '<img src="' + $(this).attr('src') + '">';
                html += '</div>';
                $('body').append(html);
            },
            function () {
                $('#show').remove();
            }
    );
</script>
相關文章
相關標籤/搜索