<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI 3D立体滑块特效 - 网页模板</title>
<link rel='stylesheet prefetch' href='css/jquery-ui.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<article class="htmleaf-container">
<section id="content">
<h1>你的预算是多少？</h1>
<div class="cube">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div id="slider-range-min"></div>
</div>
<input type="text" id="amount" />
</section>
</article>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script>
$(function () {
$('#slider-range-min').slider({
range: 'min',
value: 50,
min: 0,
max: 100,
slide: function (event, ui) {
$('#amount').val('$' + ui.value + ',000');
$('.a, .b, .c, .d').width(ui.value + '%');
}
});
$('.ui-slider-handle').text('<>');
$('#amount').val('$' + $('#slider-range-min').slider('value') + ',000');
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery UI 3D立体滑块特效.zip
版权申诉
15 浏览量
2022-11-19
19:46:29
上传
评论
收藏 103KB ZIP 举报
jQuery UI 3D立体滑块特效.zip （5个子文件） 
jQuery UI 3D立体滑块特效 jiaoben3690 css 
jquery-ui.min.css 29KB styles.css 8KB
index.html 2KB js jquery-ui.min.js 235KB jquery-2.1.1.min.js 82KB资源评论
