dragdealer.js拖拉效果的jquery插件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>content scroller</title>
<style>
h4 {
margin: 30px 0 10px 0;
color: #666;
font-size: 20px;
font-weight: normal;
line-height: 24px;
}
.dragdealer .red-bar {
width: 100px;
height: 30px;
background: #CC0000;
color: #FFF;
font-size: 14px;
line-height: 30px;
text-align: center;
}
/* Content slider */
.content-scroller .dragdealer {
float: right;
width: 40px;
height: 300px;
}
.content-scroller .dragdealer .handle {
width: 40px;
height: 60px;
text-align: center;
}
.content-scroller .dragdealer .handle i {
line-height: 60px;
}
.content-scroller .content-mask {
height: 298px;
margin: 0 55px 0 0;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
}
.content-scroller .content-body {
/* Incorporate the margins of the paragraphs inside */
overflow: hidden;
background: #fff;
}
.content-scroller .content-body p {
margin: 15px;
color: #333;
font-family: monospace;
line-height: 24px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dragdealer.js"></script>
<script>
$(function() {
var availHeight = $('.content-body').outerHeight() - $('.content-mask').outerHeight();
// var availHeight = $('.content-scroller').outerHeight();
console.log("availHeight- "+availHeight);
new Dragdealer('content-scroller', {
horizontal: false,
vertical: true,
yPrecision: availHeight,
animationCallback: function(x, y) {
console.log("x= "+ x + " , y= "+y);
$('.content-body').css('margin-top', -y * availHeight);
// $('.content-body').css('margin-top', availHeight);
}
});
})
</script>
</head>
<body>
<pre class="code">
var availHeight = $('.content-body').outerHeight() -
$('.content-mask').outerHeight();
new Dragdealer('content-scroller', {
horizontal: false,
<strong>vertical: true,</strong>
<strong>yPrecision: availHeight,</strong>
animationCallback: function(x, y) {
$('.content-body').css('margin-top', -<strong>y</strong> * availHeight);
}
});
</pre>
<div class="content-scroller">
<div id="content-scroller" class="dragdealer">
<div class="handle red-bar">
<span class="value"></span>
</div>
</div>
<div class="content-mask">
<div class="content-body">
<ul>
<div class="top_blue"><a href="#" >顶级分类</a></div>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术</i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术</i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术</i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术</i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i><a href="#" >核心技术</a></i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术</i>
<span>云计算</span>
<span>大数据</span>
</li>
<li><i>核心技术---</i>
<span>云计---算</span>
<span>大数---据</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
当
-
中的内容比较的少的时候,再拉滚动条,就不能很好的实现了,比如:
内容会随着滚动条向上向下。它是由这块代码引起的:
说明:
当content-body 中的高度大于 content-mask 的高度时,availableHeight的值也是大于0的,
当脚本执行到第二红框的时候,content-body的margin-top就会以相反的方向发生变化。
就比如你向下拉滚动条,内容就会往上跑,所以下面的内容就会被展现出来。
然而当content-body的内容比较少的时候,也就是小于content-mask 的高度时,
availableHeight的值也是小于0的,当脚本执行到第二红框的时候,
margin-top 的值此时是大于0的,content-body的margin-top就会以相同的方向发生变化。
即如你向下拉滚动条,内容就会往下跑。
解决方法: 加一个判断,当availableHeight < 0 , 证明是content-body的内容是比较少的,就取它的绝对值。
$(function() {
var availHeight = $('.content-body').outerHeight() - $('.content-mask').outerHeight();
if(availHeight < 0){
availHeight = Math.abs(availHeight);
}
new Dragdealer('content-scroller', {
horizontal: false,
vertical: true,
yPrecision: availHeight,
animationCallback: function(x, y) {
$('.content-body').css('margin-top', -y * availHeight);
}
});
})