原生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的相关特性 ...
随机推荐
- 新浪微博SDK在Eclipse引入
新浪微博SDK在Eclipse中的使用 新浪微博SDK在Eclipse中的使用 今天在看<Android开发应用实战>,全书都在讲一个android版的新浪微博客户端怎么做,于是按照书上步 ...
- Sqlite in Android
在Android上保存本地数据有三种方式,SharedPreferences.Files和Sqlite.SharedPreferences主要是用来保存键值对形式的程序配置信息,与ini.proper ...
- 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 ...
- IP、子网的详述 ——IP分类、网关地址，子网掩码、子网作用(转)
IP地址 在Internet上连接的所有计算机,从大型机到微型计算机都是以独立的身份出现,我们称它为主机.为了实现各主机间的通信,每台主机都必须有一个唯一的网络地址.就好像每一个住宅都有唯一的门 ...
- 【转】【WebService】.NET C# 创建WebService服务
Web service是一个基于可编程的web的应用程序,用于开发分布式的互操作的应用程序,也是一种web服务 WebService的特性有以下几点: 1.使用XML(标准通用标记语言)来作为数据交互 ...
- asp.net小技巧：保留password模式文本框textbox内的数据不丢失。
在asp.net 2.0环境下,使用textbox,提交到服务器再传回,如果textbox是password模式的,那么textbox内的密码(星号.圆点),就没有了! 一个可行的做法是 : prot ...
- JavaScript中Array.prototype.sort()的详解
摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...
- 本地存储 cookie,session,localstorage( 二)angular-local-storage
原文:https://github.com/grevory/angular-local-storage#api-documentation Get Started (1)Bower: $ bower ...
- JavaEE XML XPath
JavaEE XML XPath @author ixenos XPath技术 1 引入 问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!!需要遍历DOM树的众多节点 ...
- SDN基础
http://www.h3c.com.cn/Solution/Smart_Network/SDN/ http://network.51cto.com/network/content2013/SDNke ...