<html><head>
<meta charset="UTF-8">
<title>QQ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mqq-bottom-ad" content="no">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head>
<style> body { background: url(http://thecodeplayer.com/u/m/b1.png) no-repeat; background-size: cover;margin:0;}
h1 { color: #fff;}
ul,li{ margin: ; padding: ;}
ul { border-top: 6px solid hsl(, %, %); width: 200px; background: #fff; }
li {position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-bottom: none;
list-style: none;
}
li a { display: block; padding: 10px 15px; font: normal 14px/28px "Montserrat"; -webkit-user-select: none; position: relative; color: hsl(, %, %); text-decoration: none;} .ink { position: absolute;
display: block;
background: hsl(, %, %);
left: ;
top: ;
-webkit-transform: scale();
-moz-transform: scale();
-o-transform: scale();
transform: scale();
border-radius: %; }
.animation {
-webkit-animation: ripple 1s ease-in-out;
}
@-webkit-keyframes ripple{ % { opacity: ; -webkit-transform: scale();} } </style>
<body> <h1>12月8日Demo</h1>
<ul>
<li><a data-link="true" href="#">按钮1</a></li>
<li><a href="#">按钮2</a></li>
<li><a href="#">按钮3</a></li>
<li><a href="#">按钮4</a></li>
<li><a data-link="true" href="#">按钮5</a></li>
<li><a data-link="true" href="#">按钮6</a></li> </ul> <script> $("a").on("click", function(e){
// e.preventDefault();
var parent = $(this).parent(); if(!parent.find(".ink").length){
parent.prepend('<span class="ink"></span>');
} /** if(!parent.hasClass(".ink")){
parent.prepend('<span class="ink"></span>');
}else if(parent.hasClass(".ink")){
return false;
}
*/ var ink = parent.find(".ink"); ink.removeClass("animation"); if(!ink.width() && !ink.height()){
//var d = Math.max(parent.innerWidth(),parent.innerHeight());
//var d = Math.max(parent.outerWidth(),parent.outerHeight());
var d = Math.max(parseInt(parent.css('width')),parseInt(parent.css('height')));
// alert(d)
ink.css({
width: d,
height:d,
});
}
//设置ink的绝对位置 var top = e.pageY - parent.offset().top - ink.height()/;
var left = e.pageX - parent.offset().left - ink.width()/; ink.css({
top: top,
left: left
});
ink.addClass('animation'); });
</script> </body>

按钮点击效果jquery的更多相关文章

  1. android 按钮点击效果实现

    在其他人的博客里看到其实实现按钮点击效果的方法有很多,这里提到的只是其中一个办法 图片素材(我自己用截图截的,可以自己搞) 放到mipmap目录下(studio是在这个目录下 , eclipse 直接 ...

  2. Android实现按钮点击效果(第一次点击变色,第二次恢复)

    1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" ...

  3. Web前端-按钮点击效果(水波纹)

    这种效果可以由元素内嵌套canves实现,也可以由css3实现. Canves实现 网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下 第一种方法: html骨架 ...

  4. Android下实现win8的按钮点击效果

    原理就是自定义一个imageButton,实现动画效果 demo源码下载地址:  请戳这里----------------> 关于回弹张力的效果扩展,可以参考Facebook的开源动画库rebo ...

  5. Android5.0新特性之——按钮点击效果动画(涟漪效果)

    Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...

  6. UITableView上添加按钮,按钮点击效果延迟的解决办法

    在自定义的TableView的初始化方法做如下操作 - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame: ...

  7. android 按钮点击效果实现 在studio下出现的错误

    在照做上一篇随笔的时候 在studio下为了方便我在写完一个 btn_select.xml 文件后直接粘贴了三个文件到drawable下 结果问题来了 总是报这样一个错误: Resource is n ...

  8. css实现按钮点击效果(超简单)

    在html中设置class: <button class="button1">click</button> css中如下所示: .button1{    p ...

  9. Android之水波纹点击效果(RippleView)

    Android5.0后各种炫的效果纷纷出来,写这篇博客主要是讲的是按钮点击效果带有的水波纹(波浪式). 当然我写的这个是自定义来实现的,在低版本(5.0一下)也可以实现点击效果.看看效果图: 上图可看 ...

随机推荐

  1. Table Lookup

    做OJ的时候,做过类似的,即hash.算法很简单,关键是书上写的和做OJ,是完全不同的风格.有很多值得学习的地方. /* * Table Lookup * 详见<<C程序设计语言>& ...

  2. -_-#【Angular】工具函数

    AngularJS学习笔记 上下文绑定 var f = angular.bind({a: 'xx'}, function() { console.log(this.a) }) f() // 'xx' ...

  3. Linux下的getline函数

    最近在做国嵌的mp3项目,在mp3主控程序中用到了这个函数,挺好使的,在这里记录一下.注意是linux下的,不是C++中的. 函数原型 ssize_t getline(char **lineptr, ...

  4. LinGo:投资问题——线性规划

    一.根据题目所给数据,建立一张表格方便查看 项目A 项目B 项目C 项目D 可投资年 1,2,3,4 3 2 1,2,3,4,5 收回本利年 次年年末 第5年 第5年 当年年末 本利 1.06 1.1 ...

  5. 关于java函数参数的修改能否带出来

    结论 1. java的8个基本类型,无论是简单类型(比如int)还是类类型(比如Integer),传到形参里的变量,在函数体内修改之后是带不出来的. 2. String类型也是带不出来的. 3. 数组 ...

  6. [Design Pattern] Command Pattern 命令模式

    发现公司的代码好像有用到 Command Pattern,回顾重温下. Command Pattern 的类图结构如下: 参考 <Head First Design Patterns(英文版)& ...

  7. 夏普比率(Sharpe Ratio)

    投资中有一个常规的特点,即投资标的的预期报酬越高,投资人所能忍受的波动风险越高:反之,预期报酬越低,波动风险也越低.所以理性的投资人选择投资标的与投资组合的主要目的为:在固定所能承受的风险下,追求最大 ...

  8. Struts2学习笔记(二):第一个Struts2应用

    一.创建Action类. 创建工程Struts2Demo struts 2中的Action类并不需要继承struts 2中的某个父类,普遍的java类就可以. 在org.sunny.user.acti ...

  9. Android中自定义Activity和Dialog的位置大小背景和透明度等

    1.自定义Activity显示样式 先在res/values下建colors.xml文件,写入: view plainprint? 1. <?xml version="1.0" ...

  10. LVS+Keepalived实现MySQL从库读操作负载均衡

    http://www.osyunwei.com/archives/7464.html (学习运维知识好站) 说明: 操作系统:CentOS 5.X 64位 MySQL主服务器:192.168.21.1 ...