自動滾動圖像高於容器上的懸停

我想要一個腳本/ CSS懸停在比它所在的容器更高的圖像將在容器內自動滾動，並將在懸停出來時回到原來的位置。我真的很糟糕的JavaScript仍然我找到了一個代碼，但它似乎並沒有工作。自動滾動圖像高於容器上的懸停

的HTML

<span class="komal dhiraj"> 
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>

的CSS

.komal { 
border-radius: 5px 5px 5px 5px; 
float: left; 
height: 80px; 
margin-left: 3px; 
overflow: hidden; 
position: relative; 
width: 300px; 
border:5px solid #DDD;} 
img { 
position: absolute; 
transition: top 1s ease-out 0s;}

的JS

$(document).ready(function() { 
var xH 
$('.dhiraj').hover(
function() { 
xH = $(this).children("img").css("height"); 
xH = parseInt(xH); 
xH = xH - 150; 
xH = "-" + xH + "px"; 
$(this).children("img").css("top",xH); 
}, function() { 
$(this).children("img").css("top","0px"); 
} 
); 
});

我在http://jsfiddle.net/VuTYx/1/

創造的jsfiddle一個小例子請幫幫我。

來源

2013-11-04 Dhiraj Barnwal

這是你想要的嗎？ http://jsfiddle.net/VuTYx/3/你似乎錯過了jQuery – VenomVendor

你的JS似乎一直在工作，但代碼包含jQuery，而小提琴沒有啓用jQuery。我啓用了jQuery和它看起來像你描述的工作：通過添加類似http://jsfiddle.net/VuTYx/2/

確保jQuery是正確包含在你的項目：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

來源

2013-11-04 12:45:44

我的錯。其中一種CSS樣式有問題。感謝您的幫助。 –

很高興你找到了罪魁禍首。祝你好運。 –

不需要jquery只需使用Css 請參閱http://jsfiddle.net/modaloda/Pb3np/1/ –

不需要jQuery的只有使用CSS

看這link

唯一的CSS：

.komal { 
border-radius: 5px 5px 5px 5px; 
float: left; 
height: 80px; 
margin-left: 3px; 
overflow: hidden; 
position: relative; 
width: 300px; 
border:5px solid #DDD; 
} 
img { 
position: absolute; 
transition: all 0.2s ease 0s; 
} 

.komal:hover >img 
{ 
-moz-animation: border-bounce 3000ms linear; 
-webkit-animation: border-bounce 3000ms linear; 
} 
@-moz-keyframes border-bounce { 
0% { margin-top: -10px; } 
25% { margin-top: -50px; } 
50% { margin-top: -100px; } 
75% { margin-top: -50px; } 
100% { margin-top: -0px; } 
} 
@-webkit-keyframes border-bounce { 
0% { margin-top: -10px; } 
25% { margin-top: -50px; } 
50% { margin-top: -100px; } 
75% { margin-top: -50px; } 
100% { margin-top: -0px; } 
}

來源

2013-11-04 13:02:41

Bravo！謝謝你把它加起來。 –

但它可以在所有主流瀏覽器上運行嗎？ –

CSS3是一種解決方案，但請記住，每種瀏覽器都需要不同的方法。例如，您的解決方案對我無效，因爲我沒有在FireFox中瀏覽。這種方法也不適用於舊版本的IE。 –

自動滾動圖像高於容器上的懸停

回答

相關問題