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 = ...
随机推荐
- phoenix API服务发布
概述 Elixir 的 Phoenix 框架对于开发 Web 应用非常方便,不仅有 RoR 的便利,还有 Erlang 的性能和高并发优势. 但是应用的发布涉及到 Erlang 和 Elixir 环境 ...
- 英语口语练习系列-C19-喜欢某人
简单词汇 1. chair [tʃeə(r)] n. 椅子 chair = ch + air拼读的时候ch发音以及air发音 [ ] sit on a chair 坐在椅子上 [ ] a table ...
- django-debug-toolbar使用指南
好久没发新博客,凑个数... django-debug-toolbar 介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面 ...
- Vmware10中Centos7挂载Windows主机的共享文件夹,提示:Error: cannot mount filesystem: No such device
1.设置共享权限 2.安装VMware tools 点击虚拟机 点击安装 VMware tools 将/run/media/zhaojq/VMware\ Tools 目录下的VMwareTools-9 ...
- day23--面向对象之封装、继承、多态
面向对象的三大特性: 封装: 在类的内部(class内部)可以由属性和方法,外部代码可以通过直接调用实例变量的方法来操作数据,这样就隐藏了内部的逻辑,但是外部还是可以直接修改实例的属性,因此当需求中存 ...
- SpringBoot中各配置文件的优先级及加载顺序
我们在写程序的时候会碰到各种环境(开发.测试.生产),因而,在我们切换环境的时候,我们需要手工切换配置文件的内容.这大大的加大了运维人员的负担,同时会带来一定的安全隐患. 为此,为了能更合理地重写各属 ...
- hdu4746 Mophues (莫比乌斯进阶)
参考博客:https://blog.csdn.net/acdreamers/article/details/12871643 题意:满足1<=x<=n,1<=y<=m,并且gc ...
- auth mysql
DROP TABLE IF EXISTS tky_auth_role;CREATE TABLE tky_auth_role ( roleid MEDIUMINT (8) UNSIGNED NOT NU ...
- jsp篇 之 基本概念
Jsp概念: 1.jsp是什么 jsp全称Java Server Pages,是一种[动态网页开发技术]. .html文件是静态页面 .jsp 文件是动态页面 jsp页面允许我们在html代码中[嵌入 ...
- 爬虫 BeatifulSoup 模块
BeatifulSoup 模块 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库 安装 pip install beautifulsoup4 解析器下载 ...