浙江 杭州

创意电梯上升效果的返回顶部js插件

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2017-02-04

人气5856

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


elevator.js是一款非常有创意的电梯上升效果的返回顶部js插件。普通的返回顶部(back to top)效果都是快速或加速使页面回到顶部。该插件使用升降机的上升效果,使页面开始时慢速上升,再到加速,快到顶部时再减速。并且你还可以定制一段音乐效果来配合返回顶部的特效。

使用方法

该返回顶部插件没有使用任何外部依赖(jQuery等),使用十分简单直接。所有的样式你都可以自己使用CSS来控制。Elevator.js只是处理页面滚动效果和音效的管理。

初始化插件

使用时你可以创建一个Elevator对象,并传入用于播放的音频文件。

<script>
// Elevator script included on the page, already.

window.onload = function() {
  var elevator = new Elevator({
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}

// You can run the elevator, by calling.
elevator.elevate();
</script>            
              

你可以设置一个HTML元素,通过点击该HTML元素来返回顶部。

<div class="elevator-button">Back to Top</div>                
              
<script>
// Elevator script included on the page, already.
window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    mainAudio: '/src/to/audio.mp3',
    endAudio: '/src/to/end-audio.mp3'
  });
}
</script>                
              

你也可以不使用音效,而是设置在固定时间内返回顶部。

<div class="elevator-button">Back to Top</div>                
              
<script>
// Elevator script included on the page, already.
window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    duration: 1000 // milliseconds
  });
}
</script>
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:3.47M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1947.html 非特殊说明,本文版权归原作者所有,转载请注明出处
创意电梯上升效果的返回顶部js插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)