Wordpress内CSS+JQuery实现上下滑动

感谢 Jonee 童鞋的博文《WordPress利用jQuery实现向上向下滑动》

只需要四步即可实现本站右侧的效果。

·在主题文件footer.php中添加如下代码:

1
<!-- shangxia START -->

 ·在主题文件header.php的head区域添加如下代码:

1
2
3
4
5
6
7
<!-- shangxia START -->
<!--?php if (is_single()) { ?-->
<!--?php } else { ?-->
<!--?php } ?-->
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){ var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});}); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);}); $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);}); $('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);}); });
// ]]></script>

·在主题目录中创建shangxia-single.css文件,内容为:

1
2
3
4
5
6
/* shangxia-single START */
#shangxia{position:absolute;top:40%;left:50%;margin-left:338px;display:block;}
#shang{background:url(images/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(images/shangxia.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
/* shangxia-single END */

·在主题目录中创建shangxia-other.css文件,内容为:

1
2
3
4
5
/* shangxia-other START */
#shangxia{position:absolute;top:40%;left:50%;margin-left:338px;display:block;}
#shang{background:url(images/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#xia{background:url(images/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
/* shangxia-other END */

·准备好图片素材,到主题的img目录中:

Tips:

·那句调用的一定要放在footer中,否则会出问题

·margin-left:338px 从这里调整位置,慢慢尝试,可正可负

·图片建议自己做,尺寸为32×119 需要与两个CSS文件同步即可。

本文遵守署名-非营利性使用-相同方式共享协议,转载请保留本段:冰丝带雨 » Wordpress内CSS+JQuery实现上下滑动

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址