WordPress内CSS+JQuery实现上下滑动

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

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

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

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






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

/* 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文件，内容为：

/* 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实现上下滑动