vmousedown、vmousemove 仿触屏滑动图片切换

本文介绍了如何通过JavaScript中的vmousedown和vmousemove事件来实现触屏设备上的左右滑动效果,并详细解释了事件监听、滑动距离计算以及页面内容动态更新的过程。

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

//触屏左右滑动事件 通过 vmousedown、vmousemove 模拟滑动
	$(".pic-content").live("vmousedown",function(event){
		event.preventDefault();//阻止其他事件,手机默认会触发其他事件
		movex = 0;
		var x = event.pageX;
		// 图片拖动动作
		$(".pic-content").live("vmousemove",function(event){
			var y = event.pageX;
			movex = y - x;
			var tran_move = "scale(1) translate3d("+(movex-winwidth)+"px,0px,0px)";
			$(".pic-content").css({"transform":tran_move,"transition-duration":"0ms"});
		});
	});
	
	//结束滑动响应函数
	$(".pic-content").live("vmouseup",function(){
		//解除滑动事件
		$(".pic-content").unbind("vmousemove");
		//根据滑动距离判断操作
		if(movex>60){
			
			if(now_id==0){
				$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
			}else{
				$(".pic-content").css({"transform":"scale(1) translate3d(0px,0px,0px)","transition-duration":"200ms"});
				now_id--;
				moveover_r(now_id);
			}
		}else if(movex<(-60)){
			if(now_id==(img_info.length-1)){
				$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
			}else{
				$(".pic-content").css({"transform":tran_2,"transition-duration":"200ms"});
				now_id++;
				moveover_l(now_id);
			}			
		}
		//滑动距离小于60px 则回复原位
		else{
			$(".pic-content").css({"transform":tran,"transition-duration":"200ms"});
		}
	});
	
	//根据滑动距离更改页面内容,偏移值复位	由于load事件只想用于新增的img ,否则造成当前幻灯片手机闪屏  。所以采用删除并新增的方式,否则可以直接html()
	function moveover_l(now_id){
		html = "<li style='width:"+winwidth+"px;line-height:"+winheight+"px'><img src='"+(img_info[now_id+1]?img_info[now_id+1]['path']:no_pic)+"'></li>";
		setTimeout(function(){
			$(".pic-content li").first().remove();
			$(".pic-content").append(html);
			$("img").load(function(){
				$(this).css("opacity","1");
			});
			$(".pic-content").css({"transform":tran,"transition-duration":"0s"});
			$(".pic-foot p").html(img_info[now_id]?img_info[now_id]['name']:null);
			$(".pic-top span").text((now_id+1)+"/"+img_info.length);
			//$("#mydownload").attr("href",img_info[now_id]['path']);
		},200);
	};
<pre name="code" class="html">function moveover_r(now_id){
		html = "<li style='width:"+winwidth+"px;line-height:"+winheight+"px'><img src='"+(img_info[now_id-1]?img_info[now_id-1]['path']:no_pic)+"'></li>";
		setTimeout(function(){
			$(".pic-content li").last().remove();
			$(".pic-content").prepend(html);
			$("img").load(function(){
				$(this).css("opacity","1");
			});
			$(".pic-content").css({"transform":tran,"transition-duration":"0s"});
			$(".pic-foot p").html(img_info[now_id]?img_info[now_id]['name']:null);
			$(".pic-top span").text((now_id+1)+"/"+img_info.length);
			//$("#mydownload").attr("href",img_info[now_id]['path']);
		},200);
	};


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值