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

赞 (0)

相关推荐

  • VBA实现OUTLOOK批量保存附件
  • EXCEL过河-全文件夹内xlsx另存为jpg图片
  • WordPress调用Google字体导致网站速度慢解决方法
  • 香港2014春节花车巡游
  • 从对待民主墙的态度看差距
  • 南丫岛-悠闲惬意的度假生活
  • 手把手教你建立完全属于自己的个人博客(二)
  • 手把手教你建立完全属于自己的个人博客(一)

评论 0

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