<!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>
<title>云微网</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link href="css/iscroll.css" rel="stylesheet" type="text/css" />
<link href="css/cate.css" rel="stylesheet" type="text/css" />
<style>
</style>
<script src="js/iscroll.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
/*
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
*/
}
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body>
<!--music-->
<style>
.btn_music {
display: inline-block;
width: 35px;
height: 35px;
background: url('images/play.png') no-repeat center center;
background-size: 100% auto;
position: absolute;
z-index: 100;
left: 15px;
top: 20px;
}
.btn_music.on {
background-image: url("images/stop.png");
}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
var playbox = (function(){
//author:eric_wu
var _playbox = function(){
var that = this;
that.box = null;
that.player = null;
that.src = null;
that.on = false;
//
that.autoPlayFix = {
on: true,
//evtName: ("ontouchstart" in window)?"touchend":"click"
evtName: ("ontouchstart" in window)?"touchstart":"mouseover"
}
}
_playbox.prototype = {
init: function(box_ele){
this.box = "string" === typeof(box_ele)?document.getElementById(box_ele):box_ele;
this.player = this.box.querySelectorAll("audio")[0];
this.src = this.player.src;
this.init = function(){return this;}
this.autoPlayEvt(true);
return this;
},
play: function(){
if(this.autoPlayFix.on){
this.autoPlayFix.on = false;
this.autoPlayEvt(false);
}
this.on = !this.on;
if(true == this.on){
this.player.src = this.src;
this.player.play();
}else{
this.player.pause();
this.player.src = null;
}
if("function" == typeof(this.play_fn)){
this.play_fn.call(this);
}
},
handleEvent: function(evt){
this.play();
},
autoPlayEvt: function(important){
if(important || this.autoPlayFix.on){
document.body.addEventListener(this.autoPlayFix.evtName, this, false);
}else{
document.body.removeEventListener(this.autoPlayFix.evtName, this, false);
}
}
}
//
return new _playbox();
})();
playbox.play_fn = function(){
this.box.className = this.on?"btn_music on":"btn_music";
}
</script>
<script type="text/javascript">
$(document).ready(function(){
playbox.init("playbox");
/*
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("playbox").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("playbox").dispatchEvent(e);
}
}, 2000);
*/
});
</script>
<span id="playbox" class="btn_music" onclick="playbox.init(this).play();"><audio id="audio" loop src="images/4.mp3"></audio></span><div class="banner">
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><p>背景图测试1</p><img src="images/1.jpg"></li><li><p>背景图测试2</p><img src="images/4.jpg"></li><li><p>背景图测试3</p><img src="images/9.jpg"></li><li><p>背景图测试5</p><img src="images/8.jpg"></li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
<div class="mainmenu">
<ul> <div id="insert1" ></div>
<li><a href="/" ><b><img src="images/tb01.png" /></b><span>关于我们</span></a></li>
<li><a href="/" ><b><img src="images/tb02.png" /></b><span>新闻中心</span></a></li>
<li><a href="/" ><b><img src="images/tb03.png" /></b><span>产品展示</span></a></li>
<li><a href="/" ><b><img src="images/tb04.png" /></b><span>成功案例</span></a></li>
<li><a href="/" ><b><img src="images/tb05.png" /></b><span>下载中心</span></a></li>
<li><a href="/" ><b><img src="images/tb06.png" /></b><span>人才招聘</span></a></li>
<li><a href="/" ><b><img src="images/tb07.png" /></b><span>联系我们</span></a></li>
<li><a href="/" ><b><img src="images/tb08.png" /></b><span>在线留言</span></a></li>
<div class="clr"></div>
<div id="insert2" ></div>
</ul>
</div>
<div style="display:none"> </div>
<script>
var count = document.getElementById("thelist").getElementsByTagName("img").length;
var count2 = document.getElementsByClassName("menuimg").length;
for(i=0;i<count;i++){
document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
}
document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
setInterval(function(){
myScroll.scrollToPage('next', 0,400,count);
},3500 );
window.onresize = function(){
for(i=0;i<count;i++){
document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
}
document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
}
</script>
<div class="copyright">
Copyright © 2014-2015 <a href="http://"></a> All rights reserved.</div>
<br>
<br>
<script>
function displayit(n){
for(i=0;i<4;i++){
if(i==n){
var id='menu_list'+n;
if(document.getElementById(id).style.display=='none'){
document.getElementById(id).style.display='';
document.getElementById("plug-wrap").style.display='';
}else{
document.getElementById(id).style.display='none';
document.getElementById("plug-wrap").style.display='none';
}
}else{
if($('#menu_list'+i)){
$('#menu_list'+i).css('display','none');
}
}
}
}
function closeall(){
var count = document.getElementById("top_menu").getElementsByTagName("ul").length;
for(i=0;i<count;i++){
document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display='none';
}
document.getElementById("plug-wrap").style.display='none';
}
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
</script> <style type="text/css">
body { margin-bottom:60px !important; }
a, button, input { -webkit-tap-highlight-color:rgba(255, 0, 0, 0); }
ul, li { list-style:none; margin:0; padding:0 }
.top_bar { position: fixed; z-index: 900; bottom: 0; left: 0; right: 0; margin: auto; font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif; }
.top_menu { display:-webkit-box; border-top: 1px solid #b3b3b3; display: block; width: 100%; background: rgba(255, 255, 255, 0.7); height: 48px; display: -webkit-box; display: box; margin:0; padding:0; -webkit-box-orient: horizontal; background: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9)); }
.top_bar .top_menu>li { -webkit-box-flex:1; background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1))); -webkit-background-size:1px 100%, 1px 100%; background-size:1px 100%, 1px 100%; background-position: 1px center, 2px center; background-repeat:
基于HTML实现的简单侧栏导航手机网站模板背景切换tml5手机网站微信网站(单页)(css+html+js+图样).zip
版权申诉
101 浏览量
2022-07-01
13:01:59
上传
评论
收藏 1.32MB ZIP 举报
基于HTML实现的简单侧栏导航手机网站模板背景切换tml5手机网站微信网站(单页)(css+html+js+图样).zip （44个子文件） 
(FZY020)简单侧栏导航手机网站模板背景切换tml5手机网站微信网站(单页) js 
iscroll.js 34KB jquery.min.js 81KB css cate.css 2KB iscroll.css 2KB
index.html 14KB images 
plugmenu3.png 910B stop.png 2KB plugmenu15.png 497B bottom.png 3KB plugmenu.png 234B tb04.png 1KB
noneimg.jpg 3KB jt.png 3KB plugmenu4.png 500B 1.jpg 85KB plugmenu7.png 668B tb06.png 3KB tb03.png 938B 4.mp3 792KB tb07.png 2KB plugmenu2.png 665B tb02.png 786B plugmenu9.png 945B tb01.png 874B play.png 2KB tb08.png 4KB plugmenu6.png 531B plugmenu11.png 696B 8.jpg 39KB tb05.png 2KB plugmenu14.png 463B plugmenu16.png 682B plugmenu13.png 577B plugmenu10.png 424B plugmenu17.png 1KB plugmenu18.png 747B plugmenu12.png 592B plugmenu8.png 854B plugmenu19.png 764B mesgIcon.png 3KB plugmenu5.png 700B 9.jpg 278KB 4.jpg 82KB plugmenu1.png 2KB资源评论
