当前位置：首页 > 网页特效 > 滚动

中国风古典云纹返回顶部jQuery插件

分类：滚动日期：2024-05-14 点击(0) 评论(0)

中国风古典云纹返回顶部jQuery插件

简介

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

```html
<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结构如下：

```html
<div id="shangxia">
  <div id="shang"></div>
  
  <div id="comt"></div>
  <div id="xia"></div>
</div>     
```
#####  CSS样式
为返回顶部特效添加下面的CSS样式：

```html
/* --------- 返回顶部代码 --------- */
#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;
}
/* 返回顶部代码完 */   
```              
##### 初始化插件
该返回顶部插件可以实现返回页面的上中下部分的三个功能。具体效果请查看演示页面。返回页面顶部的实现代码如下：

```html
// 返回顶部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
        });
    });
```
滚动到页面底部的实现代码如下：
```html

/*
*点击返回顶部的“下”字时，以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);
}           
```

web299.com

中国风古典云纹返回顶部jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果