html左滑效果图,前端福利——左滑右滑,绝对是你见过的最简单的写法 - 你猜猜看...
上个月使用bootstrap和seajs搭建了前端通用框架,就是为了使代码分块话,js和css直接通过配置就可调用,这样既方便了以后的开发,又方便了效率!
先看下框架图形吧
example就是手机端经常用到的示例
今天就是把我写的左滑右滑分享给大家,先看下图例吧
index.html代码
引用三个js
jquery.js
swiperhand.js
index.js
信息列表
我的信息
信息列表内容
我的信息内容
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
html左滑效果图,前端福利——左滑右滑,绝对是你见过的最简单的写法 - 你猜猜看...相关推荐
- android右滑返回动画,Android仿微信右滑返回功能的实例代码
先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. ...
- 仿抖音右滑清屏,左滑列表功能
概述 项目中要实现仿抖音直播间滑动清屏,侧滑列表的功能,在此记录下实现过程和踩坑记录希望避免大家走些弯路,也当作自己的一个总结 首先看下Demo中的效果 阅读文章需要提前熟悉些事件分发的内 ...
- Android手势滑动(左滑和右滑)
最近想实现Android左滑弹出菜单框,右滑消失菜单这个个功能.了解了一下Android 的滑动事件,必须是在view组件或者Activity上实现,同时必须实现OnTouchListener, On ...
- uniapp监测用户左滑右滑上滑下滑事件
定义组件 定义的该组件名称 swiper-direct-com(自己可以随便命名) <template><view class="wrapper" @touchs ...
- 【转】iOS右滑返回手势全解和最佳实施方案
序言 在ios7以后,苹果推出了手势滑动返回功能,也就是从屏幕左侧向右滑动可返回上一个界面.大大提高了APP在大屏手机和iPad上的操作体验,场景切换更加流畅.做右滑返回手势配置时,可能会遇到的 问题 ...
- 苹果侧边滑动返回_iOS系统右滑返回手势问题及解决方案
在iOS7之后,苹果推出了手势滑动返回功能,也就是从屏幕左侧向右滑动可返回上一个界面.大大提高了APP在大屏手机和iPad上的操作体验,场景切换更加流畅. 常见的问题有: 1.右滑手势失效 2.右滑手 ...
- android防止左向右滑出程序,Android向右滑动关闭Activity(高仿知乎微信)
先上一个效果图,不是很清晰,凑合看下. 大概效果就是,Activity向右滑动,滑动超过屏幕的一半,就关闭,否则,恢复原来的状态. 下面让我们来看下实现原理吧. 1.配置透明主题 要想Activity ...
- 【探花交友DAY 08】左滑不喜欢右滑喜欢以及附近的人
1. 探花功能 1.1 功能分析 探花功能是将推荐的好友随机的通过卡片的形式展现出来,用户可以选择左滑.右滑操作,左滑:"不喜欢",右滑:"喜欢".功能和现在市 ...
- 微信小程序 界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
最新文章
- 字体在ppt中可以整体替换吗_干货,做PPT时这样选择字体,瞬间提升幻灯片档次,看完你就懂了...
- 武大+CMU最新开源!全面支持平面/鱼眼/球面相机的实时统一线段检测算法
- cesium可视化空间数据2
- 题目1169:比较奇偶数个数
- Mysql升级过程的问题
- 银行业务队列简单模拟 (25 分)c语言c++
- Unity3d 在不同设备中的文件读写 的路径
- 智慧政务解决方案(28页)pdf_智慧政务解决方案在政务服务大厅中的应用
- java多个mapreduce_java – 在hadoop中运行多个MapReduce作业
- 定时器控件 Timer 1130
- 初探webpack之编写plugin
- Linux网络编程---htons函数的使用
- 微信下载录音文件(音轨分离 ffmpeg视频合成)
- 最简单的人脸识别系统搭建
- ZStack-2.6.2-c74 搭建私有云
- ttf,eot,woff,svg,字体格式介绍及使用方法
- 大数据时代数据资产管理“五星模型”:三个基础两个飞轮
- 计算机处理器的CPU主频与指令条数
- 软件架构设计原则-开闭、依赖倒置、单一职责、接口隔离、迪米特、里氏替换、合成复用,附Java语言示例讲解
- linux查看文件内容常用命令
热门文章
- centos sudo不能运行_如何在Linux中配置sudo访问权限
- Jmeter+ForEach控制器+BeanShell取样器+BeanShell PostProcessor爬取网站信息储存csv
- 详述白盒测试的逻辑覆盖的路径覆盖及其优缺点
- SpringBoot配置logback-spring.xml日志
- (转)递归转非递归的思路和例子
- Linux文件系统选择
- 每天一个linux命令(性能、优化):【转载】free命令
- C#学习之向量运算符重载
- iOS开发之通知中心(NSNotificationCenter)
- Entity Framework 4.1 : 贪婪加载和延迟加载