Skip to content

Commit bbd2342

Browse files
codeYokecodeYoke
committed
代码第一次上传
1 parent 5298bd0 commit bbd2342

7 files changed

Lines changed: 367 additions & 0 deletions

File tree

‎商品图片的动态放大/JavaScript实现商品图片随鼠标动态全图放大.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
### 一.实现效果展示：
2+
3+
---
4+
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190801214350601.gif)
5+
### 二.代码实现
6+
7+
---
8+
**1.html部分：**
9+
10+
- 使用两张图片，一张是放大图，一张原图。
11+
- w h 属性是为了在js可以直接获取，其实就是一个用户指定大图的宽高值
12+
13+
```html
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<meta charset="utf-8">
18+
<title>商品广告放大显示</title>
19+
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
20+
<link rel="stylesheet" type="text/css" href="css/myTest2.css"/>
21+
<script src="js/myTest2.js" type="text/javascript" charset="utf-8"></script>
22+
</head>
23+
<body>
24+
<p id="ad">
25+
<a href="img/apple_1_bigger.jpg" h="330" w="400" title="高颜值MP3音乐播放器">
26+
<img src="img/apple_1.jpg" >
27+
</a>
28+
</p>
29+
</body>
30+
</html>
31+
32+
```
33+
**2.css部分：**
34+
35+
- 大图样式预先设置好，当鼠标进入时，将div （bigImg）加进去
36+
- 宽高先设置为0，在js里动态增加，实现动态变化
37+
38+
```css
39+
body{
40+
padding: 200px;
41+
}
42+
#ad img{
43+
border: 1px solid gray;
44+
}
45+
.bigImg{
46+
width: 0px; /* 400*/
47+
height: 0px;/* 330 */
48+
background-color: #000000;
49+
padding: 10px;
50+
position: absolute;
51+
overflow: hidden;
52+
}
53+
.bigImg p {
54+
font-size: 18px;
55+
line-height: 28px;
56+
color: #FFFF00;
57+
}
58+
```
59+
**3.js部分：**
60+
61+
- 获取鼠标的偏移量，如果不设置就会出现onmouseover 和onmouseout 两个监听来回切换出现卡顿
62+
- 鼠标移入事件之前，清除定时器也是必要的，当它宽高为达到最大值时，鼠标就移开，再次移入，上次的定时器未得到清除，出现只产生部分图片。
63+
64+
```javascript
65+
var img = null;
66+
var time = null;
67+
window.onload = function() {
68+
img = document.getElementById('ad').getElementsByTagName('img')[0];
69+
console.log(img);
70+
img.onmouseover = function(event) {
71+
console.log('mouseIn');
72+
//鼠标移入
73+
//移入后就创建节点将放大图片显示页面上
74+
var div = document.createElement('div');
75+
div.id = 'bigImg';
76+
div.className = 'bigImg'
77+
//创建img标签
78+
var img = document.createElement('img');
79+
img.src = this.parentNode.href;
80+
//将img放入到div中
81+
div.appendChild(img);
82+
// console.log(div)
83+
//创建p标签，并将新产生的div放到body元素中
84+
var p = document.createElement('p');
85+
p.innerHTML = this.parentNode.title;
86+
console.log(this.parentNode.title) //将标题取到并放到新的p节点
87+
88+
div.appendChild(p);
89+
//将div节点放入body元素中并显示出来
90+
document.body.appendChild(div);
91+
92+
//启动定时器通过改变元素div的高宽实现动态放大
93+
94+
//获取预先定义好的h w 将其设为最终的高宽
95+
var w = this.parentNode.getAttribute('w');
96+
var h = this.parentNode.getAttribute('h');
97+
console.log(w + ':' + h);
98+
if (null != time) {
99+
console.log('Cleartime');
100+
clearInterval(time);
101+
time = null;
102+
}
103+
if (time == null) {
104+
time = window.setInterval(function() {
105+
106+
/* console.log(div) */
107+
//获取弹出框div的高和宽
108+
var width = div.style.width ? div.style.width : document.defaultView.getComputedStyle(div, null).width;
109+
var height = div.style.height ? div.style.height : document.defaultView.getComputedStyle(div, null).height;
110+
console.log(width + ':' + height);
111+
width = parseInt(width) + 5;
112+
height = parseInt(height) + 5;
113+
114+
115+
if (height > h) {
116+
height = h;
117+
}
118+
if (width > w) {
119+
width = w;
120+
}
121+
122+
div.style.width = width + 'px';
123+
div.style.height = height + 'px';
124+
125+
if (width == w && height == h) {
126+
if (null != time) {
127+
console.log('Cleartime');
128+
clearInterval(time);
129+
time = null;
130+
}
131+
132+
}
133+
}, 10)
134+
135+
}
136+
//获取鼠标的坐标值,确保鼠标进入区域就开始
137+
var evt = event ? event : window.event;
138+
var x = evt.pageX + 5;
139+
var y = evt.pageY + 5;
140+
console.log("鼠标的位置" + x + ':' + y);
141+
142+
div.style.top = y + 'px';
143+
div.style.left = x + 'px';
144+
145+
146+
}
147+
//鼠标移开
148+
img.onmouseout = function(event) {
149+
console.log('onmouseOut')
150+
//删除创建的div
151+
var div = document.getElementById('bigImg');
152+
div.remove()
153+
}
154+
155+
156+
157+
//鼠标移动
158+
img.onmousemove = function(event) {
159+
console.log('moveIn')
160+
//记录鼠标的当前位置
161+
//获取鼠标的坐标值
162+
var div = document.getElementById('bigImg');
163+
var evt = event ? event : window.event;
164+
var x = evt.pageX + 5;
165+
var y = evt.pageY + 5;
166+
console.log("鼠标的位置" + x + ':' + y);
167+
div.style.top = y + 'px';
168+
div.style.left = x + 'px';
169+
}
170+
171+
}
172+
173+
```
174+

