Maison > interface Web > js tutoriel > jQuery CSS implémente la commutation de colonne d'étiquette coulissante effect_jquery

jQuery CSS implémente la commutation de colonne d'étiquette coulissante effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:25:15
original
1555 Les gens l'ont consulté

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){

 //index是li数组的的索引值

 $(this).mouseover(function(){

 var liNode = $(this);

 //延迟是为了减少服务器压力,防止鼠标快速滑动

 timeId = setTimeout(function(){

  //将原来显示的div隐藏掉

  $("div.myDiv").removeClass("myDiv");

  //将原来的li的myLi去掉

  $("li.myLi").removeClass("myLi");

  //显示当前鼠标li的对应的div

  $("div").eq(index).addClass("myDiv");

  //增加当前li的myLi

  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.

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal