经验分享程序开发文档资料数据资源其它资源

jQuery鼠标拖动改变数值大小代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标拖动改变数值大小代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery鼠标拖动改变数值大小代码

HTML代码(index.html):

<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312">
<title>jQuery����϶��ı���ֵ��С����</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel='stylesheet prefetch' href='css/wenk.css'>
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.min.js"></script>

</head>
<body>

<span data-wenk="I'm to the right!" data-wenk-pos="right"></span>
<div class="wrapper">
  <div class="container">
    <h2>jQuery Scrubber</h2><br>
    <form>
      <span data-wenk='min="0", max="150"' data-wenk-pos="right">
      <input class="inputNumber black" type="number" min="0" max="150" value="0" />
      <div class="slider sliderBlack"></div>
      </span>
    </form>
    <form>
      <span data-wenk='min="20", max="250"' data-wenk-pos="right">
      <input class="inputNumber green" type="number" min="20" max="250" value="20" />
      <div class="slider sliderGreen"></div>
      </span>
    </form>
    <form>
      <span data-wenk='min="0", max="15"' data-wenk-pos="right">
      <input class="inputNumber red" type="number" min="0" max="15" value="0" />
      <div class="slider sliderRed"></div>
      </span>
    </form>
  </div>
</div>
<script src='js/jquery-ui.min.js'></script> 
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$(function(){
	var inputMinBlack = parseInt($(".black").attr("min"),10);
	var inputMaxBlack = parseInt($(".black").attr("max"),10);
	var inputMinGreen = parseInt($(".green").attr("min"),10);
	var inputMaxGreen = parseInt($(".green").attr("max"),10);
	var inputMinRed = parseInt($(".red").attr("min"),10);
	var inputMaxRed = parseInt($(".red").attr("max"),10);
	var inputWidth = parseInt($(".inputNumber").innerWidth(),10);
	$(".slider").width(inputWidth);
	$(".sliderBlack").slider({
	range:"min",value:0,min:inputMinBlack,max:inputMaxBlack,slide:black}
);
	function black(event,slider){
	$(".black").val(slider.value);
}
$(".sliderGreen").slider({
	range:"min",value:0,min:inputMinGreen,max:inputMaxGreen,slide:green}
);
	function green(event,slider){
	$(".green").val(slider.value);
}
$(".sliderRed").slider({
	range:"min",value:0,min:inputMinRed,max:inputMaxRed,slide:red}
);
	function red(event,slider){
	$(".red").val(slider.value);
}
}
);

CSS代码(normalize.css):

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}
audio:not([controls]){display:none;height:0}
progress{vertical-align:baseline}
template,[hidden]{display:none}
a{background-color:transparent}
a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:inherit}
b,strong{font-weight:bolder}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background-color:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
img{border-style:none}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
figure{margin:1em 40px}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}
optgroup{font-weight:bold}
button,input,select{overflow:visible}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}
[disabled]{cursor:default}
button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}

CSS代码(style.css):

@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");*{padding:0;margin:0;}
body,html{width:100%;height:100%;font-family:'PT Sans',sans-serif;color:#222;background-color:#222;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
[data-wenk]:after{background-color:rgba(0,0,0,0.3);box-shadow:none !important;color:#ccc !important;}
h2{font-size:40px;margin-bottom:5px;font-weight:700;color:#fff;}
p{font-size:18px;width:400px;margin-left:auto;margin-right:auto;margin-bottom:30px;color:#595959;}
.wrapper{display:table;width:100%;height:500px;}
.container{display:table-cell;text-align:center;vertical-align:middle;}
form{position:relative;}
.slider{position:absolute;left:50%;margin-left:-101px;top:10px;opacity:0;cursor:e-resize !important;}
.inputNumber{position:relative;margin-bottom:20px;width:200px;height:35px;padding:3px 6px;font-size:16px;border-radius:5px;outline:none;cursor:e-resize !important;}
.ui-slider{height:40px !important;top:0px !important;border-radius:5px !important;cursor:e-resize !important;}
.ui-slider-handle{background:red !important;height:40px !important;top:-1px !important;outline:none !important;cursor:e-resize !important;}
.black{border:2px solid #333;background:#222;color:#fff;}
.green{border:2px solid #333;background:#407975;color:#fff;}
.red{border:2px solid #333;background:#794044;color:#fff;}

CSS代码(wenk.css):

/** * wenk - Lightweight tooltip for the greater good * @version v1.0.2 * (c) 2016 Tiaan du Plessis @mightyCrow | * @link * @license MIT */
 [data-wenk]{position:relative}
[data-wenk]:after{position:absolute;font-size:13px;border-radius:.4rem;content:attr(data-wenk);padding:12.8px;padding:.8rem;background-color:rgba(17,17,17,.8);box-shadow:0 0 14px rgba(0,0,0,0.1);color:#fff;line-height:20px;line-height:1.25rem;text-align:left;z-index:1;pointer-events:none;display:block;opacity:0;visibility:hidden;-webkit-transition:all .3s;transition:all .3s;bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);white-space:pre;width:auto}
[data-wenk]:after{opacity:0}
[data-wenk]:hover{overflow:visible}
[data-wenk]:hover:after{display:block;opacity:1;visibility:visible;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}
[data-wenk].wenk--bottom,[data-wenk][data-wenk-pos="bottom"]{}
[data-wenk].wenk--bottom:after,[data-wenk][data-wenk-pos="bottom"]:after{bottom:auto;top:100%;left:50%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}
[data-wenk].wenk--bottom:hover,[data-wenk][data-wenk-pos="bottom"]:hover{}
[data-wenk].wenk--bottom:hover:after,[data-wenk][data-wenk-pos="bottom"]:hover:after{-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}
[data-wenk].wenk--left,[data-wenk][data-wenk-pos="left"]{}
[data-wenk].wenk--left:after,[data-wenk][data-wenk-pos="left"]:after{bottom:auto;left:auto;top:50%;right:100%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}
[data-wenk].wenk--left:hover,[data-wenk][data-wenk-pos="left"]:hover{}
[data-wenk].wenk--left:hover:after,[data-wenk][data-wenk-pos="left"]:hover:after{-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}
[data-wenk].wenk--right,[data-wenk][data-wenk-pos="right"]{}
[data-wenk].wenk--right:after,[data-wenk][data-wenk-pos="right"]:after{bottom:auto;top:50%;left:100%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}
[data-wenk].wenk--right:hover,[data-wenk][data-wenk-pos="right"]:hover{}
[data-wenk].wenk--right:hover:after,[data-wenk][data-wenk-pos="right"]:hover:after{-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}
[data-wenk][data-wenk-length="small"]:after,[data-wenk].wenk-length--small:after{white-space:normal;width:80px}
[data-wenk][data-wenk-length="medium"]:after,[data-wenk].wenk-length--medium:after{white-space:normal;width:150px}
[data-wenk][data-wenk-length="large"]:after,[data-wenk].wenk-length--large:after{white-space:normal;width:260px}
[data-wenk][data-wenk-length="fit"]:after,[data-wenk].wenk-length--fit:after{white-space:normal;width:100%}
[data-wenk][data-wenk-align="right"]:after,[data-wenk].wenk-align--right:after{text-align:right}
[data-wenk][data-wenk-align="center"]:after,[data-wenk].wenk-align--center:after{text-align:center}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
96.25 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
96.25 KB
立即下载
秦荔佳
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章