Bootstrap学习笔记之js组件(4)(5)

关于滑动的快慢,你可以直接在div中添加data-interval="2000" 设置2秒切换,但这种方法出现问题就是
 当你刷新浏览器的时候,必须手动的去点一下左右按钮,然后才能实现切换,最好的办法是在javascript里进行设置。如下代码所示

<script type="text/javascript"> $(".carousel").carousel({ interval:2000; }) </script>

十一、Affix组件
 注意:使用position:fixed进行定位,利用data-spy="affix" 结合data-offset来实现监听,当发生某一事件时,进行偏移。贴码看下列子: 

<div> <!-- 栅格系统进行布局 --> <div> <ul> <li>1111111111</li> <li>222222222</li> <li>3333333333333</li> <li>44444444444</li> <li>555555555</li> <li>6666666666</li> <li>777777777777</li> </ul> </div> <div> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> <p>1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111 </p> </div> <div > <ul> <li>1111111111</li> <li>222222222</li> <li>3333333333333</li> <li>44444444444</li> <li>555555555</li> <li>6666666666</li> <li>777777777777</li> </ul> </div> </div> <!-- <script src="https://www.jb51.net/js/jquery-1.11.3.min.js"></script> 本地的加载文件--> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript"> $('.js-affixed-element-top').affix({ offset:{ } }) $('.js-affixed-element-bottom').affix({ offset:{bottom:200 }---当鼠标滚到最下面时,该div会自动偏移到距离底部200px的地方 }) </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzssgp.html