Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？

In lại 作者：可可西里 更新时间：2023-11-01 14:56:49 28 4
mua khóa gpt4 Nike

这有点烦人:我有一个 div，它从窗口的左上角开始过渡，即使它位于文档的其他任何位置。我试过 usign -webkit-transform-origin 但没有成功，也许我用错了。有人可以帮助我吗？ :)这是代码……全部，但我对相关部分进行了评论 - 主要位于底部。

Here's a live version of the code. 


    #pool{
        width:100%;

    }
    .clickable{
      
        display:inline;
        margin-right: 5px;
        -webkit-transition: all 500ms ease;
        vị trí: tuyệt đối;
    }

    .profile_image{
        border: solid 1px black;
        -webkit-transition: all 500ms ease;
        position:relative;
    }



    var Cache = {};
    Cache.hasItem = function(item_key){
        if(!localStorage.getItem(item_key)){
            trả về false;
        }khác{
            trả về giá trị đúng;
        }
    }   
    Cache.storeItem = function(key, value){
        localStorage.setItem(key, value);
    }
    Cache.fetch = function(key){
        return jQuery.parseJSON(localStorage.getItem(key));
    }
    Cache.clear = function(key){
        localStorage.removeItem(key);
    }

    var Twitter = {};
    Twitter.url = "http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
    Twitter.getFeed = function(){
        console.log("Fetching...");
        $.getJSON(Twitter.url, function(json){
            Cache.storeItem('feed',JSON.stringify(json));
        })
        .complete(function(){
               //to be implemented
            console.log("Completed");
        })
    }



        if(!Cache.hasItem('feed')){
            Twitter.getFeed();
        }

        var feed = Cache.fetch('feed');
        for(var i in feed){
            var entry = feed[i];
            var element = '
';
            $("#pool").append(element);
        }







    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

            /************HERE'S THE PROBLEM*******/
        parent.css('background-color','red');
        parent.css('display','inline');
        parent.css('position','fixed'); // tried absolute and inherit as well
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })

结果:在 jfriend00 的帮助下，我设法修复了它。这是代码:


    #pool{
        width:100%;
        display: inline;

    }
    .clickable{
        hiển thị: khối nội tuyến;
        margin-right: 5px;
        position: scroll;

    }

    .profile_image{
        border: solid 1px black;


    }

和 Javascript:


    $(".profile_image").click(function(e){
        var target = $(e.target);
        var parent = target.parent();

        targetOffset = target.offset();
        parentOffset = parent.offset();


        target.css('top',targetOffset.top-5);
        target.css('left',targetOffset.left-5);
        parent.css('top',parentOffset.top);
        parent.css('left',parentOffset.left);

        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var newWidth = 500;
        var newHeight = 100;
        var newX = (windowWidth-newWidth)/2;
        var newY = (windowHeight-newHeight)/3;

        parent.css('-webkit-transition', 'all 500ms ease');
        parent.css('background-color','red');
        parent.css('position','absolute');
        parent.css('z-index','3');
        parent.width(newWidth).height(newHeight).offset({top:newY, left:newX});


    })

1 Câu trả lời

在我看来，您在单击时将对象的位置从相对位置更改为固定位置(以及其他一些样式更改)。当您将其更改为固定时，该对象不再定位在页面流中，它会转到页面的左侧和顶部位置，看起来不像您已初始化 - 因此它们被设置为 (0, 0) 所以这就是当您将其位置更改为固定时对象跳转到的位置(页面顶部/左侧)。

如果您希望它们从原来的位置过渡，您将必须计算它们在页面上的原始位置，并在将位置设置为固定位置的同一代码中将顶部和左侧设置为这些值。

我假设 jQuery 有一个函数可以为您计算对象在页面中的绝对位置，因此您可以使用它(YUI 有这样一个函数，所以我假设 jQuery 可能也有)。由于您使用的是“固定”，您可能必须更正滚动位置或使用“绝对”而不是“固定”。这里的一个挑战是，您需要更改位置和顶部/左侧，而它们不受 CSS 转换的影响，因为您希望这些属性立即更改。然后，启用转换并设置最终位置。

关于javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6555602/

28 4 0
Bài viết được đề xuất: javascript - 获取动态 float div的宽度
Bài viết được đề xuất: python - 如何从 XPath 查询中的先前属性值中提取嵌入的属性值？
Bài viết được đề xuất: html - IE7 及更早版本中的溢出问题
Bài viết được đề xuất: c++ - 使用 DirectX 捕获屏幕
可可西里
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com