首页 / JAVASCRIPT / 移动端横向滑屏和“橡皮筋”特效实例代码

移动端横向滑屏和“橡皮筋”特效实例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了移动端横向滑屏和“橡皮筋”特效实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7648字，纯文字阅读大概需要11分钟。

内容图文

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<script type="text/javascript">
(function(){
setSize();
window.onresize = setSize;
function setSize(){
var html = document.documentElement;
var htmlW = html.clientWidth;
html.style.fontSize = htmlW / 16 + "px";
}
})();
</script>
<title>Document</title>
<style type="text/css">
body {
margin: 0;
background: #ccc;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navWrap {
position: relative;
border-bottom: 1px solid #000;
background: #f1f1f1;
height: 2.4rem;
overflow: hidden;
}
#navs {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
#navs li {
display: inline-block;
font: .8rem/2.4rem "宋体";
padding: 0 1rem;
}
#navs li:nth-of-type(1) {
background: #fff;
}
#navs li:nth-last-of-type(1) {
background: #fff;
}
#navs a {
text-decoration: none;
color: #000;
}
</style>
<script type="text/javascript" src="js/startmove.js?1.1.11"></script>
</head>
<body>
<nav class="navWrap">
<ul id="navs">
<li class="active"><a href="javascript:;" target="_blank">首页</a></li><li><a href="javascript:;" target="_blank">MV</a></li><li><a href="javascript:;" target="_blank">悦单</a></li><li><a href="javascript:;" target="_blank">V榜</a></li><li><a href="javascript:;" target="_blank">音乐</a></li><li><a href="javascript:;" target="_blank">商城</a></li><li><a href="javascript:;" target="_blank">节目</a></li><li><a href="javascript:;" target="_blank">饭团</a></li><li><a href="javascript:;" target="_blank">咨询</a></li><li><a href="javascript:;" target="_blank">商城</a></li><li><a href="javascript:;" target="_blank">节目</a></li><li><a href="javascript:;" target="_blank">饭团</a></li><li><a href="javascript:;" target="_blank">咨询</a></li><li><a href="javascript:;" target="_blank">我的家</a></li><li><a href="javascript:;" target="_blank">APP下载</a></li><li><a href="javascript:;" target="_blank">热门应用</a></li>
</ul>
</nav>
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
e.preventDefault();
});
(function(){
var navWrap = document.querySelector('.navWrap');
var navs = document.querySelector('#navs');
var start,startEl,lastTime,lastDis,lastSpeed;
var min = 0;
var max = 0;
var TC = .25;//拉力系数
/*
lastTime 上一次时间
lastDis 上一次位置
lastSpeed 上一次速度
*/
navWrap.addEventListener('touchstart', function(e) {
var touch = e.changedTouches[0];
start = touch.pageX;
startEl = css(navs,"left");
lastTime = Date.now();
lastDis = touch.pageX;
min = navWrap.clientWidth - navs.offsetWidth;
});
navWrap.addEventListener('touchmove', function(e) {
var touch = e.changedTouches[0];
var now = touch.pageX;
var x = now - start + startEl;
var nowTime = Date.now();
if(x > max){
x *= TC;
} else if(x < min) {
// 位移的幅度为什么没有减小？
x = (x - min)*TC + min;
}
css(navs,"left",x);
lastSpeed = (touch.pageX - lastDis)/(nowTime - lastTime);
//得到上一次和这一次的滑动速度
lastDis = touch.pageX;
lastTime = nowTime;
});
navWrap.addEventListener('touchend', function(e) {
//console.log(lastSpeed);//最后一次滑动的速度
/* 速越快，缓冲的距离越大 */
if(Date.now() - lastTime > 100){
//如果最后一次的move时间和我抬起的时候，相差比较大，说明我在抬起之前，有一定时间没有移动过，那松手之后，也应该保持不动
lastSpeed = 0;
}
lastSpeed = Math.abs(lastSpeed) < .1?0:lastSpeed;
var translate = lastSpeed * 200;//这是要缓冲出去距离
translate = Math.abs(translate) > 1000?1000*(translate/Math.abs(translate)):translate;
var target = translate + css(navs,"left");
var type = "easeOutStrong";
if(target > max){
target = 0;
type = "backOut";
} else if(target < min){
target = min;
type = "backOut";
}
var time = Math.abs((target -css(navs,"left")) * 1.3);
time = (time>0&&time<200)?200:time;
console.log(time);
startMove({
el:navs,
target: {
left: target
},
time: time,
type: type
});
});
})();
</script>
</body>
</html>

