原生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的相关特性 ...
随机推荐
- socket网络编程快速上手（二）——细节问题（2）
2.TCP数据包接收问题 对初学者来说,很多都会认为:客户端与服务器最终的打印数据接收或者发送条数都该是一致的,1000条发送打印,1000条接收打印,长度都为1000.但是,事实上并不是这样,发送打 ...
- DotNetBar v11.4.0.6 Fully Cracked
更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=11.4.0.6 如果遇到破解问题可以与我 ...
- enode框架step by step之消息队列的设计思路
enode框架step by step之消息队列的设计思路 enode框架系列step by step文章系列索引: enode框架step by step之开篇 enode框架step by ste ...
- 【Android LibGDX游戏引擎开发教程】第08期：中文字体的显示和绘制（下）
在上一篇的文章中,我们介绍了Hiero这个非常好用工具的使用,但是LIbgdx的BitmapFont不支持多图,常用汉字 3500个,你总不能用hiero自己做吧,那怎么办呢?这其实微软早就解决这个问 ...
- 理解git对象
1. 首次提交,提交一个简单的文件 a.txt ,commit 之后的图如下: 如图所示,生成了 3 个对象,一个 commit 对象,一个 tree 对象,一个 blob 对象.图上蓝底是 co ...
- ubuntu安装 cober 笔记
设置原始Ubuntu原始Root密码 安装Mysql 安装Jdk 拷贝Cober到Linux,启动服务(看日志) 设置原始Ubuntu原始Root密码 $ sudo passwd root 修改系统文 ...
- python3.5学习之路_day1_login
登录程序1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor zhangxiaoyu ...
- 二度云抢先成为首批中国工信部（.vip/.xyz/.club）域名注册管理机构
今天,工信部官网的公示文件显示,新通用顶级域名.vip..xyz以及.club域名注册局已正式获得工信部审批,成为中国境内合法的顶级域名注册管理机构,这标志着.vip..xyz以及.club域名成为首 ...
- iOS开发-OC语言 (五)字典
字典 主要知识点: 1.NSDictionary 类 2.NSMutableDictionary 类 3.了解NSMutableDictionary 与 NSDictionary 的继承关系 4.补充 ...
- Spring总结 0.概述
由于之前学了好多知识,感觉挺乱的.趁放假,想对这些知识复习归纳下.所以就有了这些随笔啦.随笔中可能会出现错误哈,万一有人看了并且发现了留言哈.勿喷,谢谢哈~先对Spring进行简要概括,以下内容有些摘 ...