js實(shí)現(xiàn)圖片勻速淡入淡出

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:54:02

js實(shí)現(xiàn)圖片勻速淡入淡出

js實(shí)現(xiàn)圖片勻速淡入淡出:這次給大家?guī)韏s實(shí)現(xiàn)圖片勻速淡入淡出，js實(shí)現(xiàn)圖片勻速淡入淡出的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8&q

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js實(shí)現(xiàn)圖片勻速淡入淡出:這次給大家?guī)韏s實(shí)現(xiàn)圖片勻速淡入淡出，js實(shí)現(xiàn)圖片勻速淡入淡出的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8&q

這次給大家?guī)韏s實(shí)現(xiàn)圖片勻速淡入淡出，js實(shí)現(xiàn)圖片勻速淡入淡出的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>淡入效果</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 p {
 border: 2px solid #aaa;
 }
 img {
 width: 300px;
 height: 300px;
 filter: alpha(opacity:30);
 opacity: .3;
 margin: 0 auto;
 }
 </style>
</head>
<body>
<p>
 <imgsrc="img/timg.jpg"alt=""id="img">
</p>
<script>
 var alpha=30;
 var img = document.getElementById("img");
 img.onmouseover=function(){
 startMove(100)
 };
 img.onmouseout=function(){
 startMove(30)
 }
 var timer;
 function startMove(tar) {
 var img = document.getElementById("img");
 clearInterval(timer);
 timer = setInterval(function () {
 var ispeed=0;
 ispeed= alpha<tar?5:-5;
 if(alpha==tar){
 clearInterval(timer)
 }
 else{
 alpha+=ispeed;
 img.style.filter="alpha(opacity:"+alpha+")";
 img.style.opacity=alpha/100;
 }
 }, 30)
 }
</script>
</body>
</html>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

js實(shí)現(xiàn)圖片勻速淡入淡出

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖片 js 淡入淡出

熱門焦點(diǎn)

js實(shí)現(xiàn)圖片勻速淡入淡出

js實(shí)現(xiàn)圖片勻速淡入淡出

js實(shí)現(xiàn)圖片勻速淡入淡出

最新推薦

猜你喜歡

熱門推薦