jQuery鼠标滚动设置input值代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滚动设置input值代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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鼠标滚动设置input值代码</title>
<!--可无视-->
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>
</head>
<body>
    <div id="page-wrap">
        <h1>Mousewheel Inputs</h1>
        <p>Position the mouse cursor within the input box and scroll the mousewheel to see how it works. Without JavaScript, 
        you simply just don't see the little graphic and the input works as normal. The "With Plugin" version stops 
        at zero instead of allowing negative numbers (just for demo purposes, either technique could do that).</p>
    
        <h2>Without Plugin(没用插件)</h2>
    
        <div>
            <label for="how-many-1">How Many? </label>
            <input type="text" id="how-many-1" class="wheelable" value="1" name="how-many-1" size="3" />
        </div>
        
        <h2>With Plugin(用了插件)</h2>
        
        <div>
            <label for="how-many-2">How Many? </label>
            <input type="text" id="how-many-2" value="1" name="how-many-2" size="3" />
        </div>
        
        <h2>Non-Numerical(不是数字)</h2>
        
        <div>
            <label for="how-many-2">What kind of whale? </label>
            <input type="text" id="whale" value="Blue" name="whale" size="3" />
        </div>
    </div>
</body>
</html>

JS代码(increment.js):

$(function(){
	$("#page-wrap div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');
}
);
	// WITH Plugin$(function(){
	$("#how-many-2").bind("mousewheel",function(event,delta){
	if (delta > 0){
	this.value = parseInt(this.value) + 1;
}
else{
	if (parseInt(this.value) > 0){
	this.value = parseInt(this.value) - 1;
}
}
return false;
}
);
	$("#whale").bind("mousewheel",function(event,delta){
	if (this.value == "Blue"){
	this.value = "Sperm";
}
else if (this.value == "Sperm"){
	this.value = "Orca";
}
else if (this.value == "Orca"){
	this.value = "Humpback";
}
else if (this.value == "Humpback"){
	this.value = "Blue";
}
return false;
}
);
}
);
	// WITHOUT Pluginvar EventUtil ={
	addHandler:function(element,type,handler){
	if (element.addEventListener){
	element.addEventListener(type,handler,false);
}
else if (element.attachEvent){
	element.attachEvent("on" + type,handler);
}
else{
	element["on" + type] = handler;
}
}
,removeHandler:function(element,type,handler){
	if (element.removeEventListener){
	element.removeEventListener(type,handler,false);
}
else if (element.detachEvent){
	element.detachEvent("on" + type,handler);
}
else{
	element["on" + type] = null;
}
}
,getEvent:function(event){
	return event ? event:window.event;
}
,getTarget:function(event){
	return event.target || event.srcElement;
}
,getWheelDelta:function(event){
	if (event.wheelDelta){
	return event.wheelDelta;
}
else{
	return -event.detail * 40;
}
}
,preventDefault:function(event){
	if (event.preventDefault){
	event.preventDefault();
}
else{
	event.returnValue = false;
}
}
}
;
	function onWheel(event){
	event = EventUtil.getEvent(event);
	var curElem = EventUtil.getTarget(event);
	var curVal = parseInt(curElem.value);
	var delta = EventUtil.getWheelDelta(event);
	if (delta > 0){
	curElem.value = curVal + 1;
}
else{
	curElem.value = curVal - 1;
}
EventUtil.preventDefault(event);
}
$(function(){
	$(".wheelable").hover(function(){
	EventUtil.addHandler(document,'mousewheel',onWheel);
	EventUtil.addHandler(document,'DOMMouseScroll',onWheel);
}
,function(){
	EventUtil.removeHandler(document,'mousewheel',onWheel);
	EventUtil.removeHandler(document,'DOMMouseScroll',onWheel);
}
);
}
);

CSS代码(style.css):

/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font:14px Georgia,serif;}
#page-wrap{width:500px;margin:0 auto;}
img{vertical-align:middle;}
h2{font-size:20px;font-weight:normal;margin:30px 0 10px;}
h1{font-size:36px;font-weight:normal;margin:30px 0 10px;}
input[type=text]{border:1px solid #2F393C;padding:3px;vertical-align:middle;font-size:20px;}
#whale{width:120px;}

附件:下载该文件资源,减少时间成本(增值服务)