原生JavaScript+CSS3实现移动端滑块效果
在做web页面时，无论PC端还是移动端，我们会遇到滑块这样的效果，可能我们往往会想着去网上找插件，其实这个效果非常的简单，插件代码的的代码往往过于臃肿，不如自己动手，自给自足。首先看一下效果图：
分析效果：
1、按钮的右侧有一个小动画，深黄色的小头是一圈圈循环流动的。
2、只在按钮上滑动可以启动按钮。
3、并且要判断按钮是否滑到头，如果没有滑到头，手指离开屏幕，按钮自动弹回左侧；如果滑到头，执行一个函数。
解决办法：
1、动画效果需要使用CSS3里面的@keyframes来操作，代码如下：
.god-bottom .swifter-track{
width: 50%;
height: 93%;
border-radius: 5px;
position: absolute;
right:;
top:;
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
-webkit-animation:track 0.5s infinite;
animation:track 0.5s infinite;
}
@keyframes track {
0%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
}
35%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
background-size: 100% 70%;
}
70%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
background-size: 100% 70%;
}
100%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
background-size: 100% 70%;
}
}
@-webkit-keyframes track {
0%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
}
35%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
background-size: 100% 70%;
}
70%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
background-size: 100% 70%;
}
100%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
background-size: 100% 70%;
}
}
2、这里需要分别监听touchstart、touchmove、touchend事件，代码如下：
function sliderFun(outDiv,inDiv,funName) {
var startX,endX,distance=0;
var dis=outDiv.clientWidth-inDiv.clientWidth;
inDiv.addEventListener('touchstart',function (e) {
startX=e.touches[0].clientX;
},false)
inDiv.addEventListener('touchmove',function (e) {
endX=e.touches[0].clientX;
distance=endX-startX;
if(distance<=dis&&distance>=0){
inDiv.style.left=distance+'px';
}
},false)
inDiv.addEventListener('touchend',function (e) {
if(distance<=dis&&distance>=0){
inDiv.style.left='0px';
}else if(distance>=dis){
funName();
}
},false)
}
为了方便大多去测试呢，最后我把所有的代码一并贴上，希望可以帮助到大家：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--强制以webkit内核来渲染-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><!--按设备宽度缩放，并且用户不允许手动缩放-->
<meta name="format-detection" content="telephone=no"><!--不显示拨号链接-->
<title></title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
}
.shadow-big{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
position: fixed;
z-index: 2;
top: 0;
left:0;
/*display: none;*/
}
.money-god-big{
width: 77.333vw;
height: 93vw;
position: fixed;
left:0;
right:0;
top:40vw;
margin: auto;
z-index: 10;
}
.god-bottom{
width: 82.759%;
height: 58.333%;
margin: 0 auto;
background-color: #d63532;
border-radius: 8px;
position: relative;
}
.god-bottom>div{
position: absolute;
left:0;
right:0;
margin: auto;
text-align: center;
width: 100%;
color: #fff;
font-size: 4.8vw;
}
.god-bottom .bottom-ttl{
top: 9.524%;
color: #fcd741;
}
.god-bottom .bottom-money{
top: 27.381%;
font-size: 9.6vw;
}
.god-bottom .bottom-reward{
top: 53.095%;
}
.god-bottom .swifter-out{
width: 87.5%;
height: 21.905%;
top:70.952%;
background-color: #a92d2b;
border-radius: 5px;
position: relative;
}
.god-bottom .swifter-in{
width: 50%;
height: 93%;
background-color: #fcd741;
border-radius: 5px;
color: #d63532;
font-size: 4.8vw;
line-height: 2.4;
position: absolute;
left:0;
top:0;
}
.god-bottom .swifter-track{
width: 50%;
height: 93%;
border-radius: 5px;
position: absolute;
right:0;
top:0;
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
-webkit-animation:track 0.5s infinite;
animation:track 0.5s infinite;
}
@keyframes track {
0%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
}
35%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
background-size: 100% 70%;
}
70%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
background-size: 100% 70%;
}
100%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
background-size: 100% 70%;
}
}
@-webkit-keyframes track {
0%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track1.png") no-repeat 0 55%;
background-size: 100% 70%;
}
35%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track2.png") no-repeat 0 55%;
background-size: 100% 70%;
}
70%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track3.png") no-repeat 0 55%;
background-size: 100% 70%;
}
100%{
background: url("http://images.cnblogs.com/cnblogs_com/luanhewei/880330/o_track4.png") no-repeat 0 55%;
background-size: 100% 70%;
}
}
</style> </head>
<body>
<!--shadow-->
<div class="shadow-big">
<div class="money-god-big">
<div class="god-bottom">
<div class="bottom-ttl">支付成功 奖励红包</div>
<div class="bottom-money">6.00元</div>
<div class="bottom-reward">累计奖励23.25元</div>
<div class="swifter-out">
<div class="swifter-in">存入余额</div>
<div class="swifter-track"></div>
</div>
</div>
</div>
</div>
<script>
// 获取className
function CN(t) {
return document.getElementsByClassName(t);
} var swifterOut1=CN('swifter-out')[0];
var swifterIn1=CN('swifter-in')[0];
var trackImg1=CN('track-img')[0]; var shadowBig=CN('shadow-big')[0]; sliderFun(swifterOut1,swifterIn1,final1);
// 滑动效果
function sliderFun(outDiv,inDiv,funName) {
var startX,endX,distance=0;
var dis=outDiv.clientWidth-inDiv.clientWidth;
inDiv.addEventListener('touchstart',function (e) {
startX=e.touches[0].clientX;
},false)
inDiv.addEventListener('touchmove',function (e) {
endX=e.touches[0].clientX;
distance=endX-startX;
if(distance<=dis&&distance>=0){
inDiv.style.left=distance+'px';
}
},false)
inDiv.addEventListener('touchend',function (e) {
if(distance<=dis&&distance>=0){
inDiv.style.left='0px';
}else if(distance>=dis){
funName();
}
},false)
}
function final1() {
alert("阴影将要消失了！");
shadowBig.style.display='none';
}
</script>
</body>
</html>
原生JavaScript+CSS3实现移动端滑块效果的更多相关文章
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- javascript+html5+css3下拉刷新 数据效果
文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 纯CSS3实现的图片滑块程序 效果非常酷
原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...
随机推荐
- IOS学习之路十四（用TableView做的新闻客户端展示页面）
最近做的也个项目,要做一个IOS的新闻展示view(有图有文字,不用UIwebview,因为数据是用webservice解析的到的json数据),自己一直没有头绪,可后来听一个学长说可以用listvi ...
- cocos2d-x 通过socket实现http下载及断点续传的实现
cocos2d-x 通过socket实现http下载及断点续传的实现 代码未经进一步的整理,可能比较混乱. 首先,2dx的socket库由BSSocket组成.可跨平台,在windows上已验证. 1 ...
- 兼容ie6的图片垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Mobile页面项目总结
项目过去个把月了,一直没有写些东西总结下,这次借着年后的空隙,将当时记录下来的几个点回顾一下. 今明的布局:position技巧 每当看到类似横向并排布局的时候,总是想起定宽浮动,和下面讲到的列表并排 ...
- ShardedJedis实现学习
ShardedJedis实现学习-我们到底能走多远系列(33) 我们到底能走多远系列(31) 扯淡: 工作是容易的赚钱是困难的 恋爱是容易的成家是困难的 相爱是容易的相处是困难的 决定是容易的可是等待 ...
- mybatis3.4测试CRUD
导入包 H:\jar\jdbc\mysql-connector-java-5.1.13-bin.jarH:\jar\mybatis\mybatis-3.4.1\mybatis-3.4.1.jarH:\ ...
- spring和redis的整合
spring和redis的整合-超越昨天的自己系列(7) 超越昨天的自己系列(7) 扯淡: 最近一直在慢慢多学习各个组件,自己搭建出一些想法.是一个涉猎的过程,慢慢意识到知识是可以融汇贯通,举一反三 ...
- 持续集成环境Gitlab-CI的官方安装过程解析
持续集成环境是一个非常重要的工具,在分工合作的项目中有着举足轻重的作用.公司最近要用Gitlab,需要配套的持续集成环境.研究了官方的文档,感觉官方的文档不是很明了.各种修改过后终于成功了.为了大家安 ...
- 新软件马上就要完成了,先发篇文章YY下
最近一直都在搞网站抓取方面的开发,闲着无聊逛逛论坛,发现有些帖子还是写的相当不错的,只是一篇一篇的点进去比较麻烦,于是就写了个小软件只是为了方便查看博客园和CSDN上的优秀文章.其实这个还可以拓展的, ...
- mssql分页原理及效率分析
下面是常用的分页,及其分页效率分析. 1.分页方案一:(利用Not In和SELECT TOP分页) 语句形式: SELECT TOP 10 * FROM TestTable WHERE (ID NO ...