jquery 怎么实时获取range的值
在拖动滑块的时候jquery实时的获取rangge的值达到不断的改变图片中汽车的left的值。<divclass="box-range"><ulclass="w-list...
在拖动滑块的时候jquery实时的获取rangge的值达到不断的改变图片中汽车的left的值。
<div class="box-range">
<ul class="w-list">
<li><img src="image/1.png" /></li>
<li><img src="image/2.png" /></li>
<li><img src="image/3.png" /></li>
<li><img src="image/4.png" /></li>
<li><img src="image/5.png" /></li>
<li><img src="image/6.png" /></li>
<li><img src="image/7.png" /></li>
<li><img src="image/8.png" /></li>
<li><img src="image/9.png" /></li>
<li><img src="image/10.png" /></li>
</ul>
<input type="range" name="range" min="0" max="360" step="1" value="0" />
</div> 展开
<div class="box-range">
<ul class="w-list">
<li><img src="image/1.png" /></li>
<li><img src="image/2.png" /></li>
<li><img src="image/3.png" /></li>
<li><img src="image/4.png" /></li>
<li><img src="image/5.png" /></li>
<li><img src="image/6.png" /></li>
<li><img src="image/7.png" /></li>
<li><img src="image/8.png" /></li>
<li><img src="image/9.png" /></li>
<li><img src="image/10.png" /></li>
</ul>
<input type="range" name="range" min="0" max="360" step="1" value="0" />
</div> 展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>Nothing</title>
<style type="text/css">
div.box-range {
border: 1px solid black;
margin: auto;
width: 330px;
height: 300px;
overflow: hidden;
}
ul.w-list {
width: 6661px;
overflow: hidden;
height: 200px;
padding: 0;
position: relative;
}
ul.w-list li {
list-style: none;
float: left;
}
li img {
width: 330px;
height: 200px;
}
input[type=range] {
width: 326px;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
var ul = $ ("ul.w-list");
var imgs = ul.find ("li img");
var len = imgs.length - 1;
$ ("input[type=range]").change (function ()
{
var me = $ (this);
ul.css (
{
left : -imgs.width () * me.val () * len / me.attr ("max") + "px"
});
});
});
</script>
</head>
<body>
<div class="box-range">
<ul class="w-list">
<li><img src="images/1.jpg" />
</li>
<li><img src="images/2.jpg" />
</li>
<li><img src="images/3.jpg" />
</li>
<li><img src="images/4.jpg" />
</li>
<li><img src="images/5.jpg" />
</li>
</ul>
<input type="range" name="range" min="0" max="360" step="1" value="0" />
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
