如何使用百分比與jquery代碼懸停淡化

所以，我很新的網頁設計，我一直在尋找方法來創建一個網站，使用百分比（具體來說，33.333％或三分之一）將網站分成三部分，每個部門的內部都有一張圖片會在另一張圖片上褪色。如何使用百分比與jquery代碼懸停淡化

我花了一些時間找到jQuery代碼將會淡入淡出，但我堅持如何將代碼翻譯成使用百分比的網站。目前，圖像被卡住在一個特定的大小，否則他們開始重疊。基本上，我希望每個圖像佔用自動高度的三分之一頁面。

HTML;

<!DOCTYPE html> 
<html> 

<head> 

    <meta charset="utf-8" /> 
    <title>Portfolio</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 

<div class="images"> 

    <div id="1r1"> 
     <img src="images/TestImage1.jpg" alt="Asteroids" class="on"> 
     <img src="images/TestImageOff.jpg" alt="AsteroidsOff" class="off"> 
    </div> 

    <div id="2r1"> 
     <img src="images/TestImage2.jpg" alt="Asteroids" class="on"> 
     <img src="images/TestImageOff.jpg" alt="AsteroidsOff" class="off"> 
    </div> 

    <div id="3r1"> 
     <img src="images/TestImage3.jpg" alt="Asteroids" class="on"> 
     <img src="images/TestImageOff.jpg" alt="AsteroidsOff" class="off"> 
    </div> 

</div> 



<script src="js/lib/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="js/jquery.index.js" type="text/javascript"></script> 

</body> 
</html>

CSS;

body { 
margin: 0; 
} 

.images div { 
float: left; 
display: inline; 
position: relative; 
height: 500px; 
width: 500px; 
} 

.images div img.off { 
position: absolute; 
left: 0; 
top: 0; 
} 

.images div img.on { 
position: absolute; 
left: 0; 
top: 0; 
z-index: 99; 
}

jquery;

$(document).ready(function() { 
    // when hover over any div inside div with class=photos, find 
    // the grey image and change its opacity to 0 
    // opacity = 0 - invisible, opacity = 1 - completely opaque 
$('.images div').hover(
    function() { 
     $(this) 
     .find('img.on') 
     .stop() 
     .animate({ 'opacity': '0' }, 800); 
    }, 
    function() { 
     $(this) 
     .find('img.on') 
     .stop() 
     .animate({ 'opacity': '1' }, 800); 
    }); 

});

我覺得好像有一個簡單的解決方案，我只是非常不確定使用CSS元素來實現我想要的。謝謝你盡你所能的幫助。

來源

2014-11-08 Kevin Roys

你可以直接在CSS中使用百分比。這不會是第三個，但應該做的工作：

.images div { 
float: left; 
display: inline; 
position: relative; 
height: 500px; 
width: 33%; 
}

來源

2014-11-08 20:16:53 Maxime

如何使用百分比與jquery代碼懸停淡化

回答

相關問題