Maison > interface Web > js tutoriel > Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)

Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)

不言
Libérer: 2019-02-23 16:59:32
avant
3066 Les gens l'ont consulté

Ce que cet article vous apporte est une introduction à deux méthodes (exemples de code) d'implémentation de Taobao Magnifying Glass en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce que la loupe Taobao

Introduction à deux méthodes dimplémentation de la loupe Taobao en JavaScript (exemples de code)

Ceci, lorsque votre souris se déplace sur l'image principale à gauche, une apparaîtra à droite L'image agrandie, appelons cela une loupe.

Méthode approximative

  • La première façon est d'avoir une petite image à gauche et une image originale à droite. Lorsque la souris passe sur la petite image, changez. la valeur gauche et supérieure pour obtenir un mouvement synchrone (l'attribut de position de l'image originale est défini sur absolu)

  • Deuxièmement, lorsque la souris se déplace sur la petite image, en changeant l'arrière-plan- position de la valeur de l’image originale pour se déplacer de manière synchrone.

Opérations clés

  • La première étape consiste à obtenir la position de la souris sur la petite image et à positionner la case qui suit la souris (vous je devrais savoir De quel bloc s'agit-il ?

1

2

3

4

5

6

//e.offsetX ,offsetY是鼠标的位置

//方块的left top在你的鼠标的左上方(网页左上角是原点),因此是减去一个方块的一半。

      var x = e.offsetX - 方块.offsetWidth / 2;

      var y = e.offsetY - 方块.offsetHeight / 2;

      方块.style.left = x + 'px';

      方块.style.top = y + 'px';

Copier après la connexion

Cela n'est évidemment pas suffisant !

Vous devez également prendre en compte les positions/situations extrêmes
Si vous utilisez uniquement les paramètres ci-dessus, lorsque votre souris se déplace vers le bord de l'image, la moitié du carré apparaîtra à l'extérieur l'image.

Introduction à deux méthodes dimplémentation de la loupe Taobao en JavaScript (exemples de code)

La bonne réponse devrait être Lorsque votre bloc touche le bord, votre bloc ne peut plus bouger, Bien que votre souris soit toujours Déplacez-vous en dehors de la zone « effective » zone d'activité de la souris" dans l'image ci-dessous.

Introduction à deux méthodes dimplémentation de la loupe Taobao en JavaScript (exemples de code)

Ensuite, vous devez ajouter du code

1

2

3

4

5

6

      if (x  小图.offsetWidth - 方块.offsetWidth) {

        x = 小图.offsetWidth - 方块.offsetWidth;

      }

      if (y > 小图.offsetHeight - 方块.offsetHeight) {

        y = 小图.offsetHeight - 方块.offsetHeight;

      }

Copier après la connexion
  • La deuxième étape consiste à contrôler la gauche - en haut ou en arrière-plan - position dans la grande image

1

2

3

4

5

6

7

8

9

10

11

12

      //第一种方法:需要注意的是这里的left 和 top得反过来,你鼠标在小图上往下移的时候,对应的大图其实是往上移的。

      //所以:大图上的left = -小图上的left * 他们的缩放倍率

      大图.style.display = "block";

      大图.style.left = -x * 大图.offsetWidth / 小图.offsetWidth  + 'px';

      大图.style.top = -y * 大图.offsetHeight / 小图.offsetHeight + 'px';

      

     //第二种方法,这里需要注意 backgroundPosition的值是从0 - 100%的(得用百分比表示);

     //需要注意的是何时为百分百,从上面的极端情况判定我们可以知道

     //x 是从0 到 mask.offsetWidth - rect.offsetWidth;

     //因此这就是0 - 100%;y同理

      大图.style.display = "block";

      大图.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;

Copier après la connexion

Notes

  • Nous avons mentionné ci-dessus que l'événement mousemove est lié à la petite image img pour positionner le block. En fait, en fonctionnement réel, nous ne pouvons pas le lier directement avec img, mais devons utiliser un calque de masque de la même taille que img, sinon, lorsque vous déplacez la souris, l'image clignote follement , follement ! fou!

  • Il existe également une fonction de limitation. Si vous souhaitez limiter cela, limitez-le simplement.

  • Il y a une autre chose très importante, qui est la taille du p à droite de montrant la grande image , ce doit être la taille de la case sur la petite image* Zoom Si la taille du grossissement est trop grande, il y aura plus d'espace vide. Si elle est trop petite, l'affichage sera incomplet. Vous trouverez le code ci-dessous à emporter chez vous et à tester comme un fou.

Un peu plus de détails

Je sais que je ne suis peut-être pas très détaillé, donc. .

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

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

nbsp;html>

 

 

 

  <meta>

  <meta>

  <meta>

  <title>tb放大镜</title>

  <style>

    .small-box {

      position: relative;

      height: 300px;

    }

 

    .small-pic {

      width: auto;

      height: 300px;

    }

 

    .mask {

      width: 526px;

      position: absolute;

      top: 0;

      left: 0;

      z-index: 1;

      height: 100%;

      cursor: crosshair;

    }

 

    .rect {

      position: absolute;

      top: 0;

      left: 0;

      width: 100px;

      height: 100px;

      opacity: .5;

      background-color: red;

      z-index: 0;

    }

 

    .big-box {

      display: inline-block;

      position: relative;

      width: 266px;

      height:266px;

      border: 1px solid red;

      overflow: hidden;

    }

    .big-pic {

      position: absolute;

      width: 1400px;

      height: 798px;

      top: 0;

      left: 0;

    }

    .big-pic2{

      display: inline-block;

      width: 266px;

      height:266px;

      background-size: auto 798px;

      background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg");

      background-position: 0 0;

}

  </style>

 

 

 

  <div>

    <img  alt="Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)" >

    <div></div>

    <div></div>

  </div>

  <div>

    <img  alt="Introduction à deux méthodes d'implémentation de la loupe Taobao en JavaScript (exemples de code)" >

  </div>

  <div>

    <div></div>

  </div>

 

<script>

   

  window.onload = function () {

    var mask = document.getElementsByClassName(&#39;mask&#39;)[0];

    //为什么要用mask呢?不直接用选中small-pic。

    //如果直接选择图片标签来绑定下面的mouseover事件,图片会一直闪烁!所以我们得给他一个和图片一样大小的遮罩层

    var rect = document.getElementsByClassName(&#39;rect&#39;)[0];

    var bPic = document.getElementsByClassName("big-pic")[0];

    var bPic2 = document.getElementsByClassName("big-pic2")[0];

    mask.addEventListener(&#39;mousemove&#39;, throttle(magnifier,100))

    function magnifier(e){

 

      //方块的left top在你的鼠标的左上方(网页左上角是原点),因此是减去一个方块的一半。

      var x = e.offsetX - rect.offsetWidth / 2;

      var y = e.offsetY - rect.offsetHeight / 2;

      //极端情况,也就是当你的鼠标上的方块到四个边的边缘的时候。

      if (x < 0) {

        x = 0;

      }

      if (y < 0) {

        y = 0;

      }

      if (x > mask.offsetWidth - rect.offsetWidth) {

        x = mask.offsetWidth - rect.offsetWidth;

      }

      if (y > mask.offsetHeight - rect.offsetHeight) {

        y = mask.offsetHeight - rect.offsetHeight;

      }

 

      //方块定位

      rect.style.display="block";

      rect.style.left = x + &#39;px&#39;;

      rect.style.top = y + &#39;px&#39;;

 

      //第一种方法:需要注意的是这里的left 和 top得反过来,你鼠标在小图上往下移的时候,对应的大图其实是往上移的。

      //所以:大图上的left = -小图上的left * 他们的缩放倍率

      bPic.style.display = "block";

      bPic.style.left = -x * bPic.offsetWidth / mask.offsetWidth  + &#39;px&#39;;

      bPic.style.top = -y * bPic.offsetHeight / mask.offsetHeight +  &#39;px&#39;;

      

     //第二种方法,这里需要注意 backgroundPosition的值是从0 - 100%的(得用百分比表示);

     //需要注意的是何时为百分百,从上面的极端情况判定我们可以知道

     //x 是从0 到 mask.offsetWidth - rect.offsetWidth;

     //因此这就是0 - 100%;y同理

      bPic2.style.display = "block";

      bPic2.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;

 

    }

 

 

    mask.addEventListener(&#39;mouseout&#39;,function(){

      rect.style.display = "none";

      bPic.style.display = "none";

      bPic2.style.display = "none";

    })

 

 

    //函数节流

    function throttle(fn, delay) {

      var pre = new Date().getTime();

      return function () {

        var context = this;

        var args = arguments;

        var now = new Date().getTime();

        if (now - pre > delay) {

          fn.apply(this,arguments);

        }

      }

    }

 

 

  }

</script>

Copier après la connexion

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!

Étiquettes associées:
source:segmentfault.com
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