js實現圖片勻速淡入淡出
- php中世界最好的语言原創
- 2018-04-19 09:15:252301瀏覽
這次帶給大家js實現圖片勻速淡入淡出，js實現圖片勻速淡入淡出的注意事項有哪些，以下就是實戰案例，一起來看一下。
<!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> | #
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是js實現圖片勻速淡入淡出的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JS實作資料驗證與複選框表單提交下一篇：JS實作資料驗證與複選框表單提交