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

林继 WordPress 2,151 共写了310个字 (2010-12-17 22:52:16) 没有评论 打印 扫描二维码 百度未收录

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

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

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

  1. // 提示
  2. $(document).ready(function(){
  3. $('#content').hover(
  4. function() {
  5. $(this).find('.hotad').stop(true,true).fadeIn();
  6. },
  7. function() {
  8. $(this).find('.hotad').stop(true,true).fadeOut();
  9. }
  10. );
  11. });

三、在样式文件style.CSS中加入:

  1. .hotad {
  2. background:#B0D264;
  3. width:100px;
  4. margin-left:540px;
  5. padding:8px;
  6. position: fixed;
  7. display:none;
  8. z-index: 5;
  9. _position:absolute;
  10. _top:expression(eval(document.documentElement.scrollTop));
  11. }

说明:我用的提示是图片,这个教程中的是文字,这个提示功能IE6下定位不是很好。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >