SEO首页 > wordpress百科 > wordpress实现返回顶部底部、底部、留言悬浮效果
201401月1

wordpress实现返回顶部底部、底部、留言悬浮效果

栏目:wordpress百科 Tag: 浏览:1,888 0 Comments 发表评论

如何在wordpress实现返回顶部底部、底部、留言悬浮效果,大多数主题都包含了它,但有些主题没有这个,所以,本文就就教大家wordpress如何实现返回顶部底部、底部、留言效果。效果如下:

wordpress返回顶部、底部、留言效果图

div代码:

<div>

<a id=”roll_top” title=”返回顶部” ></a>

<a {放下面的PHP代码} title=”如果您有意见,请反馈给我们!”></a>

<a id=”fall” title=”返回底部” ></a>

</div> <?php if ( !is_home() && !is_archive()): ?> id=”ct”<?php endif; ?>

上面段代码放在footer.PHP文件里面。

css代码:

.go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absoluteright:12px;bottom:25%;border-radius:5px;box-shadow:0 0 2px #6E6E6E}

.go a{background:url(images/top.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left}

.go .top{background-position:4px 0;height:20px}

.go .feedback{background-position:4px -20px;height:32px;}

.go .bottom{background-position:4px -52px;height:22px;}

.go .top:hover{background-position:-34px 0;}

.go .feedback:hover{background-position:-34px -20px;}

go .bottom:hover{background-position:-34px -52px;}

css代码放style.css 样式表里,其中图片路径,根据你放的文件夹位置写,对css代码进行微调以适合自己的主题。

JS代码:

jQuery(document).ready(function($){

jQuery(‘#roll_top’).click(function(){$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});

jQuery(‘#ct’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#comments’).offset().top}, 800);});

jQuery(‘#fall’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.footer’).offset().top}, 800);});

});

// context

jQuery(document).ready(function(){

jQuery(‘.entry_box_s ‘).hover(

function() {

jQuery(this).find(‘.context_t’).stop(true,true).fadeIn();

},

function() {

jQuery(this).find(‘.context_t’).stop(true,true).fadeOut();

}

);

});

// more

jQuery(document).ready(function(){

jQuery(‘.entry_box’).hover(

function() {

jQuery(this).find(‘.archive_more’).stop(true,true).fadeIn();

},

function() {

jQuery(this).find(‘.archive_more’).stop(true,true).fadeOut();

}

);

});

代码使用说明:

1.在主题footer.php文件中加入div代码。

2.js代码添加进主题的自定义js文件中。如果没有,自己新建一个,然后在网页中调用。

3.css代码添加进主题的样式表中,有自定义的自行添加。没有自定义css样式文件的请直接添加进主题的style.css文件中。

4.按照喜好,自己设计一张图片,注意(设计的图片不同,css样式代码也不同,因为你需要使用css代码在图片上定位)。

文章来源:袁绪能博客(微信/QQ:18960460),欢迎分享,转载请保留出处!

更多
本文地址:http://www.yuanxuneng.com/wpbaike/433.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

发表评论

*

* (保密)

😉 😐 😡 😈 🙂 😯 🙁 rolleyes.png 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗

Ctrl+Enter 快捷回复

会员登录关闭

记住我 忘记密码

注册会员关闭

小提示: 您的密码会通过填写的"电子邮箱"发送给您.