function bindSwiper(){
var events = {start: 'touchstart', move: 'touchmove', end: 'touchend'},
move_last_x = 0,
move_last_y = 0,
end = 0,
left_or_right = '',
event_center = {
_touchMove_start : function(e,obj){
move_last_x = e.originalEvent.touches[0].clientX;
move_last_y = e.originalEvent.touches[0].clientY;
eventTouch = 0;
},_touchMove_move : function(e,obj){
eventTouch = 1;
if ( move_last_x < 1)return;
end = 1;
var x = e.originalEvent.touches[0].clientX;
if(move_last_x > x){
left_or_right = 'left';
}else{
left_or_right = 'right';
}
},_touchMove_end : function(e,obj){
if ( end < 1 ) {
return;
}
end = 0;
if(left_or_right == 'left'){
if(pageNumber % 2 == 0){
pageNumber +=2;
}else{
pageNumber +=1;
}
toPageNumber(pageNumber);
}else{
if(pageNumber % 2 == 0){
pageNumber -=1;
}else{
pageNumber -=2;
}
toPageNumber(pageNumber);
}
}
};
$("#topdiv").bind(events.start,function(e){event_center._touchMove_start(e,function(){})});
$("#topdiv").bind(events.move,function(e){event_center._touchMove_move(e,function(){})});
$("#topdiv").bind(events.end,function(e){event_center._touchMove_end(e,function(){})});
}
分享到:
相关推荐
本文将深入探讨JS如何实现滑动效果,并通过greensock-v12-js这个库来具体阐述。 首先,我们了解滑动效果的基本原理。滑动通常涉及到元素的位置变化,这可以通过改变CSS的`transform`属性中的`translateX`或`...
在微信小程序中实现卡片层叠滑动效果,可以帮助开发者创建更丰富和直观的用户交互体验。实现该效果需要涉及到微信小程序的前端技术,如wxml、wxss和JavaScript等。 微信小程序页面中使用js文件编写JavaScript代码,...
例如,我们可以创建一个包含多个图片的容器,并通过调整其CSS样式来实现滑动效果。 在"jd51.net实现图片滑动效果"这个案例中,可能使用了以下技术: 1. **CSS定位**:为了实现滑动,通常会将图片容器设置为绝对或...
接下来,`Drag.js` 文件是实现滑动效果的关键。这个JavaScript文件可能包含了以下主要功能: 1. **初始化**:在页面加载完成后,JS会找到所有的图片元素并设置初始状态,如初始位置、动画参数等。 2. **定时器**:...
下面将详细探讨如何使用JavaScript实现图片滑动效果。 首先,我们需要理解基本的HTML和CSS布局。HTML用于创建网页结构,CSS负责样式和布局。一个简单的图片滑动组件通常包括一个包含多张图片的容器和一些控制按钮...
实现滑动效果有多种方法,其中JavaScript是一种常用的技术手段。JavaScript,作为一种强大的客户端脚本语言,能够与HTML和CSS紧密配合,为网页增添丰富的动态功能。在JavaScript中,我们可以利用时间间隔(`...
本教程将深入探讨如何利用 jQuery 实现滑动效果,这在创建交互式网页时非常常见,比如下拉菜单、轮播图、滑动面板等。 一、jQuery 基础 在讲解滑动效果之前,我们需要了解 jQuery 的基本用法。jQuery 通过 `$` ...
实现滑动效果通常涉及以下几个核心概念: 1. **CSS样式操作**:JavaScript可以通过`document.getElementById`、`querySelector`等方法获取DOM元素,并通过`.style`属性来改变元素的CSS样式,如`top`、`left`等,...
4. **滑动库和框架**:虽然可以手动编写JavaScript实现滑动效果,但已有许多成熟的库和框架,如Swiper、Ion Slider、Slick等,它们提供了丰富的选项和自定义功能,能快速实现高质量的滑动效果。这些库通常已经处理好...
- `js`: 文件夹,存放JavaScript脚本,可能有`script.js`,用于实现选项卡的交互逻辑。 通过结合这些文件,开发者可以根据HTML结构、CSS样式和JS逻辑,实现一个完整的滑动门选项卡特效。这不仅展示了HTML、CSS和...
在JavaScript编程中,实现点击按钮让图片...总的来说,实现这个JS代码滑动效果需要掌握HTML布局、CSS样式以及JavaScript事件处理和DOM操作等基础技能。通过不断实践和优化,可以创建出更加丰富和复杂的交互式网页元素。
JavaScript实现滑动效果的基本步骤如下: 1. **选择元素**:使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`选择需要滑动的元素。 2. **计算滑动距离**:根据目标位置或...
2. **左右滑动**:改变图片的`left`或`right`属性,使图片向左或向右移动,达到滑动效果。 3. **缩放**:调整图片的`scale`变换,让图片在切换时放大或缩小。 4. **轮播样式**:在图片切换时添加箭头或指示点,让...
首先,为了在触屏设备上实现滑动效果,我们需要引入jQuery库和jQuery Mobile或者自定义的触屏事件处理函数。jQuery Mobile是一个专门针对触屏设备优化的框架,包含了丰富的组件和交互效果,其中包括滑动事件。如果不...
通过为每张图片绑定mouseover和mouseout事件来实现滑动效果。当鼠标悬停在图片上时,会触发onmouseover事件,事件处理函数先将所有图片的位置重置到初始位置,然后将当前及之前的所有图片向左滑动一定距离...
【JavaScript源代码】uniapp实现滑动评分效果 在uniapp开发中,滑动评分功能是一种常见的用户交互设计,允许用户通过滑动手指选择不同等级的评分。本实例将介绍如何利用JavaScript和uniapp框架来实现这个功能。下面...
在实现滑动效果中,jQuery可以监听用户的交互事件,如点击按钮或链接,然后执行相应的JavaScript函数来改变CSS样式。例如,`slideToggle()`函数是一个常见的jQuery方法,它能够实现元素的展开和折叠,同时提供平滑的...
`js`目录下的JavaScript文件则是实现滑动效果的核心。这些文件可能包含了处理触摸事件、计算滑动距离、控制内容滑动以及添加过渡效果的函数。例如,一个常见的滑动插件可能包含以下功能: 1. 初始化滑动容器:设置...
"工具"可能指的是作者推荐了一些辅助开发的工具或框架,帮助开发者快速实现滑动效果。 压缩包中的文件名列表暗示了博文中可能涉及的资源类型: 1. `index.css`:这是样式表文件,可能包含了滑动效果所需的CSS样式...
JavaScript图片切换滑动效果是一种常见的网页动态展示技术,它通过编程方式实现图片的平滑过渡,为用户带来更丰富的视觉体验。在网页设计中,这种效果通常用于相册、产品展示或者广告轮播等场景。以下将详细讲解实现...