以下是 js带音乐叮的一声返回顶部代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<title>jQuery带音乐功能返回顶部代码 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='css/styles.css' rel='stylesheet'>
<script src='js/elevator.js'></script>
</head>
<body>
<h1>往下滚动</h1>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="down-arrow">▼</div>
<p>内容</p>
<div class="footer">
<div class="do-the-thing">
<div class="elevator">
<svg class="sweet-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<path d="M70,47.5H30c-1.4,0-2.5,1.1-2.5,2.5v40c0,1.4,1.1,2.5,2.5,2.5h40c1.4,0,2.5-1.1,2.5-2.5V50C72.5,48.6,71.4,47.5,70,47.5z M47.5,87.5h-5v-25h5V87.5z M57.5,87.5h-5v-25h5V87.5z M67.5,87.5h-5V60c0-1.4-1.1-2.5-2.5-2.5H40c-1.4,0-2.5,1.1-2.5,2.5v27.5h-5 v-35h35V87.5z"/>
<path d="M50,42.5c1.4,0,2.5-1.1,2.5-2.5V16l5.7,5.7c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.2,1.8-0.7c1-1,1-2.6,0-3.5l-10-10 c-1-1-2.6-1-3.5,0l-10,10c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l5.7-5.7v24C47.5,41.4,48.6,42.5,50,42.5z"/>
</svg>
返回顶部
</div>
</div>
</div>
<script>
var elementButton = document.querySelector('.elevator');
var elevator = new Elevator({
element: elementButton,
mainAudio: 'music/elevator.mp3',
endAudio: 'music/ding.mp3'
});
</script>
</body>
</html>
JS代码(elevator.js):
var Elevator = (function(){
'use strict';
// Elements var body = null;
// Scroll vars var animation = null;
var duration = null;
// ms var customDuration = false;
var startTime = null;
var startPosition = null;
var elevating = false;
var mainAudio;
var endAudio;
/** * Utils */
// Soft object augmentation function extend( target,source ){
for ( var key in source ){
if ( !( key in target ) ){
target[ key ] = source[ key ];
}
}
return target;
}
;
// Thanks Mr Penner - http://robertpenner.com/easing/ function easeInOutQuad( t,b,c,d ){
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
;
function extendParameters(options,defaults){
for(var option in defaults){
var t = options[option] === undefined && typeof option !== "function";
if(t){
options[option] = defaults[option];
}
}
return options;
}
/** * Main */
// Time is passed through requestAnimationFrame,what a world! function animateLoop( time ){
if (!startTime){
startTime = time;
}
var timeSoFar = time - startTime;
var easedPosition = easeInOutQuad(timeSoFar,startPosition,-startPosition,duration);
window.scrollTo(0,easedPosition);
if( timeSoFar < duration ){
animation = requestAnimationFrame(animateLoop);
}
else{
animationFinished();
}
}
;
// ELEVATE!// /// ____// .' '=====<0// |======|// |======|// [IIIIII[\--()// |_______|// C O O O D// C O O O D// C O O O D// C__O__O__O__D// [_____________] function elevate(){
if( elevating ){
return;
}
elevating = true;
startPosition = (document.documentElement.scrollTop || body.scrollTop);
// No custom duration set,so we travel at pixels per millisecond. (0.75px per ms) if( !customDuration ){
duration = (startPosition * 1.5);
}
requestAnimationFrame( animateLoop );
// Start music! if( mainAudio ){
mainAudio.play();
}
}
function resetPositions(){
startTime = null;
startPosition = null;
elevating = false;
}
function animationFinished(){
resetPositions();
// Stop music! if( mainAudio ){
mainAudio.pause();
mainAudio.currentTime = 0;
}
if( endAudio ){
endAudio.play();
}
}
function onWindowBlur(){
// If animating,go straight to the top. And play no more music. if( elevating ){
cancelAnimationFrame( animation );
resetPositions();
if( mainAudio ){
mainAudio.pause();
mainAudio.currentTime = 0;
}
window.scrollTo(0,0);
}
}
//@TODO:Does this need tap bindings too? function bindElevateToElement( element ){
element.addEventListener('click',elevate,false);
}
function main( options ){
// Bind to element click event,if need be. body = document.body;
var defaults ={
duration:undefined,mainAudio:false,endAudio:false,preloadAudio:true,loopAudio:true,}
;
options = extendParameters(options,defaults);
if( options.element ){
bindElevateToElement( options.element );
}
if( options.duration ){
customDuration = true;
duration = options.duration;
}
window.addEventListener('blur',onWindowBlur,false);
// If the browser doesn't support audio,stop here! if ( !window.Audio ){
return;
}
if( options.mainAudio ){
mainAudio = new Audio( options.mainAudio );
mainAudio.setAttribute( 'preload',options.preloadAudio );
mainAudio.setAttribute( 'loop',options.loopAudio );
}
if( options.endAudio ){
endAudio = new Audio( options.endAudio );
endAudio.setAttribute( 'preload','true' );
}
}
return extend(main,{
elevate:elevate}
);
}
)();
CSS代码(styles.css):
html,body{padding:0px;margin:0px;width:100%;min-height:100%;}
body{color:#0C1F31;background:#fff;font-family:'Avenir Next','Helvetica Neue',Helvetica,Arial,sans-serif;text-align:center;}
.wrapper{width:900px;margin:auto;text-align:center;}
h1{font-size:120px;font-weight:600;margin-bottom:8px;margin-top:120px;}
p{width:900px;font-size:24px;font-weight:400;margin:auto;line-height:35px}
.down-arrow{font-size:120px;margin-top:90px;margin-bottom:90px;text-shadow:0px -20px #0C1F31,0px 0px #C33329;color:rgba(0,0,0,0);-webkit-transform:scaleY(0.8);-moz-transform:scaleY(0.8);transform:scaleY(0.8);}
.footer{box-sizing:border-box;padding-top:190px;height:300px;}
.elevator{text-align:center;cursor:pointer;width:140px;margin:auto;}
.elevator:hover{opacity:0.7;}
.elevator svg{width:40px;height:40px;display:block;margin:auto;margin-bottom:5px;}
.github-link{position:fixed;top:0px;right:0px;}
.links{margin-top:25px;font-size:16px;font-weight:bold;}
.links a,iframe{margin-left:10px;margin-right:10px;}
iframe{margin-bottom:-3px;}
.links a{text-decoration:none;color:#0C1F31;}
分享到QQ
分享到微博
微信扫一扫
