切换到宽版
发帖 回复
返回列表
  • 4108阅读
  • 7回复

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

 上一主题 下一主题
blueandhack
WordPress侠客
 
只看楼主 倒序阅读 使用道具 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. }
  18. .closebox {
  19. position:absolute;
  20. right:5px;
  21. top:0;
  22. }
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
ralix
WordPress总管
只看该作者 1楼 发表于: 2010-10-10
这个挺实用的！


Wordpress  Wordpress论坛  Wordpress插件  Wordpress主题
回复
举报
lafelx
WordPress新手
只看该作者 2楼 发表于: 2011-01-02
恩，不错，蛮有用的
回复
举报
bcd4556
WordPress新手
只看该作者 3楼 发表于: 2011-02-11
执行脚本放在哪里？
回复
举报
roybeckham
WordPress新手
只看该作者 4楼 发表于: 2011-03-26
不错不错！学习了！
回复
举报
heidongke
WordPress新手
只看该作者 5楼 发表于: 2011-03-27
灰常不错
回复
举报
灰常可乐
WordPress新手
只看该作者 6楼 发表于: 2011-04-26
  社会化的书签
回复
举报
sunmengjing
WordPress新手
只看该作者 7楼 发表于: 04-03
这个虽然有代码但是我们不知道怎么放呢？请教高手能不能详细点呀！最好能够图文并茂的的。我们这些新手太低了
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个