jQuery鼠標懸停頭像征名投票系統代碼



115 459 154



特效描述:鼠標懸停 頭像征名投票 投票系統,jquery實現頭像征名投票功能,鼠標經過顯示征名釋義

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"  ></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"  ></script>

3. HTML代碼

?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery征名投票代碼</title>
<script type="text/javascript">
$(document).ready(function () {
	$(".artist_l li .cvote").click(function () {
		var nowdo = $(this);
		var baby = nowdo.parent().parent().find(".tag_txt").html();
		var nowvote = nowdo.parent().find(".cvotenum b").html();
		nowdo.parent().find(".cvotenum b").html(parseInt(nowvote) + 1);
		alert("親!您為征名【" + baby + "】投了一票!謝謝您的投票!");
	});
});
</script>
</head>
<body style=" background-color:#cb0000">
<div class="itagBox">
	<ul class="artist_l">
		<li class="tag1">
           <div class="votetext">
			<div class="tag_txt">
			  征名1 
			</div>
			<a href="#"> 
             征名釋義:征名1
            </a>
            </div>
            <div class="votedo">
              <div class="cvotenum"><b>1002</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1 ">
          <div class="votetext">
			<div class="tag_txt">
			  征名2
			</div>
			<a href="#"> 
             征名釋義:征名2
            </a>
           </div> <div class="votedo">
              <div class="cvotenum"><b>1003</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1"> <div class="votetext">
			<div class="tag_txt">
			 征名3
			</div>
			<a href="#">征名釋義:征名3</a>
             </div>
             <div class="votedo">
              <div class="cvotenum"><b>1004</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1 "> <div class="votetext">
			<div class="tag_txt">
			征名4
			</div>
			<a href="#">征名4</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1005</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1"> <div class="votetext">
			<div class="tag_txt">
			 征名5
			</div>
			<a href="#">征名釋義:征名5</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1045</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1"> <div class="votetext">
			<div class="tag_txt">
			 征名6
			</div>
			<a href="#">征名釋義:征名6</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1008</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1"> <div class="votetext">
			<div class="tag_txt">
			 征名7
			</div>
			<a href="#">征名釋義:征名7</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1009</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1 "> <div class="votetext">
			<div class="tag_txt">
		    	征名8
			</div>
			<a href="#">征名釋義:征名8</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1006</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1"> <div class="votetext">
			<div class="tag_txt">
			征名9
			</div>
			<a href="#">征名釋義:征名9</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1008</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1 "> <div class="votetext">
			<div class="tag_txt">
			 征名10
			</div>
			<a href="#">征名釋義:征名10</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1002</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
		<li class="tag1 "> <div class="votetext">
			<div class="tag_txt">
			 征名11
			</div>
			<a href="#">征名釋義:征名11</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1012</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
        <li class="tag1 "> <div class="votetext">
			<div class="tag_txt">
			 征名12
			</div>
			<a href="#">征名釋義:征名12</a>
             </div> <div class="votedo">
              <div class="cvotenum"><b>1202</b>票</div>
              <div class="cvote">投票</div>
            </div>
		</li>
	</ul>
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 滾動切換 滾動條切換 背景切換 大圖切換 投票 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表