1 463 Этот короткий пост и простая идея о создании системы голосования с помощью анимации jQuery.
Такая реализация подойдет тем, кто использует много изображений в своей системе голосования.
А сама идея состоит в том, чтобы изменять свойство ширины элемента DIV с помощью анимации на jQuery.
Смотрим.
Поскольку все просто, то мы не стали разделять коды и выкладывать исходники на скачивание.
Просто зацените код.
Весь код (HTML, JQuery, CSS)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <title>JQuery Simple Vote</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.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; } body { margin: 0; padding: 0; background: #ffffff url('trentanove.gif') repeat right top; } </style> </head> <body> <div id="container"> <span id="question">What is your favorite server side language?</span> <div><span>0</span><a href="">Vote</a>PHP</div> <div><span>0</span><a href="">Vote</a>Ruby</div> <div><span>0</span><a href="">Vote</a>Java</div> <div><span>0</span><a href="">Vote</a>ASP</div> <div><span>0</span><a href="">Vote</a>Perl</div> <div><span>0</span><a href="">Vote</a>ColdFusion</div> </div> </body> </html> |
