search

Home  >  Article  >  Web Front-end  >  jQuery implements non-refresh histogram voting code with animated effects based on ajax_jquery

jQuery implements non-refresh histogram voting code with animated effects based on ajax_jquery

WBOY
WBOYOriginal
2016-05-16 15:46:04979browse

The example in this article describes jQuery’s implementation of a non-refresh bar chart voting code with animated effects based on ajax. Share it with everyone for your reference. The details are as follows:

The jQuery ajax voting effects introduced here are bar charts with animation effects similar to the progress bar style. Take your favorite programming language as an example to demonstrate the voting effect. Ajax voting without refreshing, every click , the horizontal histogram will grow by one section. If you browse under Firefox or Chrome, the histogram horizontal bars have rounded corners, but this effect does not exist under IE8.

The screenshot of the running effect is as follows:

The specific code is as follows: 

<!DOCTYPE html>
<html>
<head>
<title>jQuery ajax投票特效,带动画效果 柱状图</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#container div a").click(function() {
  $(this).parent().animate({
   width: '+=100px'
  }, 500);
  $(this).prev().html(parseInt($(this).prev().html()) + 1);
  return false;
 });
});
</script>
<style type="text/css">
* {
 font-family: Arial, "Free Sans";
}
#container {
 margin-top: 20px;
 color: #fff;
}
#container #question {
 display: block;
 padding: 20px;
 font-weight: bold;
 letter-spacing: -3px;
 margin-bottom: 20px;
 padding: 10px;
 font-size: 40px;
}
#container div {
 font-weight: bold;
 letter-spacing: -3px;
 background: #0099cc;
 margin-bottom: 15px;
 padding: 10px;
 font-size: 34px;
 color: #ffffff;
 border-left: 20px solid #333;
 width: 400px;
 -webkit-border-radius: 0.5em;
 -moz-border-radius: 0 0.5em 0.5em 0;
 border-radius: 0 1.5em 1.5em 0;
}
#container div a {
 border-radius: 0.3em;
 text-decoration: none;
 color: #0099cc;
 padding: 5px 15px;
 background: #333;
 margin: 0 20px;
}
#container div a:hover {
 color: #fff;
}
#main {
 background: #0099cc;
 margin-top: 0;
 padding: 2px 0 4px 0;
 text-align: center;
}
#main a {
 color: #ffffff;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 font-family: Arial;
}
#main a:hover {
 text-decoration: underline;
}
body {
 margin: 0;
 padding: 0;
 background: #ffffff url('http://files.jb51.net/file_images/article/201508/2015810110844109.gif') repeat right top;
}
#text {
 margin: 0 auto;
 width: 500px;
 font-size: 12px;
 color: #0099cc;
 font-weight: bold;
 text-align: center;
 margin-top: 20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
 <div id="container">
  <span id="question">你最喜欢的编程语言是哪一种？</span>
  <div><span>0</span><a href="">投票</a>PHP</div>
  <div><span>0</span><a href="">投票</a>Ruby</div>
  <div><span>0</span><a href="">投票</a>Java</div>
  <div><span>0</span><a href="">投票</a>ASP</div>
  <div><span>0</span><a href="">投票</a>Perl</div>
  <div><span>0</span><a href="">投票</a>ColdFusion</div>
 </div>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to internal attributes and delete operator in js_javascript skillsNext article：Introduction to internal attributes and delete operator in js_javascript skills

Related articles

See more