[英]How to add zoom and flip to an image using css/jquery
我試圖同時添加翻轉和縮放效果,但是我只能實現一種效果。
用例是當我單擊圖像時圖像將縮放,現在我需要在鼠標離開圖像之前添加翻轉效果。
誰能用我的代碼幫助我解決輸出問題。
這是我嘗試過的:
的HTML
<div class="flip">
<div class = 'card'>
<img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
</div>
的CSS
.zoom_img {
height: 250px;
width: 250px;
/* -moz-transition: -moz-transform 0.1s ease-in;
-webkit-transition: -webkit-transform 0.1s ease-in;
-o-transition: -o-transform 0.1s ease-in; */
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card .flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
Java腳本
$(document).ready(function() {
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
$(this).removeClass('zoom_img_press');
});
});
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
});
});
試試這個,我認為它將為您提供幫助。
具有多個轉換的類。
.zoom-flipper{
-moz-transform: scale(2.2) rotatex(-180deg);
-webkit-transform: scale(2.2) rotatex(-180deg);
-o-transform: scale(2.2) rotatex(-180deg);
transform: scale(2.2) rotatex(-180deg);
}
對應的腳本:
$('.flip').click(function(){
$(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
$(this).removeClass('zoom-flipper');
});
});
這是演示
創建兩個單獨的JavaScript函數,然后編寫jQuery代碼以操縱函數中圖像的CSS。 jQuery CSS操作代碼示例:
$(".className").css({"background-color":"black","font-size":"12px"});
您可以在大括號內設置任何css屬性。
然后,您可以在元素DOM事件上調用JavaScript函數。 因此,縮放函數將與onClick事件一起調用,而翻轉函數將在onMouseOut事件上進行調用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.