源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js控制淡入淡出示例代码

  • 时间:2022-04-08 01:07 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js控制淡入淡出示例代码
相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键。
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body {margin:0;padding:0;color:#000000;} #div_test { width: 100%; height: 100%; background-color: #000000; position:absolute; filter:Alpha(Opacity=0) } </style> <script type="text/javascript"> var i = 100; function $(id) {return document.getElementById(id);} function chang_display() { i--; var div = $('div_test'); div.style.filter = "Alpha(Opacity="+i+")"; div.style.opacity = i / 100; if ( i== "0") {document.getElementById('div_test').style.display="none";//隐藏 exit } } /*控制div隐藏*/ function hid() { setInterval(chang_display, 1); } </script> </head> <body> <div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div> <div><a href="http://bbs.csdn.com">123</a>123123</div> </body> <script defer="defer"> var j = 0; function $(id) {return document.getElementById(id);} function turn_display() { j++; var div = $('div_test'); div.style.filter = "Alpha(Opacity="+j+")"; div.style.opacity = j / 100; if ( j== "0") {document.getElementById('div_test').style.display="none";//隐藏 exit } } setInterval(turn_display, 1); </script> </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部