jQueryはajax_html/css_WEB-ITnoseに基づいてスターコメントコードを実装します-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

jQueryはajax_html/css_WEB-ITnoseに基づいてスターコメントコードを実装します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

この記事の例では、ajax に基づいたスターコメントコードの jQuery 実装について説明します。皆さんの参考に共有してください。詳細は次のとおりです。

ここでは、Dianping.com のスターレビュー機能を模倣するために jquery が使用されており、マウスで星をクリックするとスコアが表示されます。インターネット上で非常に人気のあるこのコードは、多くの友人に気に入っていただけると思います。

ランニングエフェクトのスクリーンショットを見てみましょう:

<li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">返回顶部</a></li>  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima" title="图层代码">图层代码</a></li>  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima" title="滚动代码">滚动代码</a></li>  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" title="幻灯片">幻灯片</a></li>  <li><a href="http://www.100sucai.com/web/wangyezhizuo/wenzitexiao" title="文字特效">文字特效</a></li>

ログイン後にコピー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jquery点评网星星评论</TITLE><style>body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}table{border-collapse:collapse;border-spacing:0;}b,em,i{ font-style:normal; font-weight:normal;}h1,h2,h3,h4{ font-size:14px;}h5{ font-size:12px;}h6{ font-size:12px;font-style:normal;}.fl{ float: left; display: inline;}.box_163css{ width: 480px;margin:20px auto; height: 30px;}.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}.star_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;}.star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }.star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}.star_ul li .active-star{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}.star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}.star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}.star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}.star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}.star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}.s_result{ padding: 6px 0 0 5px; }.square_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;}.square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }.square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}.square_ul li .active-square{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}.square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}.square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}.square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}.square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}.square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}.s_result_square{padding: 4px 0 0 9px; }</style><SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT></HEAD><script type="text/javascript">$(function(){ $('.star_ul a').hover(function(){$(this).addClass('active-star');$('.s_result').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-star');$('.s_result').css('color','#333').html('请打分')}); $('.star_ul a').click(function(){ alert($('.s_result').html());})$('.square_ul a').hover(function(){$(this).addClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('请打分')}); $('.square_ul a').click(function(){  alert($(this).parents('.box_163css').find('.s_result_square').html()); })})</script><BODY><div class="box_163css"> <span class="s_name">总体评价：</span> <ul class="star_ul fl">  <li><a class="one-star" title="很差" href="#"></a></li>  <li><a class="two-star" title="差" href="#"></a></li>  <li><a class="three-star" title="还行" href="#"></a></li>  <li><a class="four-star" title="好" href="#"></a></li>  <li><a class="five-star" title="很好" href="#"></a></li> </ul> <span class="s_result fl">请打分</span></div><div class="box_163css"> <span class="s_name">口味：</span> <ul class="square_ul fl">  <li><a class="square-1" title="差" href="#"></a></li>  <li><a class="square-2" title="一般" href="#"></a></li>  <li><a class="square-3" title="好" href="#"></a></li>  <li><a class="square-4" title="很好" href="#"></a></li>  <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">请打分</span></div><div class="box_163css"> <span class="s_name">环境：</span> <ul class="square_ul fl">  <li><a class="square-1" title="差" href="#"></a></li>  <li><a class="square-2" title="一般" href="#"></a></li>  <li><a class="square-3" title="好" href="#"></a></li>  <li><a class="square-4" title="很好" href="#"></a></li>  <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">请打分</span></div><div style="text-align:center;clear:both"></div></BODY></HTML>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？ Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

See all articles

jQueryはajax_html/css_WEB-ITnoseに基づいてスターコメントコードを実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック