js exemple de barre de défilement personnalisée d'effets spéciaux-js tutoriel-php.cn

Maison

interface Web

js tutoriel

js exemple de barre de défilement personnalisée d'effets spéciaux

Jun 27, 2017 am 09:48 AM

demo javascript 滚动自定义

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> ;Document</title>
<style type="text/css">
body {
margin : 0;
}
#wrap {
margin : 30px auto ;
position : relative;
bordure : 1px solide #000;
largeur : 500px;
remplissage : 0 20px;
hauteur : 400px;
débordement : caché ;
}
#scroll {
position : absolue;
gauche : 20px;
haut : 0;
largeur : 500px;
}
p {
police : 14px /30px "宋体";
}
#scrollBar {
position : absolue;
droite : 0;
haut : 0;
largeur : 12px;
hauteur : 100 %;
arrière-plan : #f1f1f1;
}
#bar {
position : absolue;
haut : 0;
gauche : 0;
largeur : 12px;
hauteur : 100px;
rayon-bordure : 6px;
arrière-plan : #000;
curseur : pointeur;
}
</style>
</head>
<body>
<div id="wrap">
<div id="scroll">
<h2>关于妙味</h2>
&lt ;p>支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一</p>
<p> Javascript Il s'agit d'une application javascript, d'une application javascript et d'une application javascript.希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。</p>
<h2>妙味讲师：</h2>
<p> 、ShopEx等。</p>
<h3>妙味JS课程高级讲师：钟毅</h3>
<p>资深PHP程序员，曾独立开发CMS系统。</p> <p>
<p>有着复杂而深入的项目实践经验。 </p>
<p>钟毅为人
<h2>关于妙味</h2&gt ;
<p>课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学</p>
<p>目前主要针对的是javascript培训，同时还Il s'agit d'une application css, javascript et js. Il s'agit d'une application javascript pour une application Javascript.了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。&lt ;/p>
<h2>妙味讲师：</h2>
<p>人人网、ShopEx等。< /p>
<h3>妙味JS课程高级讲师：曾独立开发CMS系统。< /p>
&lt ;p>对前端开发有极大热情，尤其是在AJAX复杂而深入的项目实践经验。</p>
< p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>现任妙味课堂JS课程高级讲师。</p>
<h2>妙味讲师：</h2>
<p> 🎜> <h3>妙味JS
<p>
<p>对前端开发有极大热情，尤其
<p>
<p>钟毅为人性情温和、对教学工作有极大的耐心，</p>
<p>
<h2>妙味讲师：</h2& gt;
<p>Les professeurs de Miaowei Classroom proviennent des entreprises informatiques les plus attractives de Chine, telles que Renren, ShopEx, etc. </p>
<h3>Maître de conférences du cours Miaowei JS : Zhong Yi</h3>
<p>Programmeur PHP senior, qui a développé de manière indépendante des systèmes CMS. </p>
<p>A un grand enthousiasme pour le développement front-end, en particulier dans l'interaction de données AJAX, </p>
<p>Possède une expérience pratique de projets complexes et approfondis. </p> </p>
</div>
<div id="scrollBar">
<div id="bar"></div>
</ div>
</div>
<div style="height:500px;background:red"></div>
<script type="text/javascript" src=" startmove.js?1.1.11"></script>
<script type="text/javascript">
(function(){
var wrap = document.querySelector('# wrap');
var scroll = document.querySelector('#scroll');
var bar = document.querySelector('#bar');

// Modifier la hauteur du scroll bar
var scale = wrap.clientHeight/scroll.offsetHeight;
css(bar,"height",wrap.clientHeight*scale);

var maxY = wrap.clientHeight - bar.offsetHeight;

bar.addEventListener('mousedown', function(e) {

var elY = css(bar, "top");
var startY = e.clientY;
e.preventDefault();
document.addEventListener('mousemove',move);
document.addEventListener('mouseup',end);
function move(e){
var nowY = e.clientY;
var y = nowY - startY + elY;
if(y < 0 ){
y = 0;
} else if(y > maxY){
y = maxY;
}

css(bar,"top",y);

css(scroll,"top",-y/scale);

}
function end(){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',end);
}
});
mMouseWheel(wrap, function(e){
var y = css(bar,"top");
y -= 10;
if(y < 0 ){
y = 0;
}
css(bar," top" ,y);
css(scroll,"top",-y/scale);
},function(e){
var y = css(bar,"top");
y += 10;
if(y > maxY){
y = maxY;
}
css(bar,"top",y);
css(scroll," top" ,-y/scale);
});
function mMouseWheel(el, toUp,toDown){
el.addEventListener('DOMMouseScroll', function(e) {
e.preventDefault () ;
mouseScroll(e.detail,e);
});
el.addEventListener('mousewheel', function(e) {
e.preventDefault();
mouseScroll (- e.wheelDelta,e);
});
function mouseScroll(dir,e){
if(dir > 0){
toDown(e);
} else {
toUp(e);
}
}
}
})();
</script>
</body>
< /html&gt ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn