JS+CSS3模拟溢出滚动效果

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,为了以后封装方便,特简单封装一个jquery插件,同时也复习一下jquery插件开发及touch事件;

插件大体思路是这样的,如下图所示:方框内区域为固定宽高的父元素(设置overflow:hidden),子元素高度大于父元素,我们通过响应touch事件改变子元素的translate值(top也可以,但是translate效率更高一些),当然在此期间我们需判断子元素translate值的边界,最大为0,最小为子元素高度-父元素高度

ps:如果想做子元素根据手指移动,松开手指后回到边界需另写程序

下面来一步步写插件

第一步,先建立一个安全的作用域

;(function($){
//插入代码
})(jQuery)
如果我们需要通过$(“#id”).xx()方法调用,需要像下面这样写,这里的fn及jquery的prototype;
$.extend({
exec:function(){}
}) //这种扩展通过$.exec()调用
$.fn.simuScroll = function(option){
var scrollObj=new simuScroll(this,option);
return scrollObj.init();
}

下面来看上面代码中的simuScroll方法,这是一个构造函数,它接受两个参数,ele为当前接受touch事件的元素(一般可以设置为父元素),option为用户传入的配置参数,如改变translate的元素,父元素子元素高度,extra为需额外增加的高度,滑动到顶部或底部时执行的回调函数等等;

var simuScroll = function(ele,option){
this.settings = {
target : ele, //事件元素
changeTarget:'',
outerHeight : '800', //外层高度
innerHeight : '500', //内层高度
extra : '0', //额外增加的距离
swipeUp : null,
swipeDown : null,
vertical:true
};
//通过jquery.extend对默认的settings进行扩展,得出一个全新的对象
this.opt = jQuery.extend({},this.settings,option);
this.initNumber = this.lastNumber = this.result = 0;
this.flag = false;
//计算出子元素与父元素距离差,以此来判定元素的最大滑动距离
this.diff = parseFloat(this.opt.innerHeight) - parseFloat(this.opt.outerHeight) + parseFloat(this.opt.extra);
this.diff = this.diff < 0 ? 0 :this.diff;
this.direction = '';
}; 

在对jquery prototype进行扩展时,第一步为实例化上面的构造函数,第二步则直接调用了构造函数的init方法,具体见下面备注

init:function(){
//jquery对象直接绑定touch事件获取event需originalEvent获取原生对象的event属性
//jquery对象 获取pagex event.originalEvent.touches[0].pageX
//dom对象 event.touches[0].pageX
var target = this.opt.target.get(0);
//如果子元素高度大于父元素,则执行滑动事件,否则执行回调函数
this.flag = this.diff > 0 ? 'translate' : 'exec';
/*如果元素已设置transform中 translate,scale,skew,rotate中的任何一项,
则我们再直接设置transform:translateY(10px)时会覆盖掉初始设置的属性
所以我们通过获取元素的matrix值既保证原有属性,又能设置任意值*/
var cssText = this.opt.changeTarget.css('-webkit-transform');
if(cssText=='none'){ //元素未设置transform属性
this.str = this.opt.vertical ? 'translateY' : 'translateX' ;
}else{
this.str = cssText ;
var reg = /-?\d+\.?\d*/g; //正则表达式
/*获取matrix中各参数
直接获取到的matrix值为类似matrix(1,0,0,1,0,0)
获取到的为[1,0,0,1,0,0] 这样我们就可以随意的修改某一个值
数组的第5项为元素的translateX值,第6项为translateY值 */
this.params = this.str.match(reg);
this.matrix = this.opt.vertical ? 6 : 5 ; //根据传入的参数确定要修改的值为translateY或tranlateX
}
var _this = this;
//父元素绑定touch事件,传递事件对象及context
target.addEventListener('touchstart',function(e){
_this.start(e,_this)
});
target.addEventListener('touchmove',function(e){
_this.move(e,_this)
});
target.addEventListener('touchend',function(e){
_this.end(e,_this)
});
}

touchstart方法相对比较简单,根据需要滑动的方向记录手指接触屏幕时的初始值

start:function(e,context){
e.preventDefault();
var touches = e.touches[0];
context.initNumber = context.opt.vertical ? touches.pageY : touches.pageX;
},

touchmove方法主要根据手指滑动距离动态改变元素css属性,让元素能够跟随手指进行移动

setNumber方法只有一句话: this.params.splice(n-1,1,number) 根据传入的参数改变matrix数组

move:function(e,context){
e.preventDefault();
var touches = e.touches[0];
number = context.opt.vertical ? touches.pageY : touches.pageX;
//获取相对手指触碰屏幕的变化值
var delta = number - context.initNumber;
if(context.flag == 'translate'){ //如果需要滑动
context.result = context.lastNumber + delta;
//设置滑动的最大值和最小值
context.result = context.result > 0 ? 0 : context.result ;
context.result = -context.result > context.diff ? -context.diff : context.result;
//动态设置元素css属性
if(context.matrix){
switch (context.matrix) {
case 6:
context.setNumber(6,context.result)
break;
case 5:
context.setNumber(5,context.result)
break;
}
context.opt.changeTarget.css('-webkit-transform','matrix('+context.params.join(',')+')')
}else{
context.opt.changeTarget.css('-webkit-transform',context.str+'('+context.result+'px)')
}
}
},

touchend则判断释放时是否需要执行回调函数

end:function(e,context){
e.preventDefault();
var touches = e.changedTouches[0];
var number = context.opt.vertical ? touches.pageY : touches.pageX,
n = number - context.initNumber;
//当元素滑动距离大于10 并且最初元素translate值为0同时回调函数存在,则执行回调函数
if(n>10 && context.lastNumber == 0 && context.opt.swipeDown){
context.opt.swipeDown()
}else if(n<-10 && context.lastNumber == -context.diff && context.opt.swipeUp){
context.opt.swipeUp();
}
//将常量设为结果值,能保证多次连贯滑动
context.lastNumber = context.result;
}

基本上一个简单的jQuery插件就完成了,框架如下

;(function($){
var a = function(m,n){
//函数内容
};
a.prototype = {
init:function(){
},
start:function(){
},
move:function(){
},
end:function(){
},
setNumber:function(){
}
}
$.fn.scrol = function(o){
var obj = new a(this,o);
return obj.init()
}
})(jQuery) 

调用时如下:

$(".outer").simuScroll({
'outerHeight':$(".outer").height(),
'innerHeight':$('.inner').height(),
'changeTarget' : $(".inner"),
'swipeUp' :function(){
console.log('up')
},
'swipeDown' :function(){
console.log('down')
},
vertical:true
})

以上所述是小编给大家介绍的JS+CSS3模拟溢出滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JS+HTML5手机开发之滚动和惯性缓动实现方法分析

    本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化

  • JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

  • 简单实现js间歇或无缝滚动效果

    间歇.无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400p

  • js实现可控制左右方向的无缝滚动效果

    本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a

  • JS平滑无缝滚动效果的实现代码

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {

  • JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    淘宝图片处理讨论 淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法: 1.javascript懒加载之可视区域加载 <!DOCTYPE h

  • JavaScript代码实现图片循环滚动效果

    1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

  • Javascript实现图片不间断滚动的代码

    蛮优秀的一段效果代码,可以上下左右滚动,收藏了!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=

  • JS+CSS3模拟溢出滚动效果

    移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,

  • 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

  • JS简单实现无缝滚动效果实例

    本文实例讲述了JS简单实现无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8" /> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description"

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码.分享给大家供大家参考,具体如下: 这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/ 具体代码如下: <html> <SCRIPT language=JavaScript> var currentpos,ti

  • JS实现公告上线滚动效果

    本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下 实现的效果如下,新闻公告上下滚动. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.

  • jQuery插件fullPage.js实现全屏滚动效果

    本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

  • 利用JS实现scroll自定义滚动效果详解

    前言 最近在公司开发项目的时候,原生滚动条中有些东西没办法自定义去精细的控制,于是开发一个类似于better-scroll一样的浏览器滚动监听的JS实现,下面我们就来探究一下自定义滚动需要考虑哪些东西,经过哪些过程.话不多说了,来一起看看详细的介绍吧. 选择滚动监听的事件 因为是自定义手机端的滚动事件,那我选择的是监听手机端的三个touch事件来实现监听,并实现了两种滚动效果,一种是通过-webkit-transform,一种是通过top属性.两种实现对于滚动的基本效果够能达到,可是top的不适

  • JS实现图片横向滚动效果示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现图片左右滚动效果

    需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同. 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerMo

随机推荐