我们的Chuyaoyuan

Menu

滑动导航终结版

功能描述鼠标移到上/下箭头,页面慢慢向上/下滑动,鼠标移开则停止;若点击则直接滑到页首/页尾。

核心源码来自http://kan.willin.org/?p=1333

不晓得有多少同学在用这个滑动导航的jQuery代码,在用的不妨再看看咯~

html代码+php判断,文章页才加载comt这个div:

<div id="shangxia">
	<div id="shang"></div>
	<?php if (is_single()) { ?><div id="comt"></div><?php } ?>
	<div id="xia"></div>
</div>

CSS相关代码,更改为fixed定位,不再兼容IE6,magin-right的400需调整:

#shangxia{position:fixed;top:40%;right:50%;margin-right:-400px;display:block;}
#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;
position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:center -30px;height:32px;}
#xia{background-position:center -68px;}

 

注:此图标确为小弟PS,若你集成在主题中发布我会当作是你重新PS的,跟我无关。可如果真直接拿去用的还发布还说是自己PS的,我将从内心深处深深得膜拜你~

jQuery代码:

jQuery(document).ready(function($){
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$
('body')):$('html,body');//修复Opera滑动异常地,加过就不需要重复加了。
$('#shang').mouseover(function(){//鼠标移到id=shang元素上触发事件
		up();
	}).mouseout(function(){//鼠标移出事件
		clearTimeout(fq);
	}).click(function(){//点击事件
		$body.animate({scrollTop:0},400);//400毫秒滑动到顶部
});
$('#xia').mouseover(function(){
		dn();
	}).mouseout(function(){
		clearTimeout(fq);
	}).click(function(){
		$body.animate({scrollTop:$(document).height()},400);
        //直接取得页面高度,不再是手动指定页尾ID
});
$('#comt').click(function(){
	$body.animate({scrollTop:$('#comments').offset().top},400);
//滑动到id=comments元素,遇到不规范的主题需调整
});
});
//下面部分放jQuery外围,几个数值不妨自行改变试试
function up(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() - 1);
   fq = setTimeout("up()", 50);
}
function dn(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() + 1);
   fq = setTimeout("dn()", 50);
}

 

这个关于滑动导航此篇应该算是终结篇了……

另外昨下午对评论部分也有微调:

1.增加点击评论头像快捷回复他,原来双击某条评论快捷回复仍旧保留;

2.留言时间默认隐藏,而且只输出主评论的时间;

原文链接:http://immmmm.com/sliding-navigation-final-version.html

 

— 于 共写了1678个字
— 文内使用到的标签:

8条回应:“滑动导航终结版”

  1. 王笨笨说道:

    背景图片不错…你文章下面版权信息错位了

    • chuyao说道:

      谢谢啊 :gl: ,也是借用一位高人的图, :lol:,链接有点长了,就出去了,我也是个代码盲,欢迎常来哈, ❗

  2. jamie说道:

    😆 求教 刚刚评论的闪动字怎么弄的?

    • chuyao说道:

      ➡ 我也不是很懂, :gg: 代码盲,嘿嘿 :sbq: ,你可以问问microhu,我用的是他的Simple-M,js加密了,找不到原代码, ➡ 我很笨,介绍里说的是用的‘无冷’的‘内置”闪烁功能“, 在需要使用的地方自行添加class=”bling” , :gl: ,我帮你找了篇文章,说是js调用,http://wange.im/blink-effect-with-css-or-js.html,万戈写的, :ymy: ,希望能帮到你, 😉

      • jamie说道:

        :mrgreen: 哇哈哈
        chuyao很热情啊
        俺也是代码盲
        万戈的那种和这种闪烁功能不一样
        chuyao怎么在用免费域名? 不打算长期写博么?

        • chuyao说道:

          :mrgreen: 谢谢啊,正在打算,空间也是免费的, 😆 嘿嘿,想用格调送的com域名但是空间有点小,衡天的me域名续费贵,纠结啊, ➡ 你要是会js解密的话可以研究研究这个主题的代码,挺受用的, :ymy: 顺便问一下,你没有链?嘿嘿 😆

          • jamie说道:

            @chuyao China Mozilla Firefox 5.0 Windows XP ➡ 有 其实我也是用免费空间 3蛋的 某天一不小心被我把数据库清了 就再没弄博客 最近想做个分享类的 博客 哈哈 弄好友情一下啊 JS俺解密了 可俺找不到 😕 你会不 俺把JS解密的发给你 ?

          • chuyao说道:

            恩,荣幸啊 😥 , :gl: ,行,我试试,估计我也够呛哈哈哈,我这边也帮你找一找吧,我邮箱chuyaoyuan@gmail.com, ➡

发表评论

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