感谢 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实现上下滑动
