波纹按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta name="name" content="content" charset=‘utf-8‘>
	<script src="jquery-1.12.4.min.js"></script>
	<style type="text/css" media="screen">
		/*tab切换*/
		.list-tab{
		    position: relative;
		    top: 0;
		    left: 0;
		    z-index: 10;
		    box-sizing: border-box;
		    width: 100%;
		    height: 50px;
		    background: #fff;
		    font-size: 14px;
		    line-height: 50px;
		}
		.list-tab-fill{
		  position: absolute;
		  margin-bottom: 12px;
		  width: 100%;
		  height: 50px;
		  max-width: 640px;
		}
		.list-tab ul {
		  position: relative;
		  /*box-shadow: 0 1px 3px rgba(0, 0, 0, .2);*/
		  overflow: hidden;
		}
		.list-tab li{
		  position: relative;
		  float: left;
		  overflow: hidden;
		  width: 25%;
		  color: #666;
		  text-align: center;
		  text-transform: uppercase;
		  cursor: pointer;
		}

		.list-tab li.slider {
		    position: absolute;
		    bottom: 0;
		    left: 40px;
		    display: block;
		    height: 2px;
		    background: #6E5EA6;
		    -webkit-transition: all 0.5s;
		    transition: all 0.5s;
		}
		.list-tab li.current{
		    color: #6E5EA6;
		}
		.ripple {
		    position: absolute;
		    width: 0;
		    height: 0;
		    border-radius: 50%;
		    background: rgba(108, 0, 255, 0.2);
		    opacity: 1;
		    -webkit-transform: scale(0);
		    transform: scale(0);
		    -ms-transform: scale(0);
		}

		.rippleEffect {
		    -webkit-animation: rippleDrop .6s linear;
		    animation: rippleDrop .6s linear;
		}
		@-webkit-keyframes rippleDrop {
			100% {
			    opacity: 0;
			    -webkit-transform: scale(2);
			    transform: scale(2);
			}
		}
		@keyframes rippleDrop {
			100% {
			    opacity: 0;
			    -webkit-transform: scale(2);
			    transform: scale(2);
			}
		}
	</style>
</head>
<body>
	<script>
        function resetFontSize(){
		    $(‘html‘).css(‘font-size‘, $(‘body‘).width()/16);
		}
		resetFontSize();
		$(window).resize(function(){
		    resetFontSize();
		});

	</script>
    <div class="list-tab">
        <div class="list-tab" id="list-tab">
	        <ul class="clearfix">
	            <li data-tab="1">公司介绍</li>
	            <li data-tab="2">团队介绍</li>
	            <li data-tab="3">加入我们</li>
	            <li class="slider"></li>
	        </ul>
	    </div>
    </div>
    <script>
        $(‘ul‘).on(‘touchstart‘,‘li‘,function(e){
        	var self = $(this);
        	// 当前tab所在第几个
        	var buttonWidth = self.width(),buttonHeight = self.height();
	        var whatTab = self.index(),slider=$(‘.slider‘);
	        //需要移动多少距离
	        var howFar = buttonWidth * whatTab;
	        slider.css({
	            left: (howFar)+ 40 + "px"
	        });
        	$(".ripple").remove(‘.ripple‘);
        	self.prepend("<span class=‘ripple‘></span>");
        	$(".ripple").css({
	            width: buttonWidth,
	            height: buttonHeight,
	            top: 0,
	            left: 0
	        }).addClass("rippleEffect");
	        e.preventDefault();
        });
    </script>
</body>
</html>

  

时间: 2024-09-27 07:00:27

波纹按钮的相关文章

自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果

前言:每当感叹自己的失败时,那我就问你,如果让你重新来一次,你会不会成功?如果会,那说明并没有拼尽全力. 最近博主实在是太忙了,博客更新实在是太慢了,真是有愧大家. 这篇将是Shader的最后一篇,下部分,我们将讲述Canvas变换的知识.在讲完Canvas变换以后,就正式进入第三部曲啦,是不是有点小激动呢-- 今天给大家讲的效果是使用RadialGradient来实现水波纹按钮效果,水波纹效果是Android L平台上自带的效果,这里我们就看看它是如何实现的,本篇的最终效果图如下 一.Radi

RippleView(波纹按钮)的效果实现

Android M已经发布,但是很多机器才升级到Android L,升级到L之后我们发现很多的按钮点击的时候会有一圈波纹扩散出去的效果,炫酷到没朋友.但是不是所有的版本上都有这个效果的,怎么办呢?有大神开发出了一个nineOldAndroid的动画包,我们可以使用里面的api做自定义的开发这样就可以用到各种版本上面了. 传送门在此: http://nineoldandroids.com/ https://github.com/JakeWharton/NineOldAndroids 我找到了这么一

css3+jQuery实现按钮水波纹效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>水波纹按钮</title> &

Python爬取CSDN博客文章

之前解析出问题,刚刚看到,这次仔细审查了 0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.windows下环境搭建 3.java里连接redis数据库 4.关于认证 5.redis高级功能总结1.基础底层数据结构1.1.简单动态字符串SDS定义: ...47分钟前1 url :http://blog.csdn.net/youyou1543724847/

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧. 1.HTML5 SVG实现会跳舞的花朵 4种跳舞心情 这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花.首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯

如何使用纯 CSS 制作四子连珠游戏

序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指正. 原文:How the Roman Empire Made Pure CSS Connect 4 Possible 翻译:nzbin 实验是学习新技巧.思考新想法.并突破自身极限的有趣的方式."纯 CSS"演示很早就有了,但是随着浏览器和

Android自定义组件系列【14】——Android5.0按钮波纹效果实现

今天任老师发表了一篇关于Android5.0中按钮按下的波纹效果实现<Android L中水波纹点击效果的实现>,出于好奇我下载了源代码看了一下效果,正好手边有一个Nexus手机,我结合实际效果看了一下,发现有一些地方和实际效果稍有不同,参考任老师的博文实现简单实现了一个重写View组件的代码,将全部代码贴出,如果有什么问题或者更好的方式请指出,在此再次感谢任老师的这篇博文. 转载请说明出处:http://blog.csdn.net/dawanganban 顺便在这里拉一下票,如果你觉得这篇文

android 按钮特效 波纹

在drawable下 新建一个xml文件,比如ripple.xml 内容如下: ==================== <?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FF9e9e9e"> <item a

Android Ripple 按钮水波纹效果(二)优化

上一篇中我们讲了自定义ripple 水波纹效果,先来回顾一下效果吧! 看了以后感觉没甚么问题,我一开始也觉得很满意了,那好,我们拿Android 5.0自带的效果来对比一下 发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边缘!而系统自带的则不存在这种情况,所以这是一个优化点;另一个优化点是:我们自定义的效果,在波纹全部覆盖