[英]how to create smooth mouseover of an img in a div
我想使img.icon_zoom(第4行)僅在鼠標懸停時顯示。 此圖像將是我想要獲得的效果。 因此,一旦客戶端將鼠標懸停,圖標將逐漸淡入。 后面的圖片是一個鏈接,如果單擊該鏈接將打開一個保管箱,其鏈接是通過class =“ piczoom”鏈接的。 我應該怎么做?!?!
這是我的實際代碼。 前4行有趣的部分:
<div id="tab1">
<div class="usual">
<a class="piczoom" href="_img/prensa/DOC2.jpg"><img alt="" src="./_img/prensa/photo_zoom.jpg" class="photo_zoom" /></a>
<img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
</div>
<article>
<p class="p_title1"><img src="./_img/prensa/medio.png" alt="" /></p>
<img class="under1" src="./_img/prensa/underline.png" alt="" />
<p class="p_text">Revista la Moraleja</p>
<br>
<br>
<p class="p_title2"><img src="./_img/prensa/description.png" alt="" /></p>
<img class="under2" src="./_img/prensa/underline.png" alt="" />
<p class="desc_txt" class="p_text">Entrevista realizada por Antonio Corales. Visitaron el estudio mientras se realizaba los preparativos previos a la exposicion de Santander. Esta entrevista fue publicado en las tres primera paginas de la revista. hola
</p>
<br>
<div class="quote_box">
<img class="quote_left" src="./_img/prensa/quote.left.png" alt="" />
<p class="quote">Sus colores y textura te imnotizanaran</p>
<img class="quote_right" src="./_img/prensa/quote.right.png" alt="" />
</div>
</article>
</div>
它是針對期末學校項目的,所以我非常感謝!
由於您想要平滑,因此您可能希望預加載圖像,因此請添加到CSS ...
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
在您的html的底部...
<div id="preloaded-images">
<img src="path/to/my-image.png" width="1" height="1" alt="" />
</div>
然后添加一些jQuery來淡化您的圖像...
$('#mydiv').hover(function () {
$('#imageId').fadeIn('slow', function() {});
},
function () {
$('#imageId').fadeOut('slow', function() {});
});
最后,我找到了答案以及得到的答案。 謝謝大家...
我創建了一個代碼,因此一旦加載頁面,圖標就會淡入淡出,如果鼠標懸停,則淡入淡出和FadeOut將開始工作。 這是我對任何好奇的人的代碼,謝謝!!!!
<script type="text/javascript">
/*JQ Fancybox for zoom foto*/
$(document).ready(function() {
$("a.piczoom").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
/*JQ to fade in on load*/
$('.icon_zoom').hide().fadeIn(3000);
/*JQ after load to work with hover*/
$('.pic_zoom_box').hover(function () {
$('.icon_zoom').fadeIn('slow', function() {});
},
function () {
$('.icon_zoom').fadeOut('slow', function() {});
});
});
</script>
<div class="pic_zoom_box" class="usual">
<a class="piczoom" href="_img/prensa/2_Cutted_zoom/diario_montanes/el_diario_Montanes.jpg">
<img alt="" src="_img/prensa/3_Cutted_preview/diario_montanes/el_diario_montanes.jpg" class="photo_zoom" />
<img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
</a>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.