知向前端
首页
微语
登录
使用原生js实现淡入淡出效果实例
2015-5-15 Jon
淡入淡出效果，一般使用jquery很方便实现实现，如下
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8" /><br /> <title>使用jquery实现淡入淡出</title><br /> <style><br /> body {padding:10px 200px;color:#777; background:#222}<br /> button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;cursor: pointer;}<br /> button:hover {border:1px solid #fff; background:#d9d9d9; color:#333;}<br /> #fade {display: none; border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}<br /> #fade:hover{color:#eee;}<br /> </style><br /> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br /> </head><br /> <body><br /> <button id="fadein">Fade In</button><br /> <button id="fadeout">Fade Out</button><br /> <div id="fade"><br /> 写信告诉我今天 海是什么颜色<br><br /> 夜夜陪着你的海 心情又如何<br><br /> 灰色是不想说 蓝色是忧郁<br><br /> 而漂泊的你 狂浪的心 停在哪里<br><br /> 写信告诉我今夜<br><br /> 你想要梦什么 梦里外的我是否<br><br /> 都让你无从选择 我揪着一颗心<br><br /> 整夜都闭不了眼睛 为何你明明动了情<br><br /> 却又不靠近 听 海哭的声音<br><br /> 叹惜着谁又被伤了心 却还不清醒<br><br /> 一定不是我 至少我很冷静 可是泪水<br><br /> 就连泪水 也都不相信 听海哭的声音<br><br /> 这片海未免也太多情 悲泣到天明<br><br /> 写封信给我 就当最后约定<br><br /> 说你在离开我的时候 是怎样的心情<br><br /> 写信告诉我今夜 你想要梦什么<br><br /> 梦里外的我是否 都让你无从选择<br><br /> 我揪着一颗心 整夜都闭不了眼睛<br><br /> 为何你明明动了情 却又不靠近<br><br /> 听 海哭的声音 叹惜着谁又被伤了心<br><br /> 却还不清醒 一定不是我<br><br /> 至少我很冷静 可是泪水<br><br /> 就连泪水也都不相信 听海哭的声音<br><br /> 这片海未免也太多情 悲泣到天明<br><br /> 写封信给我 就当最后约定<br><br /> 说你在离开我的时候 是怎样的心情<br /> </div><br /> <script><br /> $(function(){<br /> var oFade=$('#fade');<br /> $('#fadein').click(function(){<br /> oFade.fadeIn('2000');<br /> });<br /> $('#fadeout').click(function(){<br /> oFade.fadeOut('2000');<br /> });<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
但是如果只是实现一个小小的功能，也要引入jquery，那就小题大做了，看看原生js怎么实现淡入淡出的效果的
<br /> <!DOCTYPE html><br /> <head><br /> <meta charset="utf-8" /><br /> <title>js代码控制元素简单的淡入淡出效果</title><br /> <style><br /> body {padding:50px 200px;color:#777; background:#222}<br /> button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;}<br /> button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}<br /> #fade {opacity:0; filter:alpha(opacity='0');border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}<br /> #fade:hover{color:#eee;}<br /> </style><br /> </head><br /> <body><br /> <div id="wrap"><br /> <button onclick="fadeEffect.init('fade', 1)">Fade In</button><br /> <button onclick="fadeEffect.init('fade', 0)">Fade Out</button><br /> <div id="fade"><br /> 闭上眼看见天堂<br><br /> 那是藏着你笑的地方<br><br /> 我躲开无数个猎人的枪<br><br /> 赶走坟墓爬出的忧伤<br><br /> 为了你,我变成狼人摸样<br><br /> 为了你,染上了疯狂<br><br /> 为了你,穿上厚厚的伪装<br><br /> 为了你,换了心肠<br><br /> 我们还能不能再见面<br><br /> 我在佛前苦苦求了几千年<br><br /> 愿意用几世换我们一世情缘<br><br /> 希望可以感动上天<br /> </div><br /> <script><br /> var fadeEffect=function(){<br /> return{<br /> init:function(id, flag, target){<br /> this.elem = document.getElementById(id);<br /> clearInterval(this.elem.si);<br /> this.target = target ? target : flag ? 100 : 0;<br /> this.flag = flag || -1;<br /> this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;<br /> this.si = setInterval(function(){fadeEffect.tween()}, 20);<br /> },<br /> tween:function(){<br /> if(this.alpha == this.target){<br /> clearInterval(this.si);<br /> }else{<br /> var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);<br /> this.elem.style.opacity = value / 100;<br /> this.elem.style.filter = 'alpha(opacity=' + value + ')';<br /> this.alpha = value<br /> }<br /> }<br /> }<br /> }();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
下面也是使用js实现，并将其封装成了函数，直接调用即可
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8" /><br /> <title>js封装淡入淡出效果实例</title><br /> <style><br /> body {padding:10px 200px;color:#777; background:#222}<br /> button {border:1px solid #eee; background:#ccc;border-radius:3px;width:145px;color:#555;line-height: 25px;}<br /> button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}<br /> #fade {opacity:0; filter:alpha(opacity='0');border-radius:3px;margin-top:10px;padding:10px; border:1px solid #548954; background:#355c33; color:#aaa; text-shadow:1px 1px #21341d;line-height: 35px;text-align: center;transition: 300ms;}<br /> #fade:hover{color:#eee;}<br /> </style><br /> <script><br /> var iBase = {<br /> Id: function(name){<br /> return document.getElementById(name);<br /> },<br /> //设置元素透明度,透明度值按IE规则计,即0~100<br /> SetOpacity: function(ev, v){<br /> ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;<br /> }<br /> }<br /> //淡入效果(含淡入到指定透明度)<br /> function fadeIn(elem, speed, opacity){<br /> /*<br /> * 参数说明<br /> * elem==>需要淡入的元素<br /> * speed==>淡入速度,正整数(可选)<br /> * opacity==>淡入到指定的透明度,0~100(可选)<br /> */<br /> speed = speed || 20;<br /> opacity = opacity || 100;<br /> //显示元素,并将元素值为0透明度(不可见)<br /> elem.style.display = 'block';<br /> iBase.SetOpacity(elem, 0);<br /> //初始化透明度变化值为0<br /> var val = 0;<br /> //循环将透明值以5递增,即淡入效果<br /> (function(){<br /> iBase.SetOpacity(elem, val);<br /> val += 5;<br /> if (val <= opacity) {<br /> setTimeout(arguments.callee, speed)<br /> }<br /> })();<br /> }<br /> //淡出效果(含淡出到指定透明度)<br /> function fadeOut(elem, speed, opacity){<br /> /*<br /> * 参数说明<br /> * elem==>需要淡入的元素<br /> * speed==>淡入速度,正整数(可选)<br /> * opacity==>淡入到指定的透明度,0~100(可选)<br /> */<br /> speed = speed || 20;<br /> opacity = opacity || 0;<br /> //初始化透明度变化值为100<br /> var val = 100;<br /> //循环将透明值以5递减,即淡出效果<br /> (function(){<br /> iBase.SetOpacity(elem, val);<br /> val -= 5;<br /> if (val >= opacity) {<br /> setTimeout(arguments.callee, speed);<br /> }else if (val < 0) {<br /> //元素透明度为0后隐藏元素<br /> elem.style.display = 'none';<br /> }<br /> })();<br /> }<br /> </script><br /> </head><br /> <body><br /> <button id="fadein">Fade In</button><br /> <button id="fadeout">Fade Out</button><br /> <div id="fade"><br /> 如果骄傲没被现实大海冷冷拍下<br><br /> 又怎会懂得要多努力<br><br /> 才走得到远方<br><br /> 如果梦想不曾坠落悬崖<br><br /> 千钧一发<br><br /> 又怎会晓得执着的人<br><br /> 有隐形翅牓<br><br /> 把眼泪装在心上<br><br /> 会开出勇敢的花<br><br /> 可以在疲惫的时光<br><br /> 闭上眼睛闻到一种芬芳<br><br /> 就像好好睡了一夜直到天亮<br><br /> 又能边走着边哼着歌<br><br /> 用轻快的步伐<br><br /> 沮丧时总会明显感到孤独的重量<br><br /> 多渴望懂得的人给些温暖借个肩膀<br><br /> 很高兴一路上我们的默契那么长<br><br /> 穿过风又绕个弯心还连着<br><br /> 像往常一样<br><br /> 最初的梦想紧握在手上<br><br /> 最想要去的地方<br><br /> 怎么能在半路就放<br><br /> 最初的梦想绝对会到达<br><br /> 实现了真的渴望<br><br /> 才能够算到过了天堂<br><br /> 绝对会到达<br /> </div><br /> <script><br /> var fade=document.getElementById('fade');<br /> var fadein=document.getElementById('fadein');<br /> var fadeout=document.getElementById('fadeout');<br /> fadein.onclick=function(){<br /> fadeIn(fade,20,100);<br /> };<br /> fadeout.onclick=function(){<br /> fadeOut(fade,20,0);<br /> };<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
下面写一个完整的案例，返回顶部的按钮
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>js平滑返回顶部效果、淡入淡出</title><br /> <style><br /> body{padding:20px 200px;background: #555;color:#eee;text-align: center;line-height: 40px;}<br /> #up {<br /> width: 54px;<br /> height: 54px;<br /> background: url(https://yuanqiao.pw/content/templates/default/images/to_top.gif) no-repeat 0 0;<br /> filter: alpha(Opacity=0);<br /> -moz-opacity: 0;<br /> opacity: 0;<br /> position: fixed;<br /> bottom: 80px;<br /> right: 30px;<br /> cursor: pointer;<br /> display: none;<br /> }<br /> #up:hover {<br /> filter: alpha(Opacity=100) !important;<br /> -moz-opacity: 1 !important;<br /> opacity: 1 !important;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div style="height:3000px;"><br /> 苦涩的沙 吹痛脸庞的感觉<br /><br /> 像父亲的责骂 母亲的哭泣<br /><br /> 永远难忘记<br /><br /> 年少的我 喜欢一个人在海边<br /><br /> 卷起裤管光着脚丫踩在沙滩上<br /><br /> 总是幻想海洋的尽头有另一个世界<br /><br /> 总是以为勇敢的水手是真正的男儿<br /><br /> 总是一副弱不禁风孬种的样子<br /><br /> 在受人欺负的时候总是听见水手说<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要怕 至少我们还有梦<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要问 为什么<br /><br /> 长大以后 为了理想而努力<br /><br /> 渐渐的忽略了 父亲母亲和<br /><br /> 故乡的消息<br /><br /> 如今的我 生活就像在演戏<br /><br /> 说着言不由衷的话戴着伪善的面具<br /><br /> 总是拿着微不足道的成就来骗自己<br /><br /> 总是莫名其妙感到一阵的空虚<br /><br /> 总是靠一点酒精的麻醉才能够睡去<br /><br /> 在半睡半醒之间仿佛又听见水手说<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要怕 至少我们还有梦<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要问 为什么<br /><br /> <br><br /> <music></music><br /> </br><br /> 寻寻觅觅寻不到 活着的证据<br /><br /> 都市的柏油路太硬 踩不出足迹<br /><br /> 骄傲无知的现代人 不知道珍惜<br /><br /> 那一片被文明糟踏过的海洋和天地<br /><br /> 只有远离人群才能找回我自己<br /><br /> 在带着咸味的空气中自由的呼吸<br /><br /> 耳畔又传来汽笛声和水手的笑语<br /><br /> 永远在内心的最深处听见水手说<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要怕 至少我们还有梦<br /><br /> 他说风雨中这点痛算什么<br /><br /> 擦干泪不要问 为什么<br /> </div><br /> <script><br /> var fadeEffect=function(){<br /> return{<br /> init:function(id, flag, target){<br /> this.elem = document.getElementById(id);<br /> clearInterval(this.elem.si);<br /> this.target = target ? target : flag ? 60 : 0;<br /> this.flag = flag || -1;<br /> this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;<br /> this.si = setInterval(function(){fadeEffect.tween()}, 60);<br /> },<br /> tween:function(){<br /> if(this.alpha == this.target){<br /> clearInterval(this.si);<br /> }else{<br /> var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);<br /> this.elem.style.opacity = value / 100;<br /> this.elem.style.filter = 'alpha(opacity=' + value + ')';<br /> this.alpha = value<br /> }<br /> }<br /> }<br /> }();<br /> (function(){<br /> var oBody=document.getElementsByTagName('body')[0];<br /> var oUp = document.createElement("div");<br /> oUp.setAttribute("id","up");<br /> oBody.appendChild(oUp);<br /> oUp.style.display='none';<br /> window.onscroll = function(){<br /> var t = document.documentElement.scrollTop || document.body.scrollTop;<br /> if( t >= 300 ) {<br /> if(oUp.style.display=='none'){<br /> oUp.style.display='block';<br /> fadeEffect.init("up", 1);<br /> }<br /> } else {<br /> if(oUp.style.display=='block'){<br /> fadeEffect.init("up", 0);<br /> oUp.style.display='none';<br /> }<br /> }<br /> }<br /> var currentPosition,timer;<br /> oUp.onclick=function(){<br /> timer=setInterval(toTop,6);<br /> };<br /> function toTop(){<br /> currentPosition=document.documentElement.scrollTop || document.body.scrollTop;<br /> currentPosition-=50;<br /> if(currentPosition>0){<br /> window.scrollTo(0,currentPosition);<br /> }else{<br /> window.scrollTo(0,0);<br /> clearInterval(timer);<br /> }<br /> }<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容