工具提示视口验证

发布于 2024-12-07 21:45:50 字数 1315 浏览 2 评论 0原文

希望代码验证弹出窗口是否确实位于视口中。

类似 if (screenshotWidth + ScreenshotX > window.innerWidth) { // do stuff } 的东西,然后高度也一样,但据我所知。

谢谢。

this.screenshotPreview = function(){    
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                                
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#screenshot").remove();
    }); 
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};


// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

Want the code to validate if the popup is actually in the viewport or not.

somethinglike if (screenshotWidth + screenshotX > window.innerWidth) { // do stuff } and then same for height, but that's as far as i know.

thanks.

this.screenshotPreview = function(){    
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                                
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#screenshot").remove();
    }); 
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};


// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文