[英]How do I rotate an image on hover using jquery?
我試圖在懸停時旋轉“返回頂部”按鈕360度而不在鼠標上旋轉。 我已經嘗試了多種jQuery代碼，我發現但我仍然無法讓它工作。 這是我到目前為止的真實例子（CSS也在圖像之間懸停）。
我已經嘗試將jQuery更改為mouseenter ， mouseover ， hover以及包含和省略; rotate數后，無濟於事。 這是一個簡單的jQuery語法錯誤，我正在制作？
HTML：
<div class="scrollup">
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow"/>
</div>
CSS：
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover > .scrollImg1 {
opacity: 0;
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
JQuery的：
$(".scrollup").mouseover(function() {
$(".scrollup-circle").rotate(360);
});
你可以使用如下的jQuery來做到這一點
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> div.main{ width: 100px; height: 100px; } div.main img{ width: 100%; height: 100%; } .change{ -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); transition-duration: 5s; } </style> <body> <div class="main"> <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> </div> <p id="dis"></p> <script type="text/javascript"> $("div.main").mouseenter(function(){ $(this).addClass("change").delay(5000).queue(function(){ $(this).removeClass("change").dequeue(); }); }); </script> </body> </html>
注意:(之后）--->我在你上次評論中沒有得到你真正的要求。 但請試試這個問題:)。希望它會對你有所幫助。
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style type="text/css"> div.main{ width: 100px; height: 100px; } div.main img{ width: 100%; height: 100%; } .change{ -ms-transform: rotate(360deg); /* IE 9 */ -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); transition-duration: 5s; } .myopacity{ opacity: 0.6; } </style> <body> <div class="main"> <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> </div> <p id="dis"></p> <script type="text/javascript"> var thevalue = 1; $("div.main").mouseenter(function(){ thevalue = thevalue+1; if(thevalue%2==0) { $(this).addClass("myopacity"); } else { $(this).removeClass("myopacity"); } $(this).addClass("change").delay(5000).queue(function(){ $(this).removeClass("change").dequeue(); }); }); </script> </body> </html>
您可以使用css變換和旋轉動畫
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover{
}
.scrollup:hover > img {
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
您可以使用css animation ， .hover() ， animationend事件。 集animation-name元素的名稱@keyframes在.hover()事件處理程序，設置animation-name在元素的空字符串animationend事件
$(".scrollup") .hover(function() { $(this).css({"animationName":"rotate", "mozkitAnimationName":"rotate", "webkitAnimationName":"rotate"}); }) .on("animationend.rotate", function() { $(this).css({"animationName":"", "mozkitAnimationName":"", "webkitAnimationName":""}); });
.scrollup { width: 45px; height: 45px; display: block; margin-left: 50%; position: relative; cursor: pointer; animation-duration: 2s; -moz-animation-duration: 2s; -webkit-animation-duration: 2s; } .scrollup img { position: absolute; } .scrollImg2 { opacity: 0; } .scrollup:hover > .scrollImg1 { opacity: 0; } .scrollup:hover > .scrollImg2 { opacity: 1; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scrollup"> <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle" /> <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle" /> <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow" /> <img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow" /> </div>
如何使用jquery在鼠標懸停時僅替換圖像源的PART？
[英]How do I replace only PART of an image source on hover using jquery?
如何使用JavaScript在smartface，io IDE中旋轉此圖像？
[英]How do I rotate this image in the smartface,io IDE using javascript?
如何使用javascript或jquery隱藏懸停時的圖像路徑
[英]How can i hide the image path on hover using javascript or jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.