HTML5公司网站发展时间轴特效代码下载

HTML5公司网站发展时间轴特效代码下载

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/canvas-nest.min.js"></script>

3. HTML代码

<div class="wrap about_page" id="wrap">
  <div class="wrapper">
    <div class="header">
      <div class="head">
          <div class="nav_box">
            <ul class="nav_list" id="nav_list">
		 <li><a href="javascript:void(0);" onClick="play()" id="playbtn" class="btn_sound"></a></li>
		 <li><a href="#">主页</a></li>
		 <li><a href="">官网</a></li>
            </ul>
            <span class="ic_line" id="h_line"></span>
          </div>
      </div>
    </div>
    <div class="events_sec" id="events_sec">
      <div class="content">
        <h3 class="hide_txt png">sc.chinaz.com</h3>
        <div class="events_list">
          <span class="ic_time png"></span>
          <ul>
            <li class="right_li">
              <span class="ic_events png"></span>
              <p class="txt_events"><strong>事件1</strong></p>
            </li>
            <li class="left_li">
              <span class="ic_events"><i class="png"></i></span>
              <p class="txt_events"><strong>事件2</strong></p>
            </li>
            <li class="right_li">
              <span class="ic_events png"></span>
              <p class="txt_events"><strong>事件3</strong></p>
            </li>
            <li class="left_li">
              <span class="ic_events"><i class="png"></i></span>
              <p class="txt_events"><strong>事件4</strong></p>
            </li>
            <li class="right_li">
              <span class="ic_events png"></span>
              <p class="txt_events"><strong>事件5</strong></p>
            </li>
            <li class="left_li">
              <span class="ic_events"><i class="png"></i></span>
              <p class="txt_events"><strong>事件6</strong></p>
            </li>
          </ul>
          <span class="ic_arr png"></span>
        </div>
      </div>
    </div>
    <div class="wage_sec" id="wage_sec">
      <div class="content">
        <h3 class="tt_bg">网站介绍</h3>
		<center>
		<br><br><br>
		</center>
		<br><br><br>
      </div>
    </div>
    </div>
  </div>
<audio id="audios" controls="true" autoplay="autoplay" class="audio" style="display:none;"></audio>
<script>
var url=["",""];
var num = GetRandomNum(0,url.length-1);   
document.getElementById("audios").src="http://"+url[num];
function GetRandomNum(Min,Max)
{
var Range = Max - Min;   
var Rand = Math.random();   
return(Min + Math.round(Rand * Range));   
}   
function play(){
var div = document.getElementById('playbtn'); 
var obj=document.getElementById("audios");
if(obj.paused){
obj.play();
div.setAttribute("class", "btn_sound"); 
}else{
obj.pause();
div.setAttribute("class", "btn_sound btn_no_sound"); 
}
}
</script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到