旋轉懸停，然後在點擊時保持該位置，再次單擊時返回到原始位置

我想讓圖像在懸停時旋轉180度。當圖像被點擊/選擇時，我希望圖像保持在該位置，直到它應該返回到其原始位置時再次被選擇。旋轉懸停，然後在點擊時保持該位置，再次單擊時返回到原始位置

我已經嘗試了CSS，它可以用於懸停，但不會持續。然後我發現了一些使用jQuery的帖子，但是在我選擇的例子中，我發現它非常基本，但是沒有足夠的理解它使圖像返回。

的HTML

<div class="conversionFormE" id="switch1"> 
    <label class="swapHide">Swap?</label> 
    <input type="button" class="rotate" id="switch" name="switch" value="" onclick="switchUnits()"/> 
</div>

一些CSS的

.rotate { 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 

    overflow:hidden; 
} 

.rotate:hover { 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
}

感謝您的幫助。

編輯：按要求的onClick函數。

function switchUnits(){ 

//need to get values before swap to and from around. 
var from = $("#from").val(); 
var to = $("#to").val(); 

//switches the details 
$("#to #"+from).attr("selected","selected"); 
$("#from #"+to).attr("selected","selected"); 

//gets values after switch 
from = $("#from").val(); 
to = $("#to").val(); 

//run convert 
convertUnits(); 
}

編輯：非常希望這能夠實現：可能對於圖像上懸停再次旋轉回到它原來的位置，而不需要點擊它？所以它會是：

在posA，懸停，旋轉，單擊，保持在posB。在posB中，，懸停，向後旋轉，單擊，再次停留在posA。

來源

2013-07-15 null

的'的onclick = 「switchUnits（）」'屬性指向一個JavaScript函數，你應該在你的問題中包含這個函數的代碼。 – mor

@ ricard.m.o。編輯 – null

我只是喜歡CSS3。 –

你可以像.rotate.rotated選擇剛剛添加到您的CSS .rotate:hover。這樣，當存在額外的類別rotated時，樣式也將被應用。

現在，您可以添加以下jQuery來切換上點擊那個類：

$('.rotate').click(function() { 
    $(this).toggleClass('rotated'); 
});

和示例：http://jsfiddle.net/MZhG5/

來源

2013-07-15 21:28:15 Pevara

小提琴完美工作，但是當我使用代碼時，它仍然不會「粘住」或保持一次點擊？ – null

你是否包含jQuery？你在瀏覽器的控制檯中是否有任何錯誤？ – Pevara

完全沒有錯誤，包括jquery，但它確實看起來像沒有被稱爲？！將函數移動到具有其他函數的文件中，因爲我知道該函數在那裏不起作用，然後將其移動到主文件中，但仍然沒有快樂？ – null

試試下面的代碼：

var clicked = 0; 
$(".rotate").click(function() { 
    clicked++; 
    if (clicked == 1) { 
     $(this).addClass("stay"); 
    } 
}).bind("mouseout", function() { 
    if (clicked == 2) { 
     $(this).removeClass("stay").addClass('normal'); 
     clicked = 0; 
    } 
});

的CSS：

.rotate:hover, .stay { 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
} 
.normal { 
    -webkit-transform:rotate(0deg)!important; 
    -moz-transform:rotate(0deg)!important; 
    -o-transform:rotate(0deg)!important; 
}

例子：http://jsfiddle.net/ScSHm/

來源

2013-07-15 21:24:41 Shawn31313

嗨，點擊後它不會保持在原來的位置嗎？ – null

這更像你想要它：http://jsfiddle.net/ScSHm/2/ – Shawn31313

我的方式是有點過於複雜，但。與@PeterVR相比 – Shawn31313

旋轉懸停，然後在點擊時保持該位置，再次單擊時返回到原始位置

回答

相關問題