百度案例
发表于|更新于
|阅读量:
侧边栏
还是fixed定位，放几个li，在li中使用精灵图
精灵图中主要使用background-position-x,y来对齐位置
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
position: fixed;
left: 50%;
margin-left: 502px;
bottom: 20px;
list-style: none;
}
li {
width: 48px;
height: 48px;
background-image: url(../img/baidu.png);
margin-bottom: 3px;
}
.report {
background-image: url(../img/roumer_033b02b.png);
background-size: 100% 100%;
height: 92px;
}
.favorited {
background-position-y: -51px;
}
.search {
background-position-y: -204px;
}
.feedback {
background-position-y: -255px;
}
li:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<ul>
<li class="report"></li>
<li class="qr-code"></li>
<li class="favorited"></li>
<li class="search"></li>
<li class="feedback"></li>
</ul>
</body>
</html>
|
侧边栏中的动画效果
- 通过在每个div里用a来覆盖
- 然后用
transform:totateZ(90deg)进行旋转到一边，使用transform-origin来确定旋转的圆心
- 在每个div里的用hover，点击到div时，旋转到原位
transform:totateZ(0deg)
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
position: fixed;
left: 50%;
margin-left: 502px;
bottom: 20px;
list-style: none;
}
li {
width: 48px;
height: 48px;
background-image: url(../img/baidu.png);
margin-bottom: 3px;
position: relative;
border-radius: 3px;
overflow: hidden;
}
.report {
background-image: url(../img/roumer_033b02b.png);
background-size: 100% 100%;
height: 92px;
}
.favorited {
background-position-y: -51px;
}
.search {
background-position-y: -204px;
}
.feedback {
background-position-y: -255px;
}
li:last-child {
margin-bottom: 0;
}
a {
position: absolute;
width: 100%;
height: 100%;
line-height: 48px;
font-size: 12px;
font-weight: 700;
color: #fff;
text-decoration: none;
background-color: #18448e;
text-align: center;
border-radius: 3px;
transform-origin: -50% 50%;
transform: rotateZ(90deg);
transition: transform .3s;
}
.report a {
height: 92px;
line-height: 92px;
transform-origin: -100% 50%;
}
li:hover a {
transform: rotateZ(0deg);
}
</style>
</head>
<body>
<ul>
<li class="report">
<a href="#">举报</a>
</li>
<li class="qr-code">
<a href="#">二维码</a>
</li>
<li class="favorited">
<a href="#">收藏本站</a>
</li>
<li class="search">
<a href="#">搜索</a>
</li>
<li class="feedback">
<a href="#">用户反馈</a>
</li>
</ul>
</body>
</html>
|
回到顶部
- fiexd定位到右下角
- 使用js获取元素，获取滚动条高度
- 大于某个高度，使滚动条高度为0
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mydiv{
width: 80px;
height: 80px;
border: 2px solid #0000ff;
border-radius: 50px;
text-align: center;
line-height: 80px;
position: fixed;
right:10px;
bottom: 10px;
display: none;
}
.text:nth-child(even) {
height: 100px;
background-color: #008b8b;
}
.text:nth-child(odd) {
height: 70px;
background-color: #5277a2;
}
</style>
</head>
<body>
<div id="mydiv">返回顶部</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
<div class="text">123</div>
</body>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.onclick = function() {
document.documentElement.scrollTop = 0;
}
window.onscroll = function() {
if (document.documentElement.scrollTop > 300)
mydiv.style.display = "block";
}
</script>
</html>
|
内容搜索
- 使用js获取input里的值，p标签里的值
- 使用
innerHTML.replace替换p标签里的值，相当于var newV = "<span style='background:yellow'>"+ v + "</span>"
- 匹配所有的，用正则表达式
var reg = new RegExp(v,'g')，g是全局的意思
- 然后，再下一次使用前，把上次的清空
myp.innerHTML = myp.innerText;
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="myinput"/>
<button id="mybtn">查找</button>
<p id="myp">
欧盟与中国围绕电动车的争议再掀波澜。欧盟去年10月启动了对中国进口电动车的反补贴调查，双方立场一直僵持不下。
中国驻欧盟大使傅聪日前接受彭博社访问时，批评欧盟对中国电动车的反补贴调查“不公平”。他也含蓄警告，欧盟也“有很多东西可以被调查”。
究竟是什么促使欧盟采取这一措施？中国电动车进军欧洲市场对当地汽车产业意味着什么？《联合早报》带你快速了解中国电动车在欧洲市场的成功与挑战。
</p>
</body>
<script>
var myinput = document.getElementById("myinput")
var mybtn = document.getElementById("mybtn")
var myp = document.getElementById("myp")
mybtn.onclick = function() {
var v = myinput.value;
myp.innerHTML = myp.innerText;
if (v) {
var reg = new RegExp(v,'g')
var newV = "<span style='background:yellow'>"+ v + "</span>"
myp.innerHTML = myp.innerHTML.replace(reg,newV)
}
}
</script>
</html>
|
