切换到宽版
  • 4108阅读
  • 7回复

【主题美化&增强系列】jQuery 实现浮动的订阅提示 [复制链接]

上一主题 下一主题
 

只看楼主 倒序阅读 使用道具 0楼 发表于: 2010-10-10
— 本帖被 ralix 设置为精华(2010-10-10) —
效果


1、HTML 部分

  1. <div id="hellobaby">
  2.     推荐您 <a href="http://feed.blueandhack.com" target="_blank">点击这里</a> 订阅我的博客 o(∩_∩)o
  3.     <div class="closebox">
  4.         <a href="javascript:void(0)" onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a>
  5.     </div>
  6. </div>


2、载入 jQuery

  亲测,jQuery 1.2X 的版本就足够用了。

3、执行的脚本

  1. jQuery(document).ready(function($){
  2.     $(window).scroll(function() {
  3.         var bodyTop = 0;
  4.         if (typeof window.pageYOffset != 'undefined') {
  5.             bodyTop = window.pageYOffset
  6.         } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
  7.             bodyTop = document.documentElement.scrollTop
  8.         } else if (typeof document.body != 'undefined') {
  9.             bodyTop = document.body.scrollTop
  10.         }
  11.         $("#hellobaby").css("top", 250 + bodyTop)
  12.     });
  13. });


4、CSS 部分

  1. #hellobaby {
  2. background:#000;
  3. color:#fff;
  4. border:1px solid #B3B3B3;
  5. font-size:14px;
  6. right:0;
  7. position:absolute;
  8. top:250px;
  9. opacity:.7;
  10. filter:alpha(opacity=70);
  11. padding:10px;
  12. }
  13. #hellobaby a {
  14. color:orange;
  15. text-decoration:none;
  16. }
  17. .closebox {
  18. position:absolute;
  19. right:5px;
  20. top:0;
  21. }


只看该作者 1楼 发表于: 2010-10-10
这个挺实用的!
只看该作者 2楼 发表于: 2011-01-02
恩,不错,蛮有用的
只看该作者 3楼 发表于: 2011-02-11
执行脚本放在哪里?
只看该作者 4楼 发表于: 2011-03-26
不错不错!学习了!
只看该作者 5楼 发表于: 2011-03-27
灰常不错
只看该作者 6楼 发表于: 2011-04-26
  社会化的书签

只看该作者 7楼 发表于: 04-03
这个虽然有代码但是我们不知道怎么放呢?请教高手能不能详细点呀!最好能够图文并茂的的。我们这些新手太低了
快速回复
限100 字节
 
上一个 下一个