您现在的位置是:首页 > 无止境

首侧边栏实现悬浮滑动块

辰野客更新时间:2020-03-22 21:29:26浏览:262

简介[文章目录]第一步:jQuery代码第二步:悬浮框内容标签第三步:开始滑动位置设置第四步:CSS代码最后讲解和使用:看见有人要,就发出来!大家应该在别人的网站上


第一步: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进行外引。


随便看看

评论

评论插件