html5 swipejs,移动web最简洁的滑动效果Swipe JS(适合初学者)
最近要做一个移动web的项目,前端后端都自己一人来搞。由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html、js、css都预览了一遍,然后在仿照别人的站点自己尝试着去实现。
虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的所以然。
以下是我要实现一个在手机上滑动(图片,文字等)的效果。我先是把别人的页面下载下来,然后根据它的在页面呈现出来的“模块”进行切割,把各个模块单独提起出来,这样做:(1)理解页面的布局;(开始的时候,在怀疑,前、后台开发的思维模式是否不一样,因为一开始的时候,看页面的那些html、css、js实在晕,而且感觉代码也很凌乱)(2)熟悉html标签和css、js的用法;(这个需要花费一定的时间去熟悉每个标签的特性和用法)。
这个示例,就是我提取出来后,把原来多余的css等删除,仅仅保留滑动效果最简洁的部分,由于刚接触,在描述和理解上有不妥的地方,还烦请指正 :)
一、先简要说下swipe.js(参见:http://swipejs.com/)
之所以用到这个js,主要是:
(1)我在百度里搜索“页面滑动”等关键词时,就出现了它老人家。
(2)在我下载下来别人滑动页面里面也用到了它。
二、如何使用
swipe是一个纯的javascript,里面没用到任何的其他的js框架(由于时间问题,里面的东西没很细研究,以后有时间了,再来学习),要实现移动端的滑动,必须要的元素有:
(1)html,这个当然不必说
(2)css,需要一定的css做样式。swipe里面会查找关键标签的样式,根据样式来现实
(3)js,这里面有自己定义和实现的js function
以下分别对上面的3大块进行描述:
(1)html。必须的html有:
【1】最外层的div的id是自定义的,这个是需要传入到swipe中的
【2】最外层div的class="swipe"和第二层div的class="swipe-wrap"是写死的,swipe会查找这两个样式然后做相应的处理
【3】第三层的figure,就是我们要滑动元素的单元。
【4】之后我们的要滑动的内容,就是以figure为单位进行的
(2)css。必须的css有:
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
#slider {
max-width: 650px;/* 设置最大的宽度 */
margin: 0px auto; /* 居中对齐 */
}
figure {
margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */
}
【1】swipe、swipe-wrap、swipe-wrap > figure,这3个是swipe必须要使用到的,而且里面的样式最好也不要改动(感兴趣的同学可以试着去改动,看会呈现什么效果,蛮好玩的 :))
【2】#slider是我自己设定的,用于整个空间居中
【3】figure样式也是自己设定的,但是是必须的,指定所有的figure对齐方式,而且只能设置为0,否则在滑动图片的时候会出现位置的错乱。(为什么会错乱,自己简单研究了下,swipe滑动宽度的像素是根据最外层div的宽度,如果figure的margin没有设置为0,而有间隔时,滑动的宽度就不会是一整张的figure了(figure之间存在空虚))
(3)js。必须有的js:
var slider =
Swipe(document.getElementById('slider'), {
auto: 3000,
continuous: true,
callback: function(pos) {
}
});
这个就是调用swipe了,这里面的参数有些是可有可无,根据自己的需求来选择,简要说明下swipe的接口参数(js里面是这么称呼的么?):
startSlide Integer (default:0) - 开始滚动的位置
speed Integer (default:300) - 动画滚动的间隔(秒数)
auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
stopPropagation Boolean (default:false) - 是否停止事件冒泡
callback Function - 幻灯片运行中的回调函数
transitionEnd Function - 动画运行结束的回调函数
api:
prev():上一页
next():下一页
getPos():获取当前页的索引
getNumSlides():获取所有项的个数
slide(index, duration):滑动方法
然后自己要实现的代码就可以写在那些回调函数中(如callback等)
html>
xx的相册
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
#slider {
max-width: 650px;/* 设置最大的宽度 */
margin: 0px auto; /* 居中对齐 */
}
figure {
margin: 0;/* 对齐,四周宽度都为0,在轮播的时候,以整张图片进行移动 */
}
div.swipe {
border: 1px solid blue;
}
.page-swipe nav #position {
text-align: center;
list-style: none;
margin: 0;
padding: 0
}
.page-swipe nav #position li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #141414;
box-shadow: inset 0 1px 3px black,0 0 1px 1px #202020;
margin: 0 2px;
cursor: pointer
}
.page-swipe nav #position li.on {
box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color: #1293dc;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
background-image: -moz-linear-gradient(top,#1293dc,#0f6297);
background-image: -ms-linear-gradient(top,#1293dc,#0f6297);
background-image: -o-linear-gradient(top,#1293dc,#0f6297);
background-image: linear-gradient(top,#1293dc,#0f6297)
}
var slider =
Swipe(document.getElementById('slider'), {
auto: 3000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while(i--){
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
html5 swipejs,移动web最简洁的滑动效果Swipe JS(适合初学者)相关推荐
- 移动web最简洁的滑动效果Swipe JS(适合初学者)
最近要做一个移动web的项目,前端后端都自己一人来搞.由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html.js.css都预览 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
- tween.js一个平滑动效果的js动画库
tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
http://www.jiawin.com/swipe-mobile-touch-slider/ 想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右 ...
- HTML5的web开发,基于Html5技术的WEB开发
摘 要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...
- 10个超赞的HTML5框架加快Web开发
为了加快开发进程和实现一些高级功能,Web开发人员常求助于框架.本文,我们将介绍一些流行的HTML5框架,可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分,还等什么 ...
- HTML5 将改变Web开发模式
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术.HTML 5有两大特点 ...
- HTML5将重塑Web世界?,互联网营销
HTML5将改变互联网的方方面面.HTML5可能不会完全取代Flash,但它会重塑互联网,使浏览器无需借助插件就可以做更多的工作,从位置跟踪.视频播放到把云端的数据缓存到本地,最终能使互联网更安全.更 ...
- jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
最新文章
- 高性能WEB开发(6) - web性能测试工具推荐
- Java必备主流技术流程图
- linux如何更改服务器时间格式,Linux中date命令,格式化输出,时间设置
- 自定义View时,用到Paint Canvas的一些温故,讲讲平时一些效果是怎么画的(基础篇 一)...
- python 基础知识点整理 和具体应用
- kotlin字符串数组_Kotlin程序读取,遍历,反向和排序字符串数组
- Modularity(模块化-ES6)
- 如何使用 Lucene 做网站高亮搜索功能?
- 发布NGuestBook(一个基于.NET平台的分层架构留言本小系统)
- [C++] 前置++与后置++
- think-cell 加载项在 Office 出现故障后消失,怎么解决?
- 随机森林python反欺诈_基于三明治结构深度学习框架的金融反欺诈模型研究与应用...
- Java 简单的韩信点兵问题
- 【stm32】单片机学习——小车的开环控制
- 玩客云添加到我的计算机,电脑连接玩客云访问玩客云硬盘空间传输文件方法
- 优胜劣汰,WiFi会被5G淘汰吗?
- 如何用excel求平均数?认准average()——搜索函数时千万别输mean,否则会得到geomean()
- [Huffman树] aw149. 荷马史诗(哈夫曼模型+贪心)
- visual svn for visual studio 2019
- PHP超全局变量之$_GETT和$_POST
热门文章
- 搭建java环境和java学习
- String 源码浅析————终结篇
- 基于XMPP协议的Android即时通信系(http://blog.csdn.net/lnb333666/article/details/7471292)...
- 威联通Docker安装为知笔记方法
- 台计算机的本地打印机 并且,三台电脑,怎么共用一台打印机?
- Java如何处理参数中带特殊符号的请求?
- HTTP GET 请求在请求体中带参数的问题
- gc算法 java_Java的GC机制及算法
- Android实用视图动画及工具系列之九:漂亮的图片选择器,高性能防崩溃图片选择工具
- 使用Euclid算法求最大公约数