<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. Qt中添加背景图片的方法

    工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和QPushButton,QFrame做主面板,QPushButton为其子控件,需要在主面板上贴背景图片,还需要在QPushButton ...

  2. 打patch p0 p1区别

    如何使用patch 对于一个patch文件,有两种常用使用方法: 1.代码:cat new-patch | patch -p0 2.代码:patch -p0 < new-patch   patc ...

  3. POJ 1511 SPFA+邻接表 Invitation Cards

    题目大意: 计算从 1 点 到 其他所有点的 往返距离之和, 因为是 有向图, 所以我们需要将图反存 一次, 然后求两次单源最短路, 结果就出来了. #include <iostream> ...

  4. HBase Java API入门

    概括 1. 创建.删除及启用禁用表.添加列等都需用到HBaseAdmin,另外需要注意删除,添加列等操作都需要禁用表 2. 表中添加数据,查询等都是和HTable相关,如果是多线程的情况下注意用HTa ...

  5. vs2010旗舰版产品密钥

    Microsoft Visual Studio 2010(VS2010)正式版 CDKEY / SN: YCFHQ-9DWCY-DKV88-T2TMH-G7BHP 企业版.旗舰版都适用

  6. WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  7. C/C++中如何获取数组的长度?

    C.C++中没有提供 直接获取数组长度的函数,对于存放字符串的字符数组提供了一个strlen函数获取长度,那么对于其他类型的数组如何获取他们的长度呢?其中一种方法是使 用sizeof(array) / ...

  8. JS中字符串倒序的两种方法

    var reverse = function( str ){ var stack = [];//生成一个栈 for(var len = str.length,i=len;i>=0;i-- ){ ...

  9. Java线程的相关方法

    ~ start()  启动线程方法 ~ run()  调用start()方法时,真正执行的就是该方法的方法体 ~ sleep()  让当前线程睡眠,睡眠到期自动苏醒,并进入可运行状态,而不是运行状态 ...

  10. ios开发应用内实现多语言自由切换

    需求描述:应用内部有一按钮,点击切换语言(如中英文切换).说起来这个是好久以前做的一个功能点了,刚开始也是没有头绪,后来解决了发现很简单,把方法分享一下.1.原理.查看NSLocalizedStrin ...