我想用JQuery完成這樣的功能
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#li2{
color: red;
}
ul {
list-style: none;
}
#div2{
background-image: url("img/star-matrix.gif");
background-repeat: no-repeat;
height: 16px;
}
</style>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/jquery-2.2.0.js"></script>
<script type="text/javascript">
$(function () {
$("#div2").mouseover(function(event){
var x=parseInt(event.offsetX / 16)+1;//獲取滑鼠所在圖片的絕對位置
var top=16*5+num*16;
$("#div2").css("background-position","0px -"+top+"px");
});
$("#div2").mouseout(function(){
$("#div2").css("background-position","");
});
$("#div2").click(function(event){
var num = parseInt(event.offsetX / 16)+1;
var top = num*16;
$("#div2").css("background-position","0px -"+top+"px");
$("#div2").unbind("mouseout");//給與評分后就洗掉移除事件
});
});
</script>
</head>
<body>
<div id="div1" style="border: solid 1px black; width: 300px; height: 300px;">
<ul>
<li>商品評價:</li>
<li id="li1"><div id="div2">
</div></li>
<li id="li2">評分星級隨滑鼠移動而變化</li>
</ul>
</div>
</body>
</html>
這是代碼，但是不知道為什么觸摸沒用改變星級，點擊卻可以改變星級，求助。
uj5u.com熱心網友回復：
你想做的是滑鼠移動的時候星級跟著變化嗎，事件為mousemove，over事件只是進入該區域時觸發轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/90453.html
標籤：Java相關
上一篇：一上傳任何代碼,服務器就用不了