以下是 jQuery鼠标悬停遮罩效果投票代码 的示例演示效果:
部分效果截图:
HTML代码(index.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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js" ></script>
<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>JS代码(script.js):
$(document).ready(function (){
$('.artist_l li').each(function (m){
$(this).find('a').css('top',-150);
$(this).hover(function (){
$(this).find('a').animate({
'top':'0'}
,200)}
,function (){
$(this).find('a').animate({
'top':150}
,{
duration:200,complete:function (){
$(this).css('top',-150)}
}
)}
)}
);
}
);
CSS代码(style.css):
@charset "utf-8";body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
a img{border:0}
body{color:#333;text-align:center;font:12px "微软雅黑";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
/* itagBox */
.itagBox{margin:10px auto 0px;clear:both;width:980px;overflow:hidden;}
.itagBox ul{width:980px;}
.itagBox ul li{position:relative;float:left;width:240px;background:#fff;height:190px;overflow:hidden;margin:0px 6px 6px 0px;}
.itagBox ul .votetext{width:100%;overflow:hidden;height:150px;background-image:url(../images/votebb.jpg);background-position:center center;background-repeat:repeat;border-bottom:1px dotted #ddd;}
.itagBox ul .votedo{width:100%;height:40px;line-height:40px;}
.votedo .cvotenum{float:left;width:140px;height:40px;line-height:40px;text-align:left;margin-left:8px;font-size:16px;color:#cc0000;}
.votedo .cvote{float:right;width:55px;height:26px;line-height:26px;text-align:left;margin:7px 8px 7px auto;background-color:#FF4040;border:1px solid #FF3030;text-align:center;font-size:16px;color:#fff;cursor:pointer}
.itagBox ul .tag1{width:238px;}
.tag_yellow{color:#fff601;}
.tag_txt{text-align:center;line-height:40px;padding-top:12px;font-size:23px;font-weight:700;font-family:微软雅黑;color:#474747;}
.itagBox ul li a{position:absolute;left:0px;top:0px;overflow-y:auto;line-height:20px;text-align:center;padding-top:5px;display:block;color:#FFF;width:100%;height:145px;filter:alpha(opacity=95);background:#000;opacity:0.95;background:#000;}
.itagBox ul li a:hover{color:#FFF;text-decoration:none;}
.itagBox ul .tag2{background:#2E71B3;}
.itagBox ul .tag3{background:#2E71B3;}
分享到QQ
分享到微博
微信扫一扫
