这个功能就是热点新闻2.3版发布页面上,移动到正文区域渐显的主题更新提示,有童鞋问这个是怎么实现的,感觉这个功能可能会有点用,所以弄个小教程,大家也可以玩玩。
该功能热点新闻2.3版主题基本已具备,就以此主题为例说明一下:
实现的方法其实很简单,
- 加载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下定位不是很好。
ps:为了更好测试2.31版,自己也启用此版,进一步完善。
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
广东省珠海市 1F
我来个沙发吧!
这个对我现在来说还没有起到太大的作用!
不过我看看这里已经用到2.31的主题了!
我说怎么会hot会没有图片呢!
河南省新乡市 2F
哈哈,鸟哥的是个图片哦,我把代码贴出来!
.hotad {
background:url(images/gx.png) no-repeat;
width:150px;
height:105px;
margin-left:540px;
padding:8px;
position: fixed;
display:none;
z-index: 5;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
河南省新乡市 3F
鸟哥,看到日历,我感觉,能不能把放上去显示当日发布的文章这个提示功能,用到页码上面,放到一个准备点击的页码上,提前显示出来当页都有上面文章?嘻嘻,怎么样?
甘肃省兰州市 4F
多谢鸟哥,终于解惑了
福建省厦门市 5F
建议把顶部的hot图片设置成随机
因为我很懒,不想每次发帖都添加hot自定义(哈哈)
广东省珠海市 B1
@ Tmd 就几秒钟的时间,就那么的纠结?
浙江省杭州市 B1
@ Tmd hot图片已经随即了吧,你是想最新的文章不添加hot自定义就会到顶部随机图片哪里去吧
浙江省杭州市 6F
等用到的时候试试
广东省深圳市 7F
为什么我的网站无法留言啊 !?
安徽省合肥市 8F
学习了。支持一下
四川省成都市 9F
鸟哥这个牛B,我再借借
北京市 10F
我看到代码就头晕,慢慢学习吧,这个提示功能在那里显示的啊?
上海市浦东新区 11F
有空岚女也去折腾折腾。。。
P.S
杯具了,前段时间升级了WP,结果有童鞋说提交不了评论,郁闷
河南省郑州市 B1
@ 雅岚 我的网站也提交不了评论 纠结 求鸟哥提供个方法哦
陕西省西安市 12F
对了, 你现在的首页是不是你自己重新弄的, 你之前那个带图片轮播的那个挺好的,不知道可否共享下, 谢了
北京市 13F
鸟哥的主题怎么又改了啊?,这个好漂漂,超喜欢。有没有共享这个主题的( ⊙ o ⊙ )!
中国 B1
@ 易维营销seo 正在作,会升级主题,放出
江苏省苏州市太仓市 14F
恩,这个方法好,很实用~
浙江省杭州市 15F
站长好!每篇文章的“阅读全文”按钮默认情况下是隐藏的,鼠标经过就出现,这很好,但同时随着这个按钮的出现把这个栏上下变宽了,为什么会这样???站长你的就不会出现这个情况啊????
中国 B1
@ chzng 看你的缺少什么
浙江省杭州市 16F
站长好!“阅读全文”按钮鼠标经过就出现,但同时随着这个按钮的出现把这个栏上下变宽了,为什么会这样???站长你的就不会出现这个情况啊????
浙江省杭州市 17F
请问这种情况这么解决啊?
浙江省杭州市 18F
”阅读全文”按钮出现出现把文章正文这个栏上下变宽了,这个问题这么解决啊?
山西省运城市 19F
全力支持!
广东省汕头市 20F
我想用在别的主题上,但主题里没有:js/custom.js
这个文件..
只能用在你站点这个主题上么?
还有按钮的图片能否也分享出来?
来自外部的引用