移动html5 滑动 zepto,移动端使用zepto编写的滑动事件

此篇博客分享了一位开发者自定义的移动端触摸滑动组件实现,包括事件监听、元素移动效果和触摸操作的逻辑。通过JavaScript和CSS,作者详细展示了如何创建响应式滑动切换,并欢迎读者提出改进建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

移动端触摸滑动,自己写的,如果有什么不对的,希望指教

1.[文件] swipe.zip ~ 16KB     下载(363)

2.[文件] index.html ~ 2KB     下载(156)

Document

*{margin: 0;padding: 0;}

.wrapper{width:100%;height: 200px;overflow: hidden;position: relative;}

.content{height:200px;}

.content>div{

float: left;

height: 200px;

}

.btn{position: absolute;bottom: 20px;width: 80%;text-align: center;}

.btn a{width: 10px;height: 10px;border-radius: 100%;display: inline-block;border: 1px solid #fff;margin:0 3px;}

.btn .active{background: #fff;}

1
2
3

$(function(){

var blt = (function () {

return new swipers();

})();

function swipers(){};

swipers.prototype.slider=function(tagName,propo){

document.addEventListener('touchmove', function (event) {

event.preventDefault();

}, false);

var parent = tagName.parent();

var _len = tagName.length;

for (var i = 0; i < _len; i++) {

$("").appendTo(parent.next());

};

$("a").eq(0).addClass("active");

var imgLen = (1/_len)*100;

tagName.css("width",imgLen + "%");

parent.css("width",_len * 100+"%");

tagName.swipeLeft(function(){

blt.swipe(this,1,_len-1,propo);

})

tagName.swipeRight(function(){

blt.swipe(this,-1,0,propo);

});

}

swipers.prototype.swipe=function(key,value,length,propo){

var _len = propo.length;

var index = $(key).index();

var imgLen = (1/_len)*100;

var len = -imgLen * (index+value) + "%";

if (index == length) {

return false;

}else{

$(key).parent().css({

'-webkit-transform':'translate('+len+')',

'-moz-transform':'translate('+len+')',

'transform':'translate('+len+')',

'-webkit-transition':'500ms linear',

'-moz-transition':'500ms linear',

'transition':'500ms linear'

});

$("a").eq(index + value).addClass("active")

.siblings().removeClass('active');

}

return this;

}

var _img = $(".content>div");

blt.slider(_img,$(".content>div"));

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值