中国风古典云纹返回顶部jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的中国风古典云纹返回顶部jQuery插件。该返回顶部插件使用中国古典云纹元素，通过jquery和GSAP，以及CSS3来制作返回顶部特效。

古典云纹返回顶部插件由清萍工作室提供。插件中的素材是在网上找的云纹边框素材，然后再找的流苏，用Adobe Photoshop合成后，再用Adobe After Effects做飘动动画，最后导出为png，用css帧动画运用在网页中。该动画的CSS悬停用的是CSS滤镜变色。

使用方法

在页面中引入jquery、TweenMax.min.js和ScrollToPlugin.min.js文件。

<script src="dist/js/jquery.min.js"></script>                  
<script src="dist/js/TweenMax.min.js"></script>                  
<script src="dist/js/ScrollToPlugin.min.js"></script>

HTML结构

古典云纹返回顶部的HTML结构如下：

<div id="shangxia">
  <div id="shang"></div>
  <!-- 
  如果你是博客，这里需要加php判断。
  是首页则跳转到留言板，是内页则跳转到评论框。 
  -->
  <div id="comt"></div>
  <div id="xia"></div>
</div>

CSS样式

为返回顶部特效添加下面的CSS样式：

/* --------- 返回顶部代码 --------- */
#shangxia {
    position: fixed;
    right: 50%;
    margin-right: -670px;
    top: 63%;
    z-index: 9993;
    -webkit-animation: dh_ffdb 2s steps(24) infinite;
    -o-animation: dh_ffdb 2s steps(24) infinite;
    animation: dh_ffdb 2s steps(24) infinite;
    background: url(img/gotop.png) no-repeat;
    width: 54px;
    height: 300px;
    transition: 1s;
}

/* 悬停变为青绿色滤镜动画 */
#shangxia:hover {
    -webkit-filter: hue-rotate(-227deg);
    filter: hue-rotate(-227deg);
}

#shang, #comt, #xia {
    width: 33px;
    position:absolute;
    z-index: 9996;
    cursor: pointer;
}

/* png序列的关键帧动画 */
@keyframes dh_ffdb{
    100% {background-position:-1296px 0;}
}

#comt {
height: 33px;
top: 71px;
left: 10px;
}

#shang {
height: 32px;
top: 37px;
left: 10px;
}

#xia {
height: 33px;
top: 106px;
left: 10px;
}
/* 返回顶部代码完 */

初始化插件

该返回顶部插件可以实现返回页面的上中下部分的三个功能。具体效果请查看演示页面。返回页面顶部的实现代码如下：

// 返回顶部js
jQuery(document).ready(function(a) {
    $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") :a("body") :a("html,body");
    a("#shang").mouseover(function() {
        up();
    }).mouseout(function() {
        clearTimeout(fq);
    }).click(function() {
        TweenMax.to(window, 1.5, {
            scrollTo:0,
            ease:Expo.easeInOut,
            y:0
        });
    });

滚动到页面底部的实现代码如下：

/*
*点击返回顶部的“下”字时，以1秒是速度滚动到id为#footerbar处。
* window, 1 为1秒，这里可以随意设置。
* ease:Expo.easeInOut为速度的曲线缓动，这里支持jquery的ease函数。
*/    
    a("#xia").mouseover(function() {
        dn();
    }).mouseout(function() {
        clearTimeout(fq);
    }).click(function() {
        TweenMax.to(window, 1, {
            scrollTo:"#footerbar",
            ease:Expo.easeInOut
        });
    });

返回到页面中间的实现代码如下：

/*
*绑定返回顶部的“评”字的id"#comt"，以1.5秒的速度滚动到“#pinglun”评论区域。这里可以绑定多个id。
* window, 1.5 为1.5秒，这里可以随意设置。
* offsetY:30 为30像素的偏移量。
*/
    $("#comt").click(function() {
        TweenMax.to(window, 1.5, {
            scrollTo:{
                y:"#pinglun",
                offsetY:30
            },
            ease:Back.easeOut.config(1.9),
            y:0
        });
    });
});

代码中使用的两个函数up()和dn()代码如下：

// 下面的 "up()", 20是鼠标悬停时的位移速度，如需更慢，则设置为40或更高。
function up() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() - 1);
    fq = setTimeout("up()", 20);
}

function dn() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() + 1);
    fq = setTimeout("dn()", 20);
}

中国风古典云纹返回顶部jQuery插件由清萍工作室提供，官方演示地址为：www.emlog.vip。