//动画形式公式
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
easeIn: function(t, b, c, d){
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
// 获取或者设置样式
function css(el,attr,val){
if(arguments.length == 2){
if(el.currentStyle){
val = el.currentStyle[attr];
} else {
val = getComputedStyle(el)[attr];
}
return parseFloat(val);
} else {
if(attr == "opacity"){
el.style.opacity = val;
el.style.filter = "alpha(opacity= "+val*100+")";
} else if(attr == "zIndex"){
el.style[attr] = Math.round(val);
}else {
el.style[attr] = val + "px";
}
}
}
//执行动画
function startMove(init){
clearInterval(init.el.timer);
var t = 0;
var b = {};
var c = {};
var d = init.time/20;
for( var s in init.target){
b[s] = css(init.el,s);
c[s] = init.target[s] - b[s];
}
init.el.timer = setInterval(function(){
t++;
if(t > d){
clearInterval(init.el.timer);
init.callBack&&init.callBack();
} else {
for(var s in init.target){
var val = Tween[init.type](t,b[s],c[s],d);
css(init.el,s,val);
}
}
},20);
}

以上就是移动端横向滑屏和“橡皮筋”特效实例代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的移动端横向滑屏和“橡皮筋”特效实例代码全部内容，希望文章能够帮你解决移动端横向滑屏和“橡皮筋”特效实例代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300073.html

来源：【匿名】

【上一篇】匿名函数是一把双刃剑，有利也有弊【下一篇】javascript 怎么调用php方法

更多 ►

【移动端横向滑屏和“橡皮筋”特效实例代码】教程文章相关的互联网学习教程文章

javascript 仿面向对象编程实例代码(私有，公共变量。。。)【代码】

1//定义一个javascript类 2function JsClass(privateParam,publicParam){//构造函数 3var priMember = privateParam; //私有变量 4this.pubMember = publicParam; //公共变量 5//定义私有方法 6function priMethod(){7return "priMethod()";8 }9//定义特权方法，特权方法可以访问所有成员10this.privilegedMethod = function(){ 11var str = "这是特权方法，我调用了\n"; 12 str += " 私有变量：" + priMember +"\n"; 1...

JS获取月的最后一天与JS得到一个月份最大天数的实例代码_javascript技巧

标题页 function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定） if(month>12) //如果当前大于12月，则年份转到下一年 { new_month -=12; //月份减 new_year++; //年份增 } var newnew_date = new Date(new_year,new_month,1); //取当年当月中的第一天 return (new Date(new_date.getTime...

Vue+Express实现登录注销功能的实例代码【图】

对Vue全家桶有基本的认知.用有node环境了解express一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口前端向后端敏感接口发送ajax后端进行session验证,并返回信息前端axios拦截返回信息,根据返回信息进行操作进行页面切换页面切换,触发vue-router的路由守卫路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口后端验证接口进行session验证,返回信息前端根据后端返回信息进行操作2.前后端进行了怎么的交互? 登录注...

jQuery 过滤not()与filter()实例代码

第一种写法: 代码如下:$(function(){ $("li").not(":even").css("color","red"); $("li").filter(":odd").css("color","red"); }) 第二种写法：代码如下:$(function(){ $("li").filter(function(index) { return index%2 == 0; }).css("color","red"); $("li").not(function(index) { return index%2 !== 0; }).css("color","red"); }) 这两种写法，都可以达到一样的效果，not与filter是相反的过滤！ jQuery过滤选择器:not()方...

带有定位当前位置的百度地图前端web api实例代码

废话不多说，直接给大家贴代码了，具体代码如下所示，关键代码如下： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html { height:100%; } body { height:100%; margin:0px; padding:0px; } #container { height:50%; } </style>...

nodeJS实现路由功能实例代码【图】

前面的话本文将使用NodeJS实现较复杂应用的路由功能结构项目结构如下代码如下功能【router.js】 // 加载所需模块 var http = require(http); var url = require(url); var fs = require(fs);var host = 127.0.0.1; var port = 8080;http.createServer(function(req,res){var pathname = url.parse(req.url).pathname;console.log(Request for + pathname + received.);function showPaper(path,status){var content = fs.read...

jQuery完成表单验证的实例代码(纯代码)

废话不多说了，直接给大家贴代码了，具体代码如下所示：<!doctype html><head><meta charset=utf-8" /><title>表单验证</title><link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" /><script src="jquery/jquery.js" type="text/javascript"></script><script>$(document).ready(function() {$("form :input.required").each(function() {var $required=$("<strong class=...

基于vue实现swipe轮播组件实例代码【图】

项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的我们引用这样一个110k的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x对移动和PC端支持情况如下图当当当当~~~我们今天的主角登场了，thebird/Swipe，这个插件完成了图片轮播需要的基本功能，只有14.2k,真真的轻量级啊。还有，还有翻译一下，就是俺们全支持，不管你是PC端...

jssplit的用法和定义jssplit分割字符串成数组的实例代码_基础知识

关于js split的用法其它也不多说什么，下面直接举例给大家看看代码如下: 输出 } </ script> 输出结果就是 2 2 3 5 6 6 js split就是将一字符串以特定的字符分割成多个字符串,大家应当一看就懂了吧。下面是有关js split的定义和用法，官方参考。定义和用法 split() 方法用于把一个字符串分割成字符串数组。语法 stringObject.split(separator,howmany) 参数描述 separator 必需。字符串或正则表达式，从该参数指定的地方分割...

Ext 表单布局实例代码

代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = 'under'; //第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有： var tdate = new Ext.form.DateField({ fieldLabel: '日期', emptyText: '请选择日期', format: 'Y-m-d', disabledDays: [0, 7] }); var txt = new Ext...

vue做网页开场视频的实例代码【图】

本demo背景是一个视频，文字是打印机效果，按钮在文字打完才会显示，点击按钮背景向上收起，同时显示默认首页组件（如是初建vue项目列表，则为helloWorld.vue的组件内容）公司电脑没有gif动图尽情谅解文末会附上demo地址，如需看效果，可前往下载本人一直很喜欢网页开场有一段视频或动画，个人认为网页的开场动画起到引导浏览作用，相当于网页的一个开始，一个好的开始往往就成功了一半，对于浏览网站的用户来说，也就吸引了极大...

jQuery表单序列化实例代码实例分享

本文主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下，希望大家能更好掌握jQuery 表单序列化知识。废话不多说了，直接给大家贴代码了，具体代码如下所述：$(function(){$(#send).click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象dataType: "json",success: function(data){// code... }});}); }); $(function(){$(#send...

微信小程序弹窗自定义实例代码

微信小程序弹窗首先wxml代码： <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view>　　注：hidden属性用于切换比较频繁的地方。 wxss代码设置弹窗样式: .myToast{width:240rpx;height:130rpx;line-height: 130rpx;margin:80rpx 35%;border-radius:20rpx;background-color: rgb(114,113,113);color:rgb(255,255,255);font-size: 36rpx;text-align: center;position: ...

Vue组件中prop属性使用说明实例代码详解

Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component(blog-post, {// 在 JavaScript 中是 camelCase 的props: [postTitle],template: <h3>{{ postTitle }}</h3> })  <blog-post pos...

jquery实现文字由下到上循环滚动的实例代码_jquery

有如下代码：代码如下:第1个li元素第2个li元素第3个li元素第4个li元素第5个li元素第6个li元素第7个li元素第8个li元素但是页面只显示前5个li(相关css不做赘述)，想要循环显示li里面的内容就是在制定的时间将ul向上移动li的高度，于此同时将第一个li加到ul中li的末尾。　　代码如下：代码如下:function autoScroll(obj, ul_bz){$(obj).find(ul_bz).animate({marginTop : "-25px"},500,function(){$(this).css({marginTop : "0px"})...

首页 / JAVASCRIPT / 移动端横向滑屏和“橡皮筋”特效实例代码

移动端横向滑屏和“橡皮筋”特效实例代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【移动端横向滑屏和“橡皮筋”特效实例代码】教程文章相关的互联网学习教程文章

实例 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程