JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键、手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器。
演示在:www.jgui.com
Github地址:https://github.com/zhaogaojian/JGUI
效果
觉得好的给个star,谢谢!
源码未压缩,请右键查看网页源码,相关文件有accordion.js,accordion.css,index.html
隐藏滚动条可以通过设置margin隐藏滚动条方式实现,css3支持直接隐藏滚动条,这两种方式实现简单,网上也有很多文章
本文使用监听鼠标滚动事件滚动方式。
下面是实现过程和思路,大家可以一起来学习下使用到的技术。
前端html结构如下
<div class="jgui-accordion"
style="width:100%;overflow:hidden;position: absolute;top:60px;left:0px;right: 0px;bottom:0px;">
<div class="jgui-accordion-list">
<ul>
<dl>
<dt class="jgui-accordion-navitem">
<a>
<i class="anticon icon-home"></i>
<span>目录1</span>
<i class="jgui-accordion-navitem-more"></i>
</a>
</dt>
.......
方法一:使用jquery animate实现(只处理垂直方向上滚动)
//电脑端中键滚动事件
mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
console.log(delta);
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
});
var handle = function (delta) {
var step = Math.floor($('.jgui-accordion').height()/10); //可视区高度
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
var direction = delta > 0 ? -1 : 1;
$(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, 50);
}
//手机端鼠标滑动事件
$(".jgui-accordion").on("touchstart", function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
}); $(".jgui-accordion").on("touchmove", function (e) { e.preventDefault();
moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = (moveEndY - startY);
startY = moveEndY;
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
$(".jgui-accordion").stop().animate({ scrollTop: -Y + cur_top }, 0); });
方法二:使用css3 tansform实现,以手机端滑动为例
//手机端鼠标滑动事件
$(".jgui-accordion-list").on("touchstart", function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
console.log("aa");
});
curY=0;
$(".jgui-accordion-list").on("touchmove", function (e) {
e.preventDefault();
moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = (moveEndY - startY) ;
curY+=Y;
startY = moveEndY;
$(".jgui-accordion-list").css('-webkit-transform','translate3d(0px,'+curY+'px,0px)')
$(".jgui-accordion-list").css('-moz-transform','translate3d(0px,'+curY+'px,0px)')
});
在本页面中,两种方式性能基本上差不多,第二种需要手动计算滚动区域,防止过高或过低。
PC端模拟手机滑动效果如下
滚动时,会发现缺少了一点惯性,比如鼠标中键一次拨动几个和拨动一个应该移动距离不一样,为了解决这个问题改进代码如下
//电脑端中键滚动事件
var sumdelta=;
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = ;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / ;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / ;
}
if (delta)
{
sumdelta+=(delta> ? - : );
setTimeout("handle()",);
}
stopPropagation(event);
});
var handle = function () {
isanimate=true;
var step = Math.floor($('.jgui-accordion').height()/);//可视区高度
var cur_top = $('.jgui-accordion').scrollTop(); //当前滚过的高度
var direction = sumdelta ;//> 0 ? -1 : 1;
$(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, ,'swing',function(){sumdelta=;}); }
上面通过setTimeout延时触发滚动事件,即可实现不同的滚动速度,因为鼠标中键滚动只有一个mousewheel不像左右键那样有按下,移动,松开事件,所以需要借助定时器。
测试发现突然变向滑动时,会感觉有延迟,分析代码原因主要是因为sumdelta=0,这时候可能正在进行的滚动操作被重置了,另外部分变量使用的全局变量也不合适,因为界面上可能有多个accordion,
下面增加一个Jquery对象变量,优化代码如下:
//电脑端中键滚动事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
if (delta)
{
var datas=$(this).data('datas');
datas.sumdelta+=(delta> 0 ? -1 : 1);
var direction = datas.sumdelta ;
var obj=$(this);
var handle = function () {
datas.sumdelta=0;
var step = Math.floor(obj.height()/10);//可视区高度
var cur_top = obj.scrollTop(); //当前滚过的高度
obj.stop().animate({ scrollTop: direction * step + cur_top }, 400,'linear',function(){direction=0;}); }
setTimeout(handle,100);
}
stopPropagation(event);
});
datas.sumdelta是自定义的一个Jquery对象变量,增加变量方法如下(return this.each是一个链式操作,返回的是this)。
$.fn.jAccordion = function (p_options,p_datas, p_param) {
return this.each(function () {
var obj = $(this);
var datas = $.extend({
sumdelta:0
}, p_datas);
obj.data('datas', datas);
});
};
$(".jgui-accordion").jAccordion();
为了进一步提升滚轮加速效果和防止Timer重入再次修改代码如下
//电脑端中键滚动事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.originalEvent.wheelDelta) { /* IE/Opera. */
delta = event.originalEvent.wheelDelta / 120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail / 3;
}
if (delta)
{
var datas=$(this).data('datas');
datas.sumdelta+=(delta> 0 ? -1 : 1);
var direction = datas.sumdelta ;
var obj=$(this);
var handle = function () {
datas.isscrolling=true;
datas.sumdelta=0;
var step = Math.floor(obj.height()/30);//可视区高度
var cur_top = obj.scrollTop(); //当前滚过的高度
obj.stop().animate({ scrollTop: direction*Math.abs(direction) * step + cur_top }, 400,'linear',function(){direction=0;datas.isscrolling=false}); }
if(!datas.isscrolling)
setTimeout(handle,100);
}
stopPropagation(event);
});
$.fn.jAccordion = function (p_options,p_datas, p_param) {
return this.each(function () {
var obj = $(this);
var datas = $.extend({
sumdelta:0,isscrolling:false
}, p_datas);
obj.data('datas', datas);
});
};
$(".jgui-accordion").jAccordion();
这样在拨动一两格时,滚动条缓慢移动,当快速波动时,因为平方的效应,能引起加速滚动,可以快速的回到顶部或者底部。如果不想使用这个滚动条代码,将mousewheel事件注释掉即可。
现在鼠标上下滚动很平滑了,也可以快慢滚动了,同理,手机端touch事件也可以根据这个原理改造,需要考虑滑动时间和滑动距离,根据这个来计算滑动偏移距离,手机端效果将后续实现。大家如果有空深入完善下,应该也是可以媲美IScroll的。后续将扩展一些JS防范方便大家使用。
后续:继续优化中键滚动
https://www.cnblogs.com/zhaogaojian/p/10436234.html
JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)的更多相关文章
- JGUI源码:鼠标中键滚动再次优化(5)
//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...
- JGUI源码:从头开始,建一个自己的UI框架(1)
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- 实例源码--Android图片滚动切换效果
下载源码 技术要点: 1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...
- JGUI源码:JS菜单动态绑定(8)
我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J ...
- JGUI源码:Tab组件实现(9)
程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...
- Android Xlistview的源码浅度分析 监听ListView上下滑动 以及是否到顶和底部
如转载 请注明出处 http://blog.csdn.net/sk719887916 比如我们很多项目中会用到listview 并且要对listview滑动方向进行判断 也有需要的到listview是 ...
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- JGUI源码:Accordion折叠到侧边栏实现(6)
折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = ...
随机推荐
- RabbitMQ基本示例,轮询机制,no_ack作用
一.RabbitMQ简介: ''' RabbitMQ就是消息队列 之前不是学了Queue了吗,都是队列还学RabbitMQ干嘛? 干的事情是一样的 Python的Queue有两个, 一个线程Queue ...
- java.io.IOException: There appears to be a gap in the edit log. We expected txid ***, but got txid
方式1 原因:namenode元数据被破坏,需要修复解决:恢复一下namenode hadoop namenode -recover 一路选择Y,一般就OK了 方式2 Need to copy the ...
- vue 路由变化页面数据不刷新问题(缓存)
每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...
- lsof -i
https://www.cnblogs.com/sparkbj/p/7161669.html 主要命令
- 【转】Android 增,删,改,查 通讯录中的联系人
一.权限 操作通讯录必须在AndroidManifest.xml中先添加2个权限, <uses-permission android:name="android.permission. ...
- 使用PowerDesigner 15对现有数据库进行生成图表结构
PowerDesigner的安装和基本使用,我就不阐述了.大家可以到这里看看:http://www.blogjava.net/wangdetian168/archive/2011/04/07/Powe ...
- python小白——进阶之路——day2天-———变量的缓存机制+自动类型转换
# ###同一文件,变量的缓存机制 ''' -->Number 部分 1.对于整型而言,-5~正无穷范围内的相同值 id一致 2.对于浮点数而言,非负数范围内的相同值 id一致 3.布尔值而言, ...
- .net core2.1 三层中使用Autofac代替原来Ioc
首先,现有的三层项目的结构 其中 Repository public interface IPersonRepository { string Eat(); } public class Perso ...
- 小程序——返回上个页面触发事件(onUnload)
//页面销毁前--上传被提交的数据 onUnload:function(){ var _this=this; let updateStatus = wx.getStorageSync('UpdateS ...
- linux系统安装redis
redis的下载安装教程 1.进入到linux指定目录中 cd /usr/local 路径看你自己情况 2.下载redis,执行如下命令: wget http://download.re ...