1. 程式人生 > >jqurey實現點贊特效

jqurey實現點贊特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        .container{
            padding: 50px;
            border:  1px solid #dddddd;
        }
        .item{
            position: relative;
            width:30px;
        }
    
</style> </head> <body> <div class="container"> <div class="item"><span >贊</span> </div> </div> <div class="container"> <div class="item"><span >贊</span></div> </div> <div class
="container"> <div class="item"><span >贊</span></div> </div> <div class="container"> <div class="item"><span >贊</span></div> </div> <script src="jquery1.9.js"></script> <script> $(
".item").click(function () { // console.log(11); AddFavor(this); }) function AddFavor(self) { var fontsize=3; var top=0; var right=0; var opcity=1; var tag=document.createElement('span'); $(tag).text("+1"); $(tag).css("color","green"); $(tag).css("position","absolute"); $(tag).css("fontSize",fontsize+"px"); $(tag).css("right",right+"px"); $(tag).css("top",top+"px"); $(tag).css("opacity",opcity); $(self).append(tag); var obj=setInterval(function () { fontsize=fontsize+5; top=top-10; right=right-10; opcity =opcity-0.1; $(tag).css("color","green"); $(tag).css("position","absolute"); $(tag).css("fontSize",fontsize+"px"); console.log(fontsize); $(tag).css("right",right+"px"); $(tag).css("top",top+"px"); $(tag).css("opacity",opcity); if(opcity<0){ clearInterval(obj); $(tag).remove(); } },40); } </script> </body> </html>

注意大小寫