Home>

The like function to implement is relatively simple.Is to implement a click button,Going upwards,Keep floating out of the screen.

First you only need to define a button in the body. He Sheng assured box

<div id="demo"></div>
<input type="button" id="btn1" value="Like a Like" />

Since we have to introduce pictures of our hearts,So here we also set the image img style when setting the css style.

The css code is as follows:

<style type="text/css">
 * {
 margin:0px;
 padding:0px;
 }
 #btn1 {
 position:absolute;
 bottom:100px;
 width:200px;
 background-color:lightblue;
 font-size:18px;
 left:45%;
 }
 img {
 bottom:100px;
 margin-left:-15px;
 width:20px;
 height:20px;
 position:absolute;
 left:50%;
 }
 </style>

The next step is to write jquery functions.

(document) .ready (function () {
//1. First bind the button to the click event.
("#Btn1"). Click (function () {
//2. Generate colored hearts,That is, pictures are randomly selected.
//2.1 generate random numbers
var num=math.floor (math.random () * 3 +1);
//2.2 generate an img element and add src attribute to it
var image=$("");
//The names of the three pictures are 1.png \ 2.png \ 3.png, so the path of img and the picture name can be stitched on the line
image.attr ("src", "./images /" + num + ". png");
//3. Append the generated img to the page
$("#Demo"). Append (image);
//4. Come down to make your heart move.
Float up from where you clicked the button.
Using jquery's animation function animate ()
//Generate a random distance from the left,This will make the heart feel upward
var left=math.random () * 800;
image.animate ({
"bottom":"800px","left":left,"opacity":"0"
}, 3000);
});
});
});
  • Previous AngularJS basic ng-hide instruction usage and sample code
  • Next The difference between final, finally and finalize in java