功能描述:鼠标移到上/下箭头,页面慢慢向上/下滑动,鼠标移开则停止;若点击则直接滑到页首/页尾。
核心源码来自:http://kan.willin.org/?p=1333
不晓得有多少同学在用这个滑动导航的jQuery代码,在用的不妨再看看咯~
html代码+php判断,文章页才加载comt这个div: 继续阅读
花了一下午把Simple-I主题再一次全面的整理了一遍,对所有JS进行了优化,主要是在对象选择的优化上。
其中一段就是这个滑动导航代码的小更新,原来的代码是:
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
Wuha,实习上课任务已完成,剩下一些文字总结!昨收到指导老师指示,今明两天她自己上课,让我们自己好好专研教材。这不我就待家里,在梦中专研到今12点,多努力的孩子呀!
这次还是再次折腾jQuery,实现“双击页面返回顶部”,最基本的核心代码:
$('html,body').dblclick(function(){ $('html,body').animate({scrollTop: 0},800); });
用上这段代码后即可实现:双击页面任何地方,网页即会800ms返回顶部。不懂jQuery的,可先阅读《如何正确使用jQuery代码》。
上篇文章说道给小站加个返回顶部的按钮,很简单很实用很友好。一句html插入代码、一句CSS美化代码、一句jQuery滑动代码,轻松搞定!这篇文章接着来说,相关代码上篇文章也已补充,今儿就主要来说说代码的含义。
既然用了,顺便了解学习下它的含义,那是不学白不学的事儿呀!先看效果图,最好是亲自点击体验:

图中左手边三个图标,功能分别是滑动到顶部、到评论、到底部。具体代码:
东西很简单,还是利用jQuery,直接代码:
html代码,一般放在footer.php里:
<a href="#" id="top"> 返 回 顶 部 </a>
CSS代码,使用了fixed让对象固定于浏览器窗口:
#top{position:fixed;bottom:0;right:10px;}
jQuery代码,注意正常使用的几个条件:
$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);return false;});
OK,此文完! 继续阅读
