Skip to content

Commit 83eedde

Browse files
codeYokecodeYoke
committed
添加文档说明
1 parent e320e50 commit 83eedde

2 files changed

Lines changed: 289 additions & 0 deletions

File tree

‎五星好评/JavaScript实现商品评价五星好评.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
#### 一.效果展示
2+
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190818170216603.gif)
3+
#### 二.代码实现
4+
**1.html代码**
5+
6+
```html
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<meta charset="utf-8">
11+
<title>好评</title>
12+
<link rel="stylesheet" type="text/css" href="../js7/css/reset.css"/>
13+
<link rel="stylesheet" type="text/css" href="css/myTest3.css"/>
14+
<script type="text/javascript">
15+
window.onload = function(){
16+
ul = document.getElementById('star');
17+
lis = ul.getElementsByTagName('li');
18+
for (var i = 0; i < lis.length; i++) {
19+
lis[i].onclick = function(){
20+
//被用户点击后弹框并提示分数
21+
//获取当前对象的对象名
22+
var className = this.className;//nostart
23+
//重新定义class,并弹出评分
24+
ul.className = "nostar " + className;
25+
var score = this.getElementsByTagName('a')[0].title;
26+
console.log(score);
27+
alert('评分：' + score);
28+
}
29+
}
30+
}
31+
</script>
32+
</head>
33+
<body>
34+
<ul class="nostar " id="star">
35+
<li class="onestar"><a title="1分"></a></li>
36+
<li class="twostar"><a title="2分"></a></li>
37+
<li class="threestar"><a title="3分"></a></li>
38+
<li class="fourstar"><a title="4分"></a></li>
39+
<li class="fivestar"><a title="5分"></a></li>
40+
</ul>
41+
</body>
42+
</html>
43+
44+
```
45+
46+
**2.css代码**
47+
48+
```css
49+
body{
50+
padding: 200px 600px;
51+
}
52+
.nostar{
53+
width: 80px;
54+
height: 16px;
55+
background: url(../img/star-matrix.gif) no-repeat;
56+
position: relative;
57+
}
58+
59+
.nostar li {
60+
width: 16px;
61+
height: 16px;
62+
float: left;
63+
64+
}
65+
66+
.nostar li a{
67+
display: inline-block;
68+
width: 16px;
69+
height: 16px;
70+
position: absolute;
71+
/* text-indent: -999px; */
72+
/* 层级关系*/
73+
z-index: 10;
74+
}
75+
.nostar li a:hover{
76+
/* 将a的大小变化 width 80 */
77+
left: 0px;
78+
width: 80px;
79+
background: url(../img/star-matrix.gif) no-repeat;
80+
z-index: 5;
81+
}
82+
.onestar{background-position: 0 -16px;}
83+
.twostar{background-position: 0 -32px;}
84+
.threestar{background-position: 0 -48px;}
85+
.fourstar{background-position: 0 -64px;}
86+
.fivestar{background-position: 0 -80px;}
87+
88+
89+
.nostar li.onestar a:hover{ background-position: 0 -96px ;}
90+
.nostar li.twostar a:hover{ background-position: 0 -112px ;}
91+
.nostar li.threestar a:hover{ background-position: 0 -128px ;}
92+
.nostar li.fourstar a:hover{ background-position: 0 -144px ;}
93+
.nostar li.fivestar a:hover{ background-position: 0 -160px ;}
94+
```
95+
96+
---
97+
[3.代码下载](https://github.com/codeYoke/MyJavaScriptStudy/tree/master/%E4%BA%94%E6%98%9F%E5%A5%BD%E8%AF%84)

‎图片碰撞浏览器窗口碰撞反弹效果/JavaScript实现图片弹性碰撞反弹浏览窗口.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
#### 一：效果展示
2+
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190818162857999.gif)
3+
#### 二.代码实现
4+
**1.html代码：**
5+
```html
6+
<!DOCTYPE html>
7+
<html>
8+
<head>
9+
<meta charset="utf-8">
10+
<title>苍蝇</title>
11+
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
12+
<link rel="stylesheet" type="text/css" href="css/myTest2.css"/>
13+
<script src="js/myTest2.js" type="text/javascript" charset="utf-8"></script>
14+
</head>
15+
<body>
16+
<img src="img/timg.jpg" id="ad" />
17+
</body>
18+
</html>
19+
20+
```
21+
**2.css 样式文件**
22+
格式化样式（可选）
23+
```css
24+
/* http://meyerweb.com/eric/tools/css/reset/
25+
v2.0 | 20110126
26+
License: none (public domain)
27+
*/
28+
29+
html, body, div, span, applet, object, iframe,
30+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
31+
a, abbr, acronym, address, big, cite, code,
32+
del, dfn, em, img, ins, kbd, q, s, samp,
33+
small, strike, strong, sub, sup, tt, var,
34+
b, u, i, center,
35+
dl, dt, dd, ol, ul, li,
36+
fieldset, form, label, legend,
37+
table, caption, tbody, tfoot, thead, tr, th, td,
38+
article, aside, canvas, details, embed,
39+
figure, figcaption, footer, header, hgroup,
40+
menu, nav, output, ruby, section, summary,
41+
time, mark, audio, video {
42+
margin: 0;
43+
padding: 0;
44+
border: 0;
45+
font-size: 100%;
46+
font: inherit;
47+
vertical-align: baseline;
48+
}
49+
/* HTML5 display-role reset for older browsers */
50+
article, aside, details, figcaption, figure,
51+
footer, header, hgroup, menu, nav, section {
52+
display: block;
53+
}
54+
body {
55+
line-height: 1;
56+
}
57+
ol, ul {
58+
list-style: none;
59+
}
60+
blockquote, q {
61+
quotes: none;
62+
}
63+
blockquote:before, blockquote:after,
64+
q:before, q:after {
65+
content: '';
66+
content: none;
67+
}
68+
table {
69+
border-collapse: collapse;
70+
border-spacing: 0;
71+
}
72+
```
73+
基础样式
74+
```css
75+
img {
76+
position: absolute;
77+
width: 50px;
78+
height: 50px;
79+
top: 100px;
80+
}
81+
body {
82+
height: 1024px;
83+
width: 2024px;
84+
}
85+
```
86+
87+
**3.js代码**
88+
```javascript
89+
//如何获取滚动条的距离
90+
//如何移动元素的距离
91+
//如何移动元素自己的大小
92+
//如何可视窗体的宽度和高度
93+
94+
window.onload = function(){
95+
var time = null;//定时器
96+
ad = document.getElementById('ad');
97+
98+
99+
//定时器定时刷新
100+
if(time == null){
101+
time = window.setInterval(moveImg,50)
102+
}
103+
}
104+
105+
var moveX = 1;//1表示正向移动，-1表示反向移动
106+
var moveY = 1;//1表示正向移动，-1表示反向移动
107+
var size = 8;//用户定义的每次刷新移动的像素大小
108+
function moveImg(){
109+
//每次调用在原来的top值加像素
110+
var top = MyToll.elementXY(ad).y;
111+
if(moveY == 1){
112+
top = top + size;
113+
}
114+
if(moveY == -1){
115+
top = top - size;
116+
}
117+
118+
//边界值碰撞计算
119+
if(top >(MyToll.clientWH().y + MyToll.scrollXY().y -MyToll.elementWH(ad).y)){
120+
moveY = -1;
121+
}
122+
//其实在等于滚动条的值就触发
123+
if(top <= MyToll.scrollXY().y){
124+
moveY = 1 ;
125+
}
126+
127+
var left = MyToll.elementXY(ad).x;
128+
if(moveX == 1){
129+
left = left + size;
130+
}
131+
if(moveX == -1){
132+
left = left - size;
133+
}
134+
135+
if(left > (MyToll.clientWH().x + MyToll.scrollXY().x - MyToll.elementWH(ad).x)){
136+
//做减法
137+
moveX = -1;
138+
}
139+
140+
if(left <= MyToll.scrollXY().x ){
141+
moveX = 1;
142+
}
143+
144+
ad.style.top = top + 'px';
145+
ad.style.left = left + 'px';
146+
console.log(top +":"+MyToll.clientWH().y+":"+MyToll.scrollXY().y+":"+MyToll.elementWH(ad).y)
147+
console.log(left + ":" + (MyToll.clientWH().x + MyToll.scrollXY().x - MyToll.elementWH(ad).x))
148+
}
149+
150+
/**
151+
* @param {Object} x 可表示left和width的值
152+
* @param {Object} y 可表示top和height的值
153+
*/
154+
function Result(x,y){
155+
this.x = x;
156+
this.y = y;
157+
}
158+
159+
160+
var MyToll = {
161+
//滚动条的xy距离(left top)
162+
scrollXY : function(){
163+
var left = document.documentElement.scrollLeft;
164+
var top = document.documentElement.scrollTop;
165+
return new Result(left,top);
166+
},
167+
168+
//元素移动的距离(left top)
169+
elementXY : function(obj){
170+
var left = obj.style.left ? obj.style.left : document.defaultView.getComputedStyle(obj,null).left;
171+
var top = obj.style.top ? obj.style.top : document.defaultView.getComputedStyle(obj,null).top
172+
//由于带有像素值，将其转换为整形
173+
return new Result(parseInt(left),parseInt(top));
174+
},
175+
176+
//可视窗体的高度和宽度
177+
clientWH : function(){
178+
var clientW = document.documentElement.clientWidth;
179+
var clientH = document.documentElement.clientHeight;
180+
return new Result(clientW,clientH);
181+
},
182+
183+
//元素本身的大小
184+
elementWH : function(obj){
185+
var imgW = obj.offsetWidth;
186+
var imgH = obj.offsetHeight;
187+
return new Result(imgW,imgH);
188+
}
189+
190+
}
191+
```
192+

0 commit comments

Comments
 (0)