你的位置:首页 > 网页设计

[网页设计]前端福利——左滑右滑,绝对是你见过的最简单的写法

上个月使用bootstrap和seajs搭建了前端通用框架,就是为了使代码分块话,js和css直接通过配置就可调用,这样既方便了以后的开发,又方便了效率!

先看下框架图形吧

 

example就是手机端经常用到的示例

 

今天就是把我写的左滑右滑分享给大家,先看下图例吧

index.html代码

引用三个js 

jquery.js

swiperhand.js

index.js

  
<div id="pagenos"> <span id="myspan0" onclick="show(0)">信息列表</span> <span id="myspan1" onclick="show(1)"> 我的信息</span> </div> <div id="youbiao"> </div> <div id="box"> <div id="content"> <div > 信息列表内容 </div> <div > 我的信息内容 </div> </div> </div>

  css 代码

  #pagenos {      position: fixed;      top: 0px;      left: 0px;      text-align: center;      font-family: '微软雅黑';      width: 100%;      z-index: 2;      background: #e7f8ff;      color:#686767;    }    #content {      left: 0;      -moz-transition-property: left;      -o-transition-property: left;      -webkit-transition-property: left;      transition-property: left;      -moz-transition-duration: 0.3s;      -o-transition-duration: 0.3s;      transition-duration: 0.3s;      -webkit-transition-duration: 0.3s;      overflow: hidden;      position: absolute;    }    .blk {      float: left;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      box-sizing: border-box;      width: 100%;      overflow: auto;    }    #box {      position: relative;      overflow: hidden;      width: 100%;      padding-top:40px;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      box-sizing: border-box;    }    #youbiao {      -moz-transition-property: left;      -o-transition-property: left;      transition-property: left;      -webkit-transition-property: left;      -moz-transition-duration: 0.3s;      -o-transition-duration: 0.3s;      transition-duration: 0.3s;      -webkit-transition-duration: 0.3s;      position: fixed;      top:38px;      height:2px;       left:0;      background: #008000;      z-index: 3;      box-sizing: border-box;    }      .myspan{	  padding: 10px 0;	  display: inline-block;	  text-align: center;	  font-size: 14px;  }

  swiperhand.js 代码

//左右滑动开始var handlstart = function () {  tag = '';  var e = arguments.callee.arguments[0] || window.event;  x = e.touches[0].pageX;  y = e.touches[0].pageY;  col = -curP * dqwidth;}addEvent(document, 'touchstart', handlstart);var handl = function () {  var e = arguments.callee.arguments[0] || window.event;  xc = e.touches[0].pageX;  yc = e.touches[0].pageY;  if (tag == '') {    if (Math.abs(x - xc) > Math.abs(y - yc)) {      tag = 1;      $('#content').css("webkitTransitionDuration", "0s");      $('#content').css("transitionDuration", "0s");      $('#youbiao').css("webkitTransitionDuration", "0s");      $('#youbiao').css("transitionDuration", "0s");    } else {      tag = 2;    }  }  if (tag == 1) {    $('#content').css("left", (col - x + xc) + 'px');    $('#youbiao').css("left", -(col - x + xc) / tabnum + 'px');    e.stopPropagation();    e.preventDefault();  }};addEvent(document, 'touchmove', handl);var handlend = function () {  if (tag == 1) {    $('#content').css("webkitTransitionDuration", "0.5s");    $('#content').css("transitionDuration", "0.5s");    $('#youbiao').css("webkitTransitionDuration", "0.5s");    $('#youbiao').css("transitionDuration", "0.5s");    if (Math.abs(x - xc) > 30) {      if (x - xc > 0) {        if (col - dqwidth < -(tabnum - 1) * dqwidth) {          var re = -curP * dqwidth;        } else {          var re = col - dqwidth;          curP++;        }      } else if (x - xc < 0) {        if (col + dqwidth > 0) {          var re = 0;        } else {          var re = col + dqwidth;          curP--;        }      }      for (var i = 0; i < tabnum; i++) {        $("#myspan" + i).css("color", defaultcolor);      }           $("#myspan" + curP).css("color", setcolor);      document.getElementById("content").style.left = re + 'px';      $('#youbiao').css("left", -re / tabnum);    } else {      document.getElementById("content").style.left = col + 'px';    }  }  tag = '';}addEvent(document, 'touchend', handlend);function addEvent(obj, type, fn){  if (obj.attachEvent) {    obj['e' + type + fn] = fn;    obj[type + fn] = function () { obj['e' + type + fn](window.event); }    obj.attachEvent('on' + type, obj[type + fn]);  } else {    obj.addEventListener(type, fn, false);  }}

  index.js 源码

var tabnum = 2;//设置默认标签页var curP = 0; //当前所属的标签页var dqwidth = document.documentElement.clientWidth;//屏幕的当前宽度var dqheight = document.documentElement.clientHeight;//屏幕的当前高度var defaultcolor = "#686767";//设置字体默认的颜色var setcolor = "#fdad03";//设置字体当前的颜色$(function () {  Init();})//初始化加载function Init() {  tabnum = $(".myspan").length;  //设置游标的宽度  $("#youbiao").css("width", parseInt(100 / parseInt(tabnum)) + "%");  $(".myspan").css("width", parseInt(100 / parseInt(tabnum)) - 1.5 + "%")  $("#myspan0").css("color", setcolor);  $('#content').width(dqwidth * tabnum);  $('.blk').width(dqwidth);  $('#box').css("height", dqheight + "px");  $('.blk').height(dqheight - $('#pagenos').height());}//点击菜单项加载function show(n) {  curP = n;  document.getElementById("content").style.left = -curP * dqwidth + 'px';  $('#youbiao').css({ "left": curP * dqwidth / tabnum });  for (var i = 0; i < tabnum; i++) {    $("#myspan" + i).css("color", defaultcolor);  }  $("#myspan" + n).css("color", setcolor);}

  

如果,想加菜单项,直接修改html就可以了,其他的js都不需要变动,比如,我现在想增加一个 test

 <div id="pagenos">  <!--在这里直接添加一个span-->    <span id="myspan2" onclick="show(2)"> test</span>  </div> <div id="box">    <div id="content"> <!--在这里直接添加一个blk-->      <div > test</div>    </div>  </div>

  如下图所示:

 

写个文档不容易啊,领导让把这个框架改到极致,让新手拿过来就用,哎。。。。前端开发真辛苦,如果,点赞超过100,我将奉献我的框架,说到做到!

这对于写移动端的用户来说,绝对是极大的福利!