L'exemple de cet article décrit l'effet de changement de colonne d'étiquette à défilement fluide obtenu par jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Le code en cours d'exécution est le suivant

Le code spécifique est le suivant
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <html>
<head>
<title>jQuery平滑滚动的标签分栏切换</title>
<meta charset= "gb2312" >
<style>
ul,li{
margin:0px;
padding:0px;
list-style:none
}
li{
float:left;
background-color:#8c6239;
color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
}
li.myLi{
background-color:#ea5500;
border:1px solid #ea5500;
}
div{
clear:left;
background-color:#ea5500;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
div.myDiv{
display:block;
}
</style>
<script src= "./jquery-1.7.1.min.js" ></script>
<script>
var timeId;
$(document).ready( function (){
$( "li" ).each( function (index){
$(this).mouseover( function (){
var liNode = $(this);
timeId = setTimeout( function (){
$( "div.myDiv" ).removeClass( "myDiv" );
$( "li.myLi" ).removeClass( "myLi" );
$( "div" ).eq(index).addClass( "myDiv" );
liNode.addClass( "myLi" );
},300);
}).mouseout( function (){
clearTimeout(timeId);
});
});
});
</script>
</head>
<body>
<ul>
<li class = "myLi" >this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
</ul>
<div class = "myDiv" >this is div1</div>
<div>this is div2</div>
<div>this is div3</div>
</body>
</html>
|
Copier après la connexion
J'espère que cet article sera utile à la conception de la programmation jquery de chacun.