<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script src="http://upcdn.b0.upaiyun.com/libs/modernizr/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="Jselect.js" type="text/javascript"></script>
<style>
*, html {
margin: 0;
padding: 0;
}
#body {
460px;
margin: 0 auto;
height: 300px;
padding: 5%;
}
ul, li {
list-style: none;
}
#select {
height: auto;
134px;
text-align: center;
border: #a1bcd1 1px solid;
}
#select .first {
background: url(http://cqcmxy.com:81/Content/Image/icobg_1.4.png) -77px -112px;
margin-bottom: 2px;
display:block;
}
#select li {
134px;
height: 20px;
line-height: 25px;
cursor: pointer;
}
#select ul li {
display: none;
134px;
}
</style>
</head>
<body>
<div id="body">
<div id="select"> <span class="first">1</span>
<input type="hidden" value=""/>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#select").Jselect();
</script>
</body>
</html>
$.fn.extend({
Jselect:function(){
var me=$(this);
var li=me.find("li");
var span=me.find("span");
var hidden=me.find("input[type=hidden]");
me.hover(function(){li.show(); span.css({backgroundPosition:"-77px -143px"})},function(){li.hide(); span.css({backgroundPosition:"-77px -113px"})})
li.hover(function(){
$(this).css({background:"blue",color:"#fff"});
},function(){
$(this).css({backgroundColor:"",color:""});
})
li.click(function(){
me.find("span").html($(this).text());
hidden.val($(this).text());
})
}
})