JQuery鼠標移動上去顯示預覽圖


body中:

 <img src="../images/icon_view.gif" bigimg="../img.jpg" title="查看預覽圖" class="imgtip" />
<script type="text/javascript">
    //放大圖片
    $(function () {
        var x = 10;
        var y = 20;
        $(".imgtip").mouseover(function (e) {
            this.myTitle = this.title;
            this.title = "";
            var imgtip = "<div id='imgtip'><img src='" + $(this).attr("bigimg") + "' width='300' alt='預覽圖'/><\/div>"; //創建 div 元素
            $("body").append(imgtip); //把它追加到文檔中                         
            $("#imgtip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");   //設置x坐標和y坐標,並且顯示
        }).mouseout(function () {
            this.title = this.myTitle;
            $("#imgtip").remove();  //移除 
        }).mousemove(function (e) {
            $("#imgtip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
        });
    });
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM