master

分支 (1)

管理

管理

master

aboutjs
/
zan.html

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS</title>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
	*{margin:0;padding:0;}
	.demo{width:100px;margin:300px auto;}
	a{background:#14a5eb;width:100px;height:36px;line-height:36px;display:inline-block;margin:0 auto;text-decoration:none;color:#fff;text-align:center;position:relative;}

    .ripple {
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        position: absolute;
        opacity: 1;
    }.rippleEffect {
        -webkit-animation: rippleDrop .4s linear;
        animation: rippleDrop .4s linear;
    }

    @-webkit-keyframes rippleDrop {
        100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
        }
    }
    @keyframes rippleDrop {
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    .zanNum{width:80px;position:absolute;z-index:999;text-align:center;left:50%;margin-left:-40px;}

    </style>
</head>
<body>
	<div class="demo">
		<a href="javascript:;">点击</a>
	</div>

<script>
$.extend({
	tipsBox: function (options) {
		options = $.extend({
			obj: null,  //jq对象，要在那个html标签上显示
			str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
			startSize: "12px",  //动画开始的文字大小
			endSize: "30px",    //动画结束的文字大小
			interval: 600,  //动画时间间隔
			color: "red",    //文字颜色
			callback: function () { }    //回调函数
		}, options);
		$("body").append("<span class='zanNum'>" + options.str + "</span>");
		var box = $(".zanNum");

		var top = options.obj.offset().top - options.obj.height();
		box.css({
			"top": top + "px",
			"font-size": options.startSize,
			"line-height": options.endSize,
			"color": options.color
		});
		box.animate({
			"font-size": options.endSize,
			"opacity": "0",
			"top": top - parseInt(options.endSize) + "px"
		}, options.interval, function () {
			box.remove();
			options.callback();
		});
	}
});


$(".demo a").click(function(e) {

    $(".ripple").remove();

    var posX = $(this).offset().left,
        posY = $(this).offset().top,
        buttonWidth = $(this).width(),
        buttonHeight = $(this).height();
    $(this).append("<span class='ripple'></span>");

    if (buttonWidth >= buttonHeight) {
        buttonHeight = buttonWidth;
    } else {
        buttonWidth = buttonHeight;
    }

    var x = e.pageX - posX - buttonWidth / 2;
    var y = e.pageY - posY - buttonHeight / 2;

    $(".ripple").css({
        width: buttonWidth,
        height: buttonHeight,
        top: y + 'px',
        left: x + 'px'
    }).addClass("rippleEffect");


    $.tipsBox({
		obj: $(this),
		str: "+1",
		callback: function () {
			// ajax请求
		}
	});

});
</script>
</body>
</html>