如何爲Rollover設置超時函數

下面是我的代碼，這是基本的問題任何人都可以幫助解決這個問題，我希望圖像在用戶懸停在某個時間之後出現。說的如3秒如何爲Rollover設置超時函數

  function MouseRollover(MyImage) { 
 
       MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg"; 
 
      } 
 

 
      function MouseOut(MyImage) { 
 
       MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg"; 
 
      }

<div align="center"> 
 
    <!--The rollover image displays here.--> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" /> 
 
</div>

來源

2016-11-16 Vijay

您可以設置函數內的setTimeout所以它不會改變圖像源3秒鐘，像下面。儘管在這個例子中，如果用戶在3秒之前停止懸停，那麼onMouseOut將在onMouseOver之前完成點火，這會讓用戶留下懸停的圖像。

<html> 
 
<head> 
 
<script language="javascript"> 
 
    function MouseRollover(MyImage) { 
 
     setTimeout(function(){ 
 
      MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif"; 
 
     }, 3000); 
 
    } 
 
    function MouseOut(MyImage) { 
 
     MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg"; 
 
    } 
 
</script> 
 
</head> 
 
<body> 
 
<div align="center"> 
 
<!--The rollover image displays here.--> 
 
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" 
 
border="0px" 
 
width="300px" height="auto" 
 
onMouseOver="MouseRollover(this)" 
 
onMouseOut="MouseOut(this)" /> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-16 01:07:54 JeremyS

確定，下面是一個腳本鼠標懸停後，這將改變圖像3秒。我稍微修改了你的代碼，因爲當腳本沒有嵌入到你的HTML中時，處理腳本要容易得多。希望這可以幫助。

const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg'; 
 
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg'; 
 
const img = document.querySelector('img'); 
 

 
img.addEventListener('mouseover', (e) => { 
 
    setTimeout(()=>{ 
 
    img.src = universe; 
 
    }, 3000); 
 
})

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div align="center"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg"> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-11-16 01:14:18 CarlosA

下面是一個例子，鼠標移到等待3秒鐘。

當鼠標離開，也復位..

var mrSmiley = document.querySelector('.img'); 
 
var timer; 
 
mrSmiley.onmouseenter = function() { 
 
    timer = setTimeout(function() { 
 
    mrSmiley.classList.add('img-3sec'); 
 
    }, 3000); 
 
} 
 
mrSmiley.onmouseleave = function() { 
 
    clearTimeout(timer); 
 
    mrSmiley.classList.remove('img-3sec'); 
 
}

.img { 
 
    cursor: pointer; 
 
    width: 128px; 
 
    height: 128px; 
 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>'); 
 
} 
 
.img-3sec { 
 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>'); 
 
}

Mouse over Mr Happy for 3 seconds.. 
 

 
<div class="img"> 
 
</div>

來源

2016-11-16 01:54:35 Keith

如何爲Rollover設置超時函數

回答

相關問題