这有点烦人:我有一个div,即使在文档的其他位置,它也从窗口的左上角开始过渡。我尝试使用-webkit-transform-origin,但没有成功,可能是我使用不当。
有人能帮帮我吗? :)
这是代码...全部代码,但我已经注释了相关部分 - 主要在底部。
这是代码的实时版本。
<style>
#pool{
width:100%;
}
.clickable{
<!-- class of the element being transitioned -->
display:inline;
margin-right: 5px;
-webkit-transition: all 500ms ease;
position: absolute;
}
.profile_image{
border: solid 1px black;
-webkit-transition: all 500ms ease;
position:relative;
}
</style>
<section id="pool"></section>
<script>
var Cache = {};
Cache.hasItem = function(item_key){
if(!localStorage.getItem(item_key)){
return false;
}else{
return true;
}
}
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 = '<div id="'+i+'" class="clickable"><img class="profile_image" src="'+entry.user.profile_image_url+'"/></div>';
$("#pool").append(element);
}
</script>
<script>
$(".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});
})
</script>
结果: 在 jfriend00 的帮助下,我成功修复了它。以下是代码:
<style>
#pool{
width:100%;
display: inline;
}
.clickable{
display: inline-block;
margin-right: 5px;
position: scroll;
}
.profile_image{
border: solid 1px black;
}
</style>
而且Javascript:
<script>
$(".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});
})
</script>