使用dragdealer.js实现拖拉效果

最新推荐文章于 2024-04-09 09:54:28 发布

逯加

最新推荐文章于 2024-04-09 09:54:28 发布

阅读量3.9k

点赞数

分类专栏： jQuery插件文章标签： dragdealer jquery插件

本文链接：https://blog.csdn.net/tuoxinquyu/article/details/50905907

版权

jQuery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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);
    }
  });
})

dragdealer 下载地址

逯加

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用dragdealer.js实现拖拉效果

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: nor
复制链接

扫一扫

专栏目录