侧边栏实现悬浮滑动块
围观: 794   讨论: 4

  侧边栏实现悬浮滑动块 [复制链接]

[文章目录]

看见有人要,就发出来!
大家应该在别人的网站上的侧边栏看见过一个悬浮的小框!
这个框可以放这个网站比较热门的东西,也可以放赞助商广告提升点击率。
我觉得这个功能是非常实用的。
把这代码和使用方法分享出来共同学习交流。

第一步:jQuery代码

  1. //sidebar scroll  
  2. jQuery(document).ready(function($) {  
  3.     if (!isie6()) {  
  4.         var offset_height = 0;  
  5.         var rollStart = $('#rollstart'),  
  6.         rollSet = $('.laoshiji');  
  7.         rollStart.before('<div class="laoshijibox"></div>');  
  8.         var offset = rollStart.offset(),  
  9.         objWindow = $(window),  
  10.         rollBox = rollStart.prev();  
  11.         if (objWindow.width() > 960) {  
  12.               
  13.             objWindow.scroll(function() {  
  14.                 if (objWindow.scrollTop() > offset.top+offset_height) {  
  15.                     if (rollBox.html(null)) {  
  16.                         rollSet.clone().prependTo('.laoshijibox');  
  17.                     }  
  18.   
  19.                     if ($(".laoshiji").size()>1)  
  20.                         $(".laoshiji").eq(1).hide();  
  21.                     rollBox.children().show();  
  22.                     rollBox.show().stop().animate({  
  23.                         top: 0,  
  24.                         paddingTop: 15  
  25.                     },  
  26.                     400);  
  27.                 } else {  
  28.                       
  29.                     rollBox.hide().stop().animate({  
  30.                         top: 0  
  31.                     },  
  32.                     400);  
  33.                       
  34.                     if ($(".laoshiji").size()>1)  
  35.                         $(".laoshiji").eq(1).show();  
  36.                 }  
  37.             })  
  38.         }  
  39.     }  
  40.     function isie6() {  
  41.         if ($.browser.msie) {  
  42.             if ($.browser.version == "6.0"return true;  
  43.         }  
  44.         return false;  
  45.     }  
  46. });  

第二步:悬浮框内容标签

  1. <div class="laoshiji">这里是悬浮框的添加内容</div>  

第三步:开始滑动位置设置

  1. <div id="rollstart"></div>  

第四步:CSS代码

  1. .laoshijibox{position:fixed;background:none;width:275px;}  

最后讲解和使用:

由于代码不长懂点儿代码的或许能看懂!
1,在jQuery代码第五行“#rollstart”是指滑块id="rollstart"的容器开始悬浮的位置,一般添加第三步代码到侧边栏的尾部即可。
2,在jQuery代码第六行“.laoshiji”是指要把class="laoshiji"的标签容器进行悬浮。如:第二步代码形式。
3,必不可少的css代码,把第四段代码放在Emlog主题根目录的style.css或者你自己定义的css文件中。
最后:悬浮侧边小工具是非常实用的功能,但是前提发现没?用的是jQuery代码,所以要事先引用一下jQuery库文件吧!Google、Microsoft,Sae,新浪,百度都有开放的jQuery库,可以在Emlog进行外引。


本文标签: JS 悬浮
本文链接: https://crazyus.us/post-10.html
站长声明: 请尊重版权,转载注明出处,谢谢配合!
[查询收录]

既然来了就留个言吧

发表评论

取消 请打勾哦
这个我之前WORDPRESS主题里用过这代码,用来做文章目录的。
@wen juntao:就是从wp转过来的
感谢啰     
@Brian.:不客气!!

手机版|Sitemap

网站已存活运行:271 天 , 执行: 2.55毫秒

Powered By Emlog

© 2017~2018 疯狂老司机™ 本模板还在开发阶段