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


HTML5公司网站发展时间轴特效代码下载
HTML5公司网站发展时间轴特效代码下载以及公司网站、发展时间轴等js/jquery网页特效代码下载。

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>

相关推荐

  • 大气的网络推广建站公司网站响应式模板

    网站模板代码下载:大气的网络推广建站公司网站响应式模板以及大气、网络推广、建站、公司网站、响应式模板等html网页模板代码下载。

    Border circle admin 2020-03-30 22:50:31 0 1 2

  • ui设计公司网站简洁大气的模板下载

    网站模板代码下载:ui设计公司网站简洁大气的模板下载以及ui设计公司网站、简洁大气、模板下载等html网页模板代码下载。

    Border circle admin 2020-03-30 22:41:37 0 0 8

发表评论

相关文章