This article illustrates the jquery+ajax of the article to achieve the function of point-praise. Share to everyone for your reference, specific as follows:
A few days ago there are children's shoes asked me to ask for this site on the top right corner of the function, the wheat onion pondered over, decided to share this function, I hope this feature will bring convenience to you oh.
The code is simple, jquery+php implemented.
jquery Code:
JQuery (document). Ready (function ($) {
$ (". Zan"). Click (function (e) {
var $i =$ (". Zan i"), $b =$ ("<b>"). Text ("+1"), N=parseint ($i. Text ());
$b. css ({
"bottom": 0,
"z-index": 999,
});
$i. Text (n+1);
$ (". Zan"). Append ($b);
$b. Animate ({"Bottom": "Opacity": 0},1000,function () {$b. Remove ();});
var d = setinterval (function () {
clearinterval (d);
if ($ (". Zan B"). length = = 1) {
$.post ("", {zan: $i. Text ()})
}
},1000
e.stoppropagation ();
});
});
PHP Code:
<?php
$path = "Zan.txt";
if (Isset ($_post[' Zan ')) {
$num = (int) $_post[' Zan '];
$save = fopen ($path, "w");
Fwrite ($save, $num);
Fclose ($save);
echo "Good";
Exit ();
$zan = file_exists ($path)? Intval (file_get_contents ($path)): 0;
}
? >
HTML code:
<div class= "main" > <div class= "Zan" ><em> reader gave <i><?php echo $zan;?></i> </em></div> </div>
With the appropriate CSS style:
. main {position:relative; font-size:10pt; line-height:18px; margin:40px auto; width:800px; height:170px;-webkit-us Er-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; User-select:none}
. Zan {position:absolute; top:20%; left:45%; width:160px; height:110px; Background:url ("zan.jpg") Center No-repeat C Ursor:pointer; opacity:0.85; }
. zan:active {opacity:1}
. Zan em {position:absolute; color: #333; font-style:normal; bottom: -15px; width:100%; text-align:center;}
. Zan I {font-style:normal; color: #E94F06;}
. Zan b {position:absolute; color: #E94F06; font-style:normal; bottom: -15px; width:100%; text-align:center;}
That's it, it's easy!
Here's the complete code:
<?php $path = "Zan.txt"; if (Isset ($_post[' Zan ')) {$num = (int) $_post[' Zan ']; $save = fopen ($path, "w"); Fwrite ($save, $num); fclose ($save); echo "
Good ";
Exit (); } $zan = File_exists ($path)? Intval (file_get_contents ($path)): 0?> <!doctype html>
The title said there is no limit to the point of praise, so, the wheat onion told everyone a tip:
* * NU Praise * *
jquery.noconflict ();
Function Zan () {
setinterval (function () {
jQuery (". Zan"). Click ();
Zan ();
}, ()
}
Zan ();
Of course, if you use the acceleration of the CC (wheat onion is), the wrath of the request too much, will be blocked out Oh! Unless you cancel the post in jquery.
I hope this article will help you with the jquery program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
