<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<style>
*{ margin:0; padding:0;}
ul.stars{ display:block; margin:100px 100px 30px; overflow:hidden;}
ul.stars li{ display:block; float:left; padding:0 4px; cursor:pointer;}
ul.stars li img{ display:block; width:30px; height:30px;}
ul.stars li img.full{ display:none;}
ul.stars li.on img.empty{ display:none;}
ul.stars li.on img.full{ display:block;}
</style>
<script>
$(document).ready(function(e) {
$("ul.stars li").click(function(){
$(this).toggleClass("on");
var stars = $("ul.stars").find("li.on").size();
$("input#stars").val(stars);
});
});
</script>
<form method="get">
<ul class="stars">
<li>
<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
</li>
<li>
<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
</li>
<li>
<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
</li>
<li>
<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
</li>
<li>
<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
</li>
</ul>
<input type="hidden" id="stars" name="stars" />
<input type="submit" value="提交" style="margin:0 100px;">
</form>
</body>
</html>
图片--点击--换图
猜你喜欢
转载自blog.csdn.net/weixin_41722928/article/details/81203707
今日推荐
周排行