原生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的相关特性 ...
随机推荐
- 马丁·福勒-page对象
马丁·福勒-page对象 译者注:这篇文章翻译自马丁·福勒(Martin Flower,对,没错,就是软件教父)官网的一篇文章,原文出处在文底.如果你正在做WEB自动化测试,那么我强烈推荐你看这篇文章 ...
- SQL Server 2008 - Cannot set a credential for principal 'sa'.
SQL Server 2008 - Cannot set a credential for principal 'sa'. 很久没有用到SQL Server了,今天有幸在帮同事解决一个SQL Serv ...
- Redis协议详解
smark Beetle可靠.高性能的.Net Socket Tcp通讯组件 支持flash amf3,protobuf,Silverlight,windows phone Redis协议详解 由于前 ...
- Winform DataGridView CheckBoxColumn c# 单选 解决方案
这个问题由来已久,我最近在工作中也遇到了这个问题,不过属于这个问题比较简单初级的涉及. 发现网上对这个问题的解决方案很多不对,答非所问. 所以这里将我测试成功的解决方案记录下来. 首先,DataGri ...
- Dalvik虚拟机的垃圾收集机制
垃圾收集机制是Java虚拟机共有的特性, 这里介绍Dalvik虚拟机的垃圾收集机制特点. 在android2.3之前,有以下几个特点: 1. 垃圾收集线程在执行的时候,其它线程都停止. 2. 一次 ...
- 给Activity切换加入动画
在startActivity或finish()后,调用overridePendingTransition方法,可以加入动画效果.例如: 使用Android自带的淡入淡出:android.R.anim. ...
- js 调用父窗口的方法
opener.show(); 父窗体需要顶一个show() 方法 父面页代码: <!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN" ...
- 【stanford C++】字符串(String)与流(Stream)
字符串(String)与流(Stream) 一.C++中字符串(String) 字符串(String):就是(可能是空的)字符序列. C++中的字符串在概念上和Java中的字符串类似. C++字符串用 ...
- Java中数组Arrays.binarySearch，快速查找数组内元素位置
在数组中查找一个元素,Arrays提供了一个方便查询的方法.Arrays.binarySearch(): 测试列子: public class MainTestArray { public stati ...
- java类静态域、块，非静态域、块，构造函数的初始化顺序
原文:http://ini.iteye.com/blog/2007835 面试的时候,经常会遇到这样的考题:给你两个类的代码,它们之间是继承的关系,每个类里只有构造器方法和一些变量, 构造器里可能还有 ...