简单侧栏导航手机网站模板背景切换tml手机网站微信网站(单页).zip资源-CSDN文库

共44个文件

png：33个

jpg：5个

css：2个

手机网站模板

wap模板

11 浏览量 2024-09-24 12:10:06 上传评论收藏 1.31MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

简单侧栏导航手机网站模板背景切换tml手机网站微信网站(单页).zip （44个子文件）

(FZY020)简单侧栏导航手机网站模板背景切换tml5手机网站微信网站(单页)

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

<!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>  <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:

评论收藏

内容反馈