Heim > Web-Frontend > js-Tutorial > Lupeneffekt, implementiert von nativem js

Lupeneffekt, implementiert von nativem js

高洛峰
Freigeben: 2016-10-15 09:32:50
Original
1203 Leute haben es durchsucht

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好。

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

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

<!DOCTYPE HTML>

<html>

<head>

<title>js放大镜效果</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<style>

*{

margin:0px;

padding:0px;

border:none;

list-style:none;

}

#box{

margin:80px auto;

width: 352px;

}

#box p

{

width: 350px;

height: 350px;

border: 1px solid #ddd;

margin-bottom: 5px;

}

#box p img

{

width:350px;

height:350px;

}

#box h1

{

width: 352px;

height: 54px;

overflow:hidden;

position:relative;

}

#box h1 div

{

width:310px;

height: 54px;

margin:0px auto;

position:relative;

}

#box h1 div ul

{

position:absolute;

left: 0px;

top: 0px;

}

#box h1 ul li

{

width: 62px;

float: left;

}

#box h1 ul li img

{

width: 50px;

height: 50px;

padding: 1px;

border: 1px solid #CECFCE;

}

#box h1 img.hoveredThumb{

border: 2px solid #e4393c;

padding: 0;

}

/*中等大小的图片显示区域*/

p#medImgBox{

position: relative;

}

#jing{

position: absolute;

left: 0;

top: 0;

width: 175px;

height: 175px;

border-radius:50%;

background: #ffd;

opacity: 0.7;

display: none;

}

/*悬于图片/jing上方的专用于接收鼠标移动事件的

一个完全透明的层*/

#medImgBox #mian{

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

cursor: move;

opacity: 0;

}

/**

大图显示区域

**/

#largeImgBox{

position:absolute;

width: 175px;

height: 175px;

border-radius:50%;

border: 1px solid #faa;

top: 0px;

left: 352px;   

overflow: hidden;

display: none;

}

#largeImg{

display: none;

position: absolute;

}

</style> 

</head>

<body >

<div id="box">

<p id="medImgBox">

<img  src="/static/imghw/default1.png"  data-src="images/product-s1-m.jpg"  class="lazy"  id="mediumImg"  / alt="Lupeneffekt, implementiert von nativem js" >

<span id="jing"></span>

<span id="mian"></span>

<span id="largeImgBox">

<img  src="/static/imghw/default1.png"  data-src="images\product-s1.jpg"  class="lazy"  id="largeImg"/ alt="Lupeneffekt, implementiert von nativem js" >

</span>

</p>

<h1>

<div>

<ul id="list">

<li><img  src="/static/imghw/default1.png"  data-src="images\product-s1.jpg"  class="lazy"   / alt="Lupeneffekt, implementiert von nativem js" ></li>

<li><img  src="/static/imghw/default1.png"  data-src="images\product-s2.jpg"  class="lazy"   / alt="Lupeneffekt, implementiert von nativem js" ></li>

<li><img  src="/static/imghw/default1.png"  data-src="images\product-s3.jpg"  class="lazy"   / alt="Lupeneffekt, implementiert von nativem js" ></li>

<li><img  src="/static/imghw/default1.png"  data-src="images\product-s4.jpg"  class="lazy"   / alt="Lupeneffekt, implementiert von nativem js" ></li>

<li><img  src="/static/imghw/default1.png"  data-src="images\product-s1.jpg"  class="lazy"   / alt="Lupeneffekt, implementiert von nativem js" ></li>

</ul>

</div>

</h1>

</div>

 

<script>

var imgList = document.querySelectorAll(&#39;#box ul li img&#39;);

for(var i=0; i<imgList.length; i++){

var img = imgList[i];

img.onmouseover = changeThumbImg;

}

function changeThumbImg(){

var previousHovered = document.querySelector(&#39;.hoveredThumb&#39;);

if(previousHovered==null){

this.className = &#39;hoveredThumb&#39;;

changeMediumImg(this.src);  //修改中等图片的src

}else if(previousHovered!=this){

previousHovered.removeAttribute(&#39;class&#39;);

this.className = &#39;hoveredThumb&#39;;

changeMediumImg(this.src);  //修改中等图片的src

}

}

function changeMediumImg(thumbSrc){

var dotIndex = thumbSrc.lastIndexOf(&#39;.&#39;);

var prefix = thumbSrc.substring(0, dotIndex);

var suffix = thumbSrc.substring(dotIndex);

var mediumSrc = prefix + &#39;-m&#39;+suffix;

document.getElementById(&#39;mediumImg&#39;).src = mediumSrc;

}

/**

为放大镜jing添加鼠标移动事件

**/

document.querySelector(&#39;#mian&#39;).onmousemove =

function(event){

var x = event.offsetX;  //事件相对于事件源的偏移量

var y = event.offsetY; 

var jing = document.getElementById(&#39;jing&#39;);

var w = jing.offsetWidth; //jing的宽和高

var h = jing.offsetHeight;

var left = x<w/2 ? 0 : (x-w/2);

var top = y<h/2 ? 0 : (y-h/2);

if(x>(w*2-w/2)){

left = w*2 - w;

}

if(y>(h*2-h/2)){

top = h*2 - h;

}

jing.style.left = left+&#39;px&#39;;

jing.style.top = top+&#39;px&#39;;

//修改大图的位置/

var largeImg = document.getElementById(&#39;largeImg&#39;);

largeImg.style.left = (-left*largeImg.width/350) + &#39;px&#39;;

largeImg.style.top = (-top*largeImg.height/350)+&#39;px&#39;;

}

document.querySelector(&#39;#mian&#39;).onmouseover = function(){

//显示jing

var jing = document.getElementById(&#39;jing&#39;);

jing.style.display = &#39;block&#39;;

var largeImgBox = document.getElementById(&#39;largeImgBox&#39;);

largeImgBox.style.display = &#39;block&#39;;

//获取当前要显示的大图的src

var src = document.querySelector(&#39;#mediumImg&#39;).src;

var dotIndex = src.lastIndexOf(&#39;.&#39;);

var prefix = src.substring(0, dotIndex-2);

var suffix = src.substring(dotIndex);

src = prefix + &#39;-l&#39;+ suffix;

var largeImg = document.getElementById(&#39;largeImg&#39;);

largeImg.src = src;

largeImg.style.display=&#39;block&#39;;

}

document.querySelector(&#39;#mian&#39;).onmouseout =

function(){

//除去jing

var jing = document.getElementById(&#39;jing&#39;);

jing.style.display = &#39;none&#39;;

//除去大图显示区

document.getElementById(&#39;largeImgBox&#39;).style.display = &#39;none&#39;;

}

</script>

</body>

</html>

Nach dem Login kopieren


Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage