將圖片傳輸到另一個div上;

我有一個div中的圖像集中到該div。我希望在用戶滾動一次之後圖像進入頁眉（滾動> 50）。

HTML：

<header> <div id="nav"> LINK LINK LINK </div> </header> 

<div id="main"> 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
</div>

CSS：

*{ 
    padding:0; 
    margin:0; 
    overflow-x:hidden; 
} 

#nav{float:right; line-height:70px;} 

header{ 
    width:100%; 
    position:fixed; 
    padding-left:10%; 
    padding-right:10%; 
    background:#fff; 
    height:70px; 
} 

#main{ 
    padding-top:100px; 
    text-align:center; 
    height:800px; 
    background:#3cb5f9;} 
#main img{width:200px; margin:0 auto;}

來源

2017-05-09 pHenomen

有一噸的方法可以做到這一點，但一個快速的方法來實現這一目標是複製的圖像，這樣有副本它在main和header中。加載時，將其隱藏在導航欄中。然後，有一個滾動事件監聽器，監聽>50的偏移量。

如果true，=>隱藏主圖像，並顯示導航圖像如果false =>顯示主圖像。並隱藏導航圖像。

另外值得注意的是，我更新了main的height爲200vh - 只是爲了模擬內容。這與答案無關。

$(function(){ 
 
    
 
$(window).bind('scroll', function(){ 
 
    
 
    if($(window).scrollTop() >= 50){ 
 
    $("#main img").hide(); 
 
    $("header img").show(); 
 
    }else{ 
 
    $("#main img").show(); 
 
    $("header img").hide(); 
 
    } 
 
    
 
}); 
 
    
 
    
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
#nav { 
 
    float: right; 
 
    line-height: 70px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    position: fixed; 
 
    padding-left: 10%; 
 
    padding-right: 10%; 
 
    background: #fff; 
 
    height: 70px; 
 
} 
 

 
header img { 
 
    display: none; 
 
    width: 50px; 
 
    margin: 0 auto; 
 
} 
 

 
#main { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
    height: 200vh; 
 
    background: #3cb5f9; 
 
} 
 

 
#main img { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div id="nav"> LINK LINK LINK </div> 
 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
 
    </header> 
 

 
    <div id="main"> 
 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
 
    </div> 
 
</body> 
 

 
</html>

外部Plunker：http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview

來源

2017-05-09 19:54:40 couzzi

將圖片傳輸到另一個div上;

回答

相關問題