jQuery鼠标悬停头像征名投票系统代码



110 439 147



特效描述:鼠标悬停 头像征名投票 投票系统,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

加群请备注:从官网了解到