1. 首頁
  2. 問答
  3. 如何使用jquery在懸停時旋轉圖像？

如何使用jquery在懸停時旋轉圖像？

2016-09-20 55 views
3

我想旋轉一個'回到頂部'按鈕360度懸停而沒有在mouseleave上旋轉。我已經嘗試了多種我已經找到的jQuery代碼的變體，但我仍然無法使其工作。以下是我迄今爲止獲得的真實示例（圖像之間的CSS懸停）。如何使用jquery在懸停時旋轉圖像？

我試圖改變的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); 
});

來源

2016-09-20 KingDesigns

+0

您可以使用兩個圖像，顯示已旋轉的面試結束後旋轉第一個，然後隱藏第一個？ –

+0

@PrashanthSubramanian懸停圖像比靜態圖像色調稍暗。只是我希望能夠有'scrollup-circle'圖像到'scrollup-textandarrow'圖像旋轉，懸停/的mouseenter /鼠標懸停360度旋轉，懸停/的mouseenter /鼠標懸停 – KingDesigns

回答

1

，您可以在使用jQuery像下面做

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 

 
div.main{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t 
 
} 
 

 
div.main img{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.change{ 
 
\t -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(){ 
 
\t $(this).addClass("change").delay(5000).queue(function(){ 
 
\t \t $(this).removeClass("change").dequeue(); 
 
\t }); 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

注：（之後）--->我沒有得到你在最後的評論真的問什麼。但試試這個你的評論問題:) .hope它會幫助你。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 

 
div.main{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t 
 
} 
 

 
div.main img{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.change{ 
 
\t -ms-transform: rotate(360deg); /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(360deg); 
 
    transition-duration: 5s; 
 
} 
 

 
.myopacity{ 
 
\t 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(){ 
 

 
\t thevalue = thevalue+1; 
 
\t if(thevalue%2==0) 
 
\t { 
 
\t \t $(this).addClass("myopacity"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t $(this).removeClass("myopacity"); 
 
\t } 
 

 
\t $(this).addClass("change").delay(5000).queue(function(){ 
 
\t \t $(this).removeClass("change").dequeue(); 
 
\t }); 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 

 
</body> 
 

 

 
</html>

來源

2016-09-20 03:50:27

+0

-360我想圖像旋轉每次鼠標進入元素。這是真棒，但添加類將只爲一個MouseEnter事件 – KingDesigns

+0

我正在它的工作，給我幾分鐘 –

+0

好，感謝@AnuradhS – KingDesigns

1

您可以使用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; 
}

來源

2016-09-20 03:53:06

+0

請看這裏的例子http://codepen.io/nguyenpc/pen/jrrJzm –

+0

這不是我所追求的，因爲對象將在mouseleave上取消旋轉。每次鼠標進入div時，我都希望圖像旋轉360度 – KingDesigns

0

您可以使用cssanimation，.hover()，animationend事件。在.hover()事件處理程序設置元素的@keyframes名animation-name，設置元素空字符串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>

來源

2016-09-20 05:07:11 guest271314

相關問題

 相關問題