码迷,mamicode.com
首页 > Web开发 > 详细

jq的“钉”插件--jquery.pin.js

时间:2015-07-03 18:50:43      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

  一大早浏览博客园时,看到小鹿同学写了一个jquery.pin.js的使用总结,觉得在日常编码过程中用得上,就随着他的总结看了一下,并自己写了个demo。

   常见的,一般浏览网页时右侧有个“回到顶部”的字眼或图片,鼠标往下滑动时,这个“回到顶部”一直在浏览器的同一位置,好像钉在那块一样。往常,碰到这个需求时,我都是用:

position: fixed;

代码来实现。看过小鹿同学的博客之后,结合jquery.pin.js的作用,想到确实有那种将某个页面元素钉在某段文本旁边的需求,所以也学习了一下。下面也先介绍下这个插件。

  插件官网地址http://www.bootcss.com/p/jquery.pin,官网包含示例,插件下载地址,且它的设计也挺好看的,是我喜欢的类型(发现了,所有前端相关的官网,基本都蛮好看的),学习起来也很方便。

  插件的优势

    1.将某个页面元素  在某个容器里,而不是页面,即超出容器时, 钉的作用就不存在。

    2.让某个元素一直挂在某个位置而不管是否滚动条滚动

    3.在尺寸小的屏幕上能够自动禁用这种效果。

  使用步骤:(直接上自己写的小demo)

  1.   引用js:
<script src="jquery.min.js"></script>
<script src="jquery.pin.js"></script>//从github中下载

  2.  定义元素,以及css设置,加上jq插件的代码

<div class="main">
     <div class="container">
          我们来看看这个有没有被钉住哦?!
     </div>        
</div>
<style>
     .main{
         width: 230px;
         height: 1200px;
         background: red;
         position: relative;
     }
     .container{
         width: 230px;
         height: 230px;
         background: #ffc;
         padding:20px;
         position: fixed;
         box-shadow: 5px 5px 7px rgba(33,33,33,.7);
         -webkit-transform: rotate(-6deg);
         -moz-transform: rotate(-6deg);
         -ms-transform: rotate(-6deg);
         transform: rotate(-6deg);
     }
</style>

  

<script>
    $(function() {
        $(".container").pin({
               containerSelector: ".main"
        })
    });
</script>

 

  来看一下页面效果

  未向下滑动时:

  技术分享

 

 

  当向下滑动时,效果如下:

 

  技术分享

 

 

  可以看到向上向下滑动时,这个黄色背景的元素一直被钉在顶部,这个demo可能显示不出这个插件的优势,那么我们再加点东西,html代码如下:

<div class="main">
            <div class="container">
                我们来看看这个有没有被钉住哦?!
            </div>        
        </div>
        <div style="height:1000px;background: blue;"></div>

  即在容器的下面再添加一个div,高度为1000px,背景色为蓝色,这样效果会显著点。当鼠标下滑到蓝色背景时会发现黄色背景的元素已不在浏览器内,这就解释了这个插件“超出容器时, 钉的作用就不存在”的作用。

  截图如下:

  技术分享

 

  以上为个人见解,如有错误请指出!转载请注明出处

jq的“钉”插件--jquery.pin.js

标签:

原文地址:http://www.cnblogs.com/dingdong/p/4619351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!