首页 » 建站技术 » WordPress » 浏览内容

为单篇日志添加一个提示功能


2010-12-17 22:52:16 2,010 0 发表评论 字体: 作者:C.K.
标签: WordPress代码

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

实现的方法其实很简单,加载JS代码,实现显隐效果;
在单篇文章中加入一个盒子放准备显示的文字或图片;
配合相应的样式代码;
显隐效果与主题中“阅读全文”按钮实现方法类似,位置样式与滚屏写法一样。
具体方法:
一、首先进入一篇日志的编辑页面,切换到HTML模式,在任意位置加入:

<div class="hotad">这个提示并没有什么特别的意思,其目的只不过是想妨碍你看精彩的文章!</div>

二、打开主题文件夹:js/custom.js
在最后加上:

// 提示
  • $(document).ready(function(){
  • $('#content').hover(
  • function() {
  • $(this).find('.hotad').stop(true,true).fadeIn();
  • },
  • function() {
  • $(this).find('.hotad').stop(true,true).fadeOut();
  • }
  • );
  • });
  • 三、在样式文件style.CSS中加入:

    .hotad {
  • background:#B0D264;
  • width:100px;
  • margin-left:540px;
  • padding:8px;
  • position: fixed;
  • display:none;
  • z-index: 5;
  • _position:absolute;
  • _top:expression(eval(document.documentElement.scrollTop));
  • }
  • 说明:我用的提示是图片,这个教程中的是文字,这个提示功能IE6下定位不是很好。

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4944 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13710697 位访客

      广告区 Guǎng Gào