‎商品图片的动态放大/css/myTest2.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body{
2+
padding: 150px 400px;
3+
}
4+
#ad img{
5+
border: 1px solid gray;
6+
}
7+
.bigImg{
8+
width: 0px; /* 在js里动态设置 w = 400*/
9+
height: 0px;/* h = 320 */
10+
padding: 10px;
11+
background-color:gray;
12+
position: absolute;
13+
overflow: hidden;
14+
}
15+
.bigImg p {
16+
font-size: 16px;
17+
height: 28px;
18+
line-height: 28px;
19+
color: white;
20+
}

‎商品图片的动态放大/css/reset.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}

‎商品图片的动态放大/img/apple_1.jpg‎

2.05 KB
Loading

‎商品图片的动态放大/img/apple_1_bigger.jpg‎

12.2 KB
Loading

‎商品图片的动态放大/js/myTest2.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
var img = null;
2+
var time = null;
3+
window.onload = function() {
4+
img = document.getElementById('ad').getElementsByTagName('img')[0];
5+
console.log(img);
6+
img.onmouseover = function(event) {
7+
console.log('mouseIn');
8+
//鼠标移入
9+
//移入后就创建节点将放大图片显示页面上
10+
var div = document.createElement('div');
11+
div.id = 'bigImg';
12+
div.className = 'bigImg'
13+
//创建img标签
14+
var img = document.createElement('img');
15+
img.src = this.parentNode.href;
16+
//将img放入到div中
17+
div.appendChild(img);
18+
// console.log(div)
19+
//创建p标签，并将新产生的div放到body元素中
20+
var p = document.createElement('p');
21+
p.innerHTML = this.parentNode.title;
22+
console.log(this.parentNode.title) //将标题取到并放到新的p节点
23+
24+
div.appendChild(p);
25+
//将div节点放入body元素中并显示出来
26+
document.body.appendChild(div);
27+
28+
//启动定时器通过改变元素div的高宽实现动态放大
29+
30+
//获取预先定义好的h w 将其设为最终的高宽
31+
var w = this.parentNode.getAttribute('w');
32+
var h = this.parentNode.getAttribute('h');
33+
console.log(w + ':' + h);
34+
if (null != time) {
35+
console.log('Cleartime1');
36+
clearInterval(time);
37+
time = null;
38+
}
39+
if (time == null) {
40+
time = window.setInterval(function() {
41+
42+
/* console.log(div) */
43+
//获取弹出框div的高和宽
44+
var width = div.style.width ? div.style.width : document.defaultView.getComputedStyle(div, null).width;
45+
var height = div.style.height ? div.style.height : document.defaultView.getComputedStyle(div, null).height;
46+
console.log(width + ':' + height);
47+
width = parseInt(width) + 5;
48+
height = parseInt(height) + 5;
49+
50+
51+
if (height > h) {
52+
height = h;
53+
}
54+
if (width > w) {
55+
width = w;
56+
}
57+
58+
div.style.width = width + 'px';
59+
div.style.height = height + 'px';
60+
61+
if (width == w && height == h) {
62+
if (null != time) {
63+
console.log('Cleartime1');
64+
clearInterval(time);
65+
time = null;
66+
}
67+
68+
}
69+
70+
}, 10)
71+
72+
}
73+
//获取鼠标的坐标值,确保鼠标进入区域就开始
74+
var evt = event ? event : window.event;
75+
var x = evt.pageX + 5;
76+
var y = evt.pageY + 5;
77+
console.log("鼠标的位置" + x + ':' + y);
78+
79+
div.style.top = y + 'px';
80+
div.style.left = x + 'px';
81+
82+
83+
}
84+
//鼠标移开
85+
img.onmouseout = function(event) {
86+
console.log('onmouseOut')
87+
//删除创建的div
88+
var div = document.getElementById('bigImg');
89+
div.remove()
90+
}
91+
92+
93+
94+
//鼠标移动
95+
img.onmousemove = function(event) {
96+
console.log('moveIn')
97+
//记录鼠标的当前位置
98+
//获取鼠标的坐标值
99+
var div = document.getElementById('bigImg');
100+
var evt = event ? event : window.event;
101+
var x = evt.pageX + 5;
102+
var y = evt.pageY + 5;
103+
console.log("鼠标的位置" + x + ':' + y);
104+
div.style.top = y + 'px';
105+
div.style.left = x + 'px';
106+
}
107+
108+
}

‎商品图片的动态放大/myTest2.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>商品广告放大显示</title>
6+
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
7+
<link rel="stylesheet" type="text/css" href="css/myTest2.css"/>
8+
<script src="js/myTest2.js" type="text/javascript" charset="utf-8"></script>
9+
</head>
10+
<body>
11+
<p id="ad">
12+
<a href="img/apple_1_bigger.jpg" h="330" w="400" title="高颜值MP3音乐播放器">
13+
<img src="img/apple_1.jpg" >
14+
</a>
15+
</p>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)