原生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的相关特性 ...
随机推荐
- django安装配置及测试
django安装之前我们假设你已经安装了python,和mysql(不是必须的):(如果没有google一下挺简单不介绍了)下面直接介绍django的安装配置:到下面连接可以下载www.djangop ...
- 序列化和反序列化的几种方式(DataContractSerializer)
序列化和反序列化的几种方式(DataContractSerializer) DataContractSerializer 类 使用提供的数据协定,将类型实例序列化和反序列化为 XML 流或文档. 无法 ...
- SQLSERVER之高灵活的业务单据流水号生成
SQLSERVER之高灵活的业务单据流水号生成 最近的工作中要用到流水号,而且业务单据流水号生成的规则分好几种,并非以前那种千篇一律的前缀+日期+流水号的简单形式,经过对业务的分析,以及参考网上程序员 ...
- 基于Hadoop开发网络云盘系统架构设计方案
基于Hadoop开发网络云盘系统架构设计方案第一稿 引言 云计算技术的发展,各种网络云盘技术如雨后春笋,层出不穷,百度.新浪.网易都推出了自己的云盘系统,本文基于开源框架Hadoop设计实现了一套自己 ...
- JS实现以日历形式显示当前时间
效果图: <script language="Javascript"> var datelocalweek=new Array("星期日", &qu ...
- php5.3.*编译出现make: *** [ext/gd/libgd/gd_compat.lo] Error 1 解决方法
升级系统,把php5.2.9升级到5.3.6,按照以前的编译参数,configure能正常通过,但是在make的时候提示: In file included from /root/php-5.3.6 ...
- 自制AutoMapper实现DTO到持久层Entity的转换
自制AutoMapper实现DTO到持久层Entity的转换 项目中经常涉及到页面DTO更新,保存到数据库的操作,这就必然牵扯到DTO和持久层对象的转换,常见的第三方库有: java:dozer .n ...
- 新软件马上就要完成了,先发篇文章YY下
最近一直都在搞网站抓取方面的开发,闲着无聊逛逛论坛,发现有些帖子还是写的相当不错的,只是一篇一篇的点进去比较麻烦,于是就写了个小软件只是为了方便查看博客园和CSDN上的优秀文章.其实这个还可以拓展的, ...
- mysql处理存在则更新，不存在则插入（多列唯一索引）
mysql处理某个唯一索引时存在则更新,不存在则插入的情况应该是很常见的,网上也有很多类似的文章,我今天就讲讲当这个唯一的索引是多列唯一索引时可能会遇到的问题和方法. 方法一: 使用 INSERT I ...
- RSA算法优化
RSA算法优化 大数乘法 模乗优化 剩余定理(孙子定理) RSA加解密 python的RSA计算优化 #-*- coding: utf-8 -*- ''' /********************* ...