En avril de cette année, j'ai créé un effet de changement de page par glisser-déposer dans mon dortoir.
Il a été conçu à l'origine pour mon propre site de blog. J'ai eu l'idée mardi. J'ai sauté les cours pendant deux jours le mercredi et le jeudi pour compter les coordonnées. Je suis rentré chez moi le vendredi et j'ai écrit la première version le soir. je m'attends à ce que les critiques soient plutôt bonnes après sa sortie. De nombreuses personnes m'ont demandé comment modifier cet effet pour pouvoir l'utiliser sur mon site Web. Je publie donc ce post pour expliquer le principe de cet effet en détail.
J'appelle officiellement cet effet ThrowPage, et je continuerai certainement à améliorer cet effet et à publier le code encapsulé pour que tout le monde puisse l'appeler Peut-être un mois plus tard, peut-être un an plus tard, In Me God Trust.
Cet article sera rédigé dans l’ordre de trois couches distinctes : couche structurelle, couche présentation et couche comportementale :
Boîte de code d'exécution
<html>
<tête>
<titre>ThrowPage</title>
<style type="text/css">
html,corps{
largeur : 100 % ;
hauteur : 100 % ;
bordure : 0px ;
marge : 0px ;
débordement : caché ;
}
#menu{
largeur : 1 000 px ;
hauteur : 500 px ;
débordement : caché ;
arrière-plan : bleu clair ;
}
.page{
position : absolue ;
largeur : 300 px ;
hauteur : 400 px ;
gauche : 350 px ;
haut : 50 px ;
arrière-plan :#FFF ;
bordure : 1px solide #999 ;
}
ul{
style de liste : aucun ;
hauteur : 320 px ;
marge : 20 px ;
remplissage : 0 px ;
arrière-plan :#EEE ;
}
li{
taille de police : 12 px ;
hauteur : 20 px ;
hauteur de ligne : 20 px ;
bordure inférieure : 1px en pointillé #999 ;
}
Li span{
flotteur : à droite ;
}
li un{
couleur : #000 ;
décoration de texte : aucune ;
}
li a:survoler{
décoration de texte : souligné ;
}
.conseil{
affichage:bloc;
hauteur : 20 px ;
marge :0px 20px ;
hauteur de ligne : 20 px ;
texte-align:centre;
taille de police : 12 px ;
arrière-plan : #999 ;
}
</style>
</tête>
<corps>
<script type="text/javascript">
identifiant de fonction (obj) {
return document.getElementById(obj);
}
page var;
varmx;
var md=faux;
var sh=0;
var en=faux;
window.onload=fonction(){
page=id("menu").getElementsByTagName("div");
si(page.longueur>0){
page[0].style.zIndex=2;
}
pour(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Glisser-déposer de page</span>";
page[i].id="page"+i;
page[i].i=i;
page[i].onmousedown=fonction(e){
si(!fr){
si(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
mx=350-ex;
this.style.cursor="déplacer";
md=vrai ;
si(document.all){
this.setCapture();
}autre{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=fonction(e){
si(md){
fr=vrai ;
si(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
this.style.left=ex+mx+"px";
si(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
si(this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="par défaut";
md=faux ;
si(this.offsetLeft==350){
fr=faux;
}
si(document.all){
this.releaseCapture();
}autre{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
flyout(ce);
}
}
}
fonction flyout (obj) {
si(obj.offsetLeft < 350){
si( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px" ;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}autre{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
si(obj.offsetLeft > 350){
si((obj.offsetLeft + 10) < 650){
obj.style.left=obj.offsetLeft + 10 + "px" ;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}autre{
obj.style.left= 650 + "px" ;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
fonction flyin(obj){
si(obj.offsetLeft<350){
si((obj.offsetLeft + 10) < 350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}autre{
obj.style.left= 350 +"px";
fr=faux;
}
}
si(obj.offsetLeft>350){
si((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}autre{
obj.style.left=350+"px";
fr=faux;
}
}
}
</script>
<identifiant div="menu">
<div classe="page">
<ul>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Partenaire</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Belle île</a></li>
<li style="background:coral;"><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Danseuse</a>< /li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Main dans la main</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> La première maison d'amour</a></li>
</ul>
</div>
<div classe="page">
<ul>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Ah ! L'amant imparable</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Réseau</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Pluie séduisante</a></li>
<li><span>09-11-25</span> <a href=" http://www.oern.cn " target="_blank"> Passé 2000</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Terroriste vert</a></li>
</ul>
</div>
<div classe="page">
<ul>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Le temps disparaît lentement</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Source chaude tranquille</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Fleurs épanouies</a></li>
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Ah Hui a élevé un chien</a></li >
<li><span>25-11-09</span> <a href=" http://www.oern.cn " target="_blank"> Vrai ou faux</a></li>
<li><span>25/11/09</span> <a href=" http://www.oern.cn " target="_blank"> Parti communiste Tsai du sud de Taiwan</a></li>
</ul>
</div>
</div>
</corps>
</html>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]
couche structurelle
Comment étendre le contenu d'un répertoire par page ? Peut-être que oui, du moins c'est comme ça que je l'ai écrit
<identifiant div="menu">
<div classe="page">
<ul>
<li><span>25/11/09</span><a>Chanson d'amour 1980</a></li>
<li><span>25/11/09</span><a>Chanson d'amour 1990</a></li>
<li><span>25/11/09</span><a>Chanson d'amour 2000</a></li>
<li><span>25/11/09</span><a>Mère</a></li>
</ul>
<span class="tip">Glisser-déposer 1/2 page</span>
</div>
<div classe="page">
<ul>
<li><span>25/11/09</span><a>Partenaire</a></li>
<li><span>25/11/09</span><a>Manquant</a></li>
<li><span>25/11/09</span><a>Enfance</a></li>
<li><span>25/11/09</span><a>Berger garçon</a></li>
</ul>
<span class="tip">2/2 pages glisser-déposer pour tourner les pages</span>
</div>
</div>
.jpg)
<ul> est une liste de chaque page, la partie gris clair dans l'image
<li> est un élément de la liste, la partie corail dans l'image
<span class="tip"> ne doit pas apparaître en xhtml et doit être ajouté par js. C'est la marque d'index sous chaque page, la partie gris foncé de l'image.
<div class="page"> est la page du répertoire, la partie blanche dans l'image
<div id="menu"> est un répertoire qui contient toutes les pages, la partie bleu vif de l'image. Bien sûr, s'il n'y a rien d'autre sur la page que cet effet, cette balise n'a pas besoin d'être écrite, alors la balise parent de tous les <div class="page"> est <body>
Peut-être direz-vous que le répertoire devrait aussi être <ul>, donc il devrait être écrit comme ceci
<ul id="menu">
<li class="page">
<ul>
<li><span>25/11/09</span><a>Chanson d'amour 1980</a></li>
<li><span>25/11/09</span><a>Chanson d'amour 1990</a></li>
<li><span>25/11/09</span><a>Chanson d'amour 2000</a></li>
<li><span>25/11/09</span><a>Mère</a></li>
</ul>
<span class="tip">Glisser-déposer 1/2 page</span>
</li>
<ul class="page">
<ul>
<li><span>25/11/09</span><a>Partenaire</a></li>
<li><span>25/11/09</span><a>Manquant</a></li>
<li><span>25/11/09</span><a>Enfance</a></li>
<li><span>25/11/09</span><a>Berger garçon</a></li>
</ul>
<span class="tip">2/2 pages glisser-déposer pour tourner les pages</span>
</li>
</li>
C'est effectivement plus sémantique, mais le problème va se poser immédiatement