scroll_Left 和 scroll_Top
function scroll_Left(tar_x){
var timer = setTimeout(function(){
var current_x = document.body.scrollLeft
step = 40
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}
function scroll_Top(tar_y){ //tar_y 即滑动条顶端 距离页面最上面的距离
//console.log('oooooooo')
var timer = setTimeout(function(){
var current_y = document.body.scrollTop
//console.log(current_y)
step = 40 //步长系数 即剩余的距离除以40 每1ms 移动一段距离
if (tar_y>current_y){ //tar_y > current_y 即向下滚动
var dist = Math.ceil((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y<tar_y){ //向上滚动和向下滚动判定的区别 是这里！！
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do down')
}
else{
window.scrollTo(0,tar_y)
//clearTimeout(timer)
}
}
else{ //tar_y < current_y 即向上滚动
var dist = Math.floor((tar_y-current_y)/step)
var next_y = current_y+dist
if(next_y>tar_y){
window.scrollTo(0,next_y)
scroll_Top(tar_y)
console.log('do up')
}
else{
window.scrollTo(0,tar_y)
//clearInterval(timer)
}
}
},1)
}
**结合 zepto 做的 手势左右 滑动 轮播
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name='apple-touch-fullscreen' content='yes'/>
<meta name="full-screen" content="yes"/>
<script src="./zepto.min.js"></script>
<script src="./g.js?23"></script>
</head>
<body>
<script language="javascript">
<!--
;(function($){
var winWidth = $(window).width();
var startX = 0;
var startLeft = 0;
//alert(winWidth)
$(document).on("touchstart",function(obj){
startX = obj.changedTouches["0"].clientX;
startLeft = document.body.scrollLeft;
if(startLeft < winWidth){
startLeft = 0;
}else{
startLeft = winWidth;
}
});
$(document).on("touchend",function(obj){
if(((obj.changedTouches["0"].clientX) - startX) > 100 ){
scroll_Left_prt(0);
}else if(startX - ((obj.changedTouches["0"].clientX)) > 100 ){
scroll_Left_prt(winWidth);
}else{
scroll_Left_prt(startLeft);
}
});
})(Zepto);
//-->
</script>
<style type="text/css">
*{margin:0px;padding:0px}
table{background:red;}
table td{width:10%;text-align:center}
</style>
<table width="200%" height="100%" id="tb" cellspacing="0" cellpadding="0" border="0">
<tr style="width:100%">
<td id="f">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
g.js -- 解决 连续两次操作时 遇到的冲突 。 在外面包括了一个 function 和 加了个全局变量 判断状态
var scrolll_stop = false;
function scroll_Left_prt(tar_x){
if(scrolll_stop == true){return;}
scrolll_stop = true;
scroll_Left(tar_x);
}
function scroll_Left(tar_x){
var timer = setTimeout(function(){
var current_x = document.body.scrollLeft
step = 10;//值越小，滚动越快
if (tar_x>current_x){
var dist = Math.ceil((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x<tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearTimeout(timer)
}
}
else{
var dist = Math.floor((tar_x-current_x)/step)
var next_x = current_x+dist
if(next_x>tar_x){
window.scrollTo(next_x,0)
scroll_Left(tar_x)
}
else{
scrolll_stop = false;
window.scrollTo(next_x,0)
//clearInterval(timer)
}
}
},1)
}
相关推荐
一些常见的前端业务需求实现 according -> 手风琴导航 circle -> 圆环以及进度条 css3Keyframes -> css3动画 hitTest -> 碰撞检测 jsonp -> 原生js模拟百度搜索框 magnifer -> 放大镜 ...scrollbar -> 滚动条系列
360度全景展示效果，back_评分，back_图片滚动播放，JS简易年历，slide上下滚动条，放大镜简单版，竖排导航，土豆右下角菜单悬浮效果，照片墙一多实例演示_files，back_瀑布流，back_购物车等等..........
主要使用了原生js的setInterval不断执行的代码 在固定时间段内，不断的让某一个数字自增以此达到不断变化(增加)的效果 使用方法： 1、将style.css样式引入到你的网页中 2、将body中的代码部分拷贝...
通过定时器30毫秒执行一次滚动条上升，每次上升的高度为当前高度的80%，这样就达到了上升缓冲的动画效果。 判断当滚动条高度超过一屏时，按钮显示，默认隐藏 知识要点 scrollTop//获取滚动条高度 需要写兼容 ...
透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果； 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示： 首先声明：由于...
Flash横条新闻滚动特效，新闻标题切换效果，点击左右两头的小三角按钮就可以上一条、下一条切换，原生的Flash动画效果切换，Flash Js结合完成，含Flash源文件，新闻标题内容存放于XML里，你可以用程序控制生成XML...
通过requestAnimationFrame实现一次图片切换的动画。 这种方法也可以做到整个页面始终只有2个img标签，而不必把所有的img节点全部创建出来，要点是每次更换不可见img的src。 动画的实现 首先定义一
7、 锁屏的时候改用js屏蔽页面滚动功能，取消原来CSS隐藏滚动条，防止页面偏移 8、 给确定按钮增加Ctrl + Enter快捷键，锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在...
其实这东西本打算用原生的javascript来写，但是原生的javascript取class与监听滚动条的滚动过于麻烦，因此上了jQuery，没关系，反正兼容IE6就行。 将实现如下的效果： 也就是在网页中有点常见的滚动监听。相应的...
:sparkles:自定义滚动条插件 :sparkles:设置Dom可预期插件 :sparkles:动画模态框Vue3组件 :sparkles:移动端标签页Vue3组件 :sparkles:自定义快捷菜单Vue3组件 开始使用 安装 // 新版已进行分包 npm i -S @ ...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
webapp缺少淡入淡出动画、转场动画、滑动动画，或者因此引起的不流畅，以及某些组件的弹力体验与原生有差距等。 浮动元素的处理。顶部、右侧、底部的固定位置的元素可能会有抖动，或者弹出菜单无法点按页面其他...
Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...