├── 3d旋转视频展示区.html ├── 3d特效菜单展示.html ├── README.md ├── images ├── img.jpg └── img1.jpg ├── img ├── img1.jpg ├── img2.jpg ├── img3.jpg ├── img4.jpg ├── img5.jpg ├── img6.jpg └── img7.jpg ├── javascript图片弹窗.html ├── javascript鼠标悬停显示子菜单的大型分类菜单.html ├── 图片预加载.html ├── 小米官网banner ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── icon-slides.png └── index.html ├── 瀑布流.html └── 点击切换的tab标签.html /3d旋转视频展示区.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Document 7 | 142 | 143 | 144 |
145 |

CSS3 3D变形制作视频展示区

146 |
147 |
148 | 149 | 150 | 澳门风云闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴. 151 | 152 |
153 |
154 | 155 |
156 |
157 | 158 | 159 | 改过迁善该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔，为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。 160 | 161 |
162 |
163 | 164 |
165 |
166 | 167 | 168 | 父子刑警本剧改编自雫井修介小说《Bitter Blood》。剧中，新晋刑警•佐原夏辉（佐藤健饰）被分配到银座警察 169 | 170 |
171 |
172 | 173 |
174 |
175 | 176 | 177 | 果宝特攻3果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界 178 | 179 |
180 |
181 |
182 |
183 | 184 | 185 | 红眼1988年7月16日，从汉城始发的列车发生了一起严重的交通事故，造成100多人死亡。 186 | 187 |
188 |
189 |
190 |
191 | 192 | 193 | 熊出没之夺宝熊兵一场漆黑雨夜的意外事故，一段笑料十足的误打误撞，将两个外表相似却内容各异的箱子调换。 194 | 195 |
196 |
197 |
198 | 199 | -------------------------------------------------------------------------------- /3d特效菜单展示.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/3d特效菜单展示.html -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Common-web-effects 2 | 前端开发中常用的网页特效 3 | 4 | 5 | ## 1、前言 ## 6 | 7 | 很久没有发布文章啦，终于今天有点时间，就在下班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到[GitHub][1]上，欢迎大家star； 8 | 9 | ## 2、JS实现特效的概念 ## 10 | 11 | JS实现网页特效，其实通俗的说就是通过JS动态地控制css样式，以达到实现动画的效果； 12 | （很多动画特效都可以由css3实现，个人推荐是能用css3就用css3；这里用Js的目的我前面也说了，是为了学习JS基础以及学习如何通过js控制各种节点）。 13 | 14 | ## 3、案例1--选项卡 ## 15 | 16 | ![选项卡](https://segmentfault.com/img/bVUAgE) 17 | 18 | ### 3.1、案例分析 ### 19 | 20 | 1. 首先，实现了最基本的功能：点击不同的按钮切换显示不同的内容； 21 | 2. 其次，加了定时器，用的是setInterval，当然用setTimeout也是可以的； 22 | 3. 最后，给body绑定了onmouseover和onmouseout事件,鼠标移入清除定时器，移出又添加定时器。 23 | 24 | ### 3.2案例实现过程 ### 25 | 26 | #### 3.2.1编写网页的内容和样式 #### 27 | 28 | 1. HTML 29 | 30 | ``` 31 | 32 | 33 | 34 | 点击切换选项卡代码 35 | 36 | 37 |
38 |
39 | 45 |
46 |
47 |
我的网站
48 | 49 | 50 | 51 |
52 |
53 |
54 | 55 | 56 | ``` 57 | 58 | 2. CSS 59 | 60 | ``` 61 | * { 62 | margin: 0; 63 | padding: 0; 64 | list-style-type: none; 65 | } 66 | a, img { 67 | border: 0; 68 | } 69 | body { 70 | font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; 71 | } 72 | .tab1 { 73 | width: 401px; 74 | border-top: #cccccc solid 1px; 75 | border-bottom: #cccccc solid 1px; 76 | margin: 50px auto 0 auto; 77 | } 78 | .menu { 79 | height: 28px; 80 | border-right: #cccccc solid 1px; 81 | } 82 | .menu li { 83 | float: left; 84 | width: 99px; 85 | text-align: center; 86 | line-height: 28px; 87 | height: 28px; 88 | cursor: pointer; 89 | border-left: #cccccc solid 1px; 90 | color: #666; 91 | font-size: 14px; 92 | overflow: hidden; 93 | background: #E0E2EB; 94 | } 95 | .menu li.off { 96 | background: #FFFFFF; 97 | color: #336699; 98 | font-weight: bold; 99 | } 100 | .menudiv { 101 | height: 200px; 102 | border-left: #ccc solid 1px; 103 | border-right: #ccc solid 1px; 104 | border-top: 0; 105 | background: #fefefe 106 | } 107 | .menudiv div { 108 | padding: 15px; 109 | line-height: 28px; 110 | } 111 | ``` 112 | 113 | > 因为都是很基础的，我就主要讲解一下JS部分，后面的案例也一样，请理解。 114 | 115 | #### 3.2.2实现特效 #### 116 | 117 | ``` 118 | var name_0='one'; 119 | var cursel_0=1; 120 | var ScrollTime=3000;//循环周期（毫秒） 121 | var links_len,iIntervalId; 122 | window.onload=function(){ 123 | var links = document.getElementById("tab1").getElementsByTagName('li') 124 | links_len=links.length; 125 | for(var i=0; ilinks_len)cursel_0=1 160 | setTab(name_0,cursel_0); 161 | } 162 | ``` 163 | 164 | > **注意**：onload 事件会在页面或图像加载完成后立即发生，类似与jQuery中的ready事件，推荐都加上，或者也可以使用立即执行函数，这就看个人喜欢；变量最好是在最开始的时候就声明，因为使用var声明的变量会发生“声明提前”，即使你在变量声明之前调用也不会报错；但是在es6中的let就很好的纠正了这一现象，所以我建议大家要养成一个好的习惯，先声明，在调用； 165 | 166 | 167 | ## 4、案例2--图片弹窗 ## 168 | 169 | 170 | 171 | ![图片弹窗](https://segmentfault.com/img/bVUAH0) 172 | 173 | 174 | 175 | ### 4.1、案例分析 ### 176 | 177 | 1. 一个图片弹窗特效，点击图片会显示大图，并且可以读取图片的alt信息显示出来；点击关闭按钮会关闭弹窗。 178 | 179 | ### 4.2、案例实现过程 ### 180 | 181 | #### 4.2.1编写网页的内容和样式 #### 182 | 183 | 1. HTML 184 | 185 | ``` 186 | 187 | 188 | 189 | 190 | javascript图片弹窗 191 | 192 | 193 | 194 | 文本描述信息 195 | 196 | 204 | 205 | 206 | ``` 207 | 208 | 2. CSS 209 | 210 | ``` 211 | /* 触发弹窗图片的样式*/ 212 | #myImg{ 213 | border-radius: 5px; 214 | cursor:pointer; 215 | transition:0.3s; 216 | } 217 | #myImg:hover{opacity:0.7;} 218 | /* 弹窗背景*/ 219 | .modal{ 220 | display:none; /*Hidden by default*/ 221 | position: fixed;/* Sit in place*/ 222 | z-index: 1;/* Sit on top*/ 223 | padding-top:100px;/* Location of the box*/ 224 | left:0; 225 | top: 0; 226 | width:100%;/* Full width*/ 227 | height: 100%;/* Full width*/ 228 | overflow: auto; 229 | background-color: rgba(0,0,0,0.9);/* Black w/ opactity*/ 230 | } 231 | /* 图片*/ 232 | .modal-content{ 233 | margin: auto; 234 | display: block; 235 | width:80%; 236 | max-width: 700px; 237 | } 238 | /* 文本内容*/ 239 | #caption{ 240 | margin: auto; 241 | display: block; 242 | width:80%; 243 | max-width: 700px; 244 | text-align:center; 245 | color:#ccc; 246 | padding:10px 0; 247 | height: 150px; 248 | } 249 | /* 添加动画*/ 250 | .modal-content, #caption { 251 | -webkit-animation-name: zoom; /*定义一个或多个动画名称*/ 252 | -webkit-animation-duration: 0.6s; /*指定对象动画的持续时间*/ 253 | animation-name: zoom; 254 | animation-duration: 0.6s; 255 | } 256 | 257 | @-webkit-keyframes zoom { 258 | from {-webkit-transform:scale(0)} /*transform属性向元素应用2D或3D转换，scale是元素缩放*/ 259 | to {-webkit-transform:scale(1)} 260 | } 261 | 262 | @keyframes zoom { 263 | from {transform:scale(0)} 264 | to {transform:scale(1)} 265 | } 266 | 267 | /* 关闭按钮 */ 268 | .close { 269 | position: absolute; 270 | top: 15px; 271 | right: 35px; 272 | color: #f1f1f1; 273 | font-size: 40px; 274 | font-weight: bold; 275 | transition: 0.3s; 276 | } 277 | 278 | .close:hover,.close:focus { 279 | color: #bbb; 280 | text-decoration: none; 281 | cursor: pointer; 282 | } 283 | 284 | /* 小屏幕中图片宽度为 100% */ 285 | @media only screen and (max-width: 700px){ 286 | .modal-content { 287 | width: 100%; 288 | } 289 | } 290 | ``` 291 | 292 | > 简单讲解一下CSS代码，部分注解我写在了注释中；那在这里就重点说一下css3中的动画，可以使用@keyframes规则创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成；然后使用animation添加动画。记得要注意兼容性，在webkit内核的浏览器中要加前缀。 293 | 294 | 3. JS 295 | 296 | ``` 297 | // 获取弹窗 298 | var modal = document.getElementById('myModal'); 299 | 300 | // 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容 301 | var img = document.getElementById('myImg'); 302 | var modalImg = document.getElementById("img01"); 303 | var captionText = document.getElementById("caption"); 304 | img.onclick = function(){ 305 | modal.style.display = "block"; 306 | modalImg.src = this.src; 307 | captionText.innerHTML = this.alt; 308 | } 309 | 310 | // 获取 元素，设置关闭按钮 311 | var span = document.getElementsByClassName("close")[0]; 312 | 313 | // 当点击 (x), 关闭弹窗 314 | span.onclick = function() { 315 | modal.style.display = "none"; 316 | } 317 | ``` 318 | 319 | > 这个特效使用到的js就比较简单，给图片和关闭按钮绑定click事件就可以了。 320 | 321 | ## 5、案例3--瀑布流 ## 322 | 323 | 324 | ![瀑布流布局](https://segmentfault.com/img/bVUAN1) 325 | 326 | ### 5.1、案例分析 ### 327 | 328 | 1. 瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应； 329 | 2. 使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局； 330 | 3. 使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版； 331 | 4. 使用window.onscroll，当滚动滚轮时，判断是否显示到最后一张图片，在这之前会从模拟的数据中读取图片地址，再添加到页面里，使得页面可以一直滚动下去，模拟了百度图片的效果； 332 | 5. 在css中加入了过渡，使得图片位置变化的时候有过渡效果； 333 | 334 | > 本特效的网页内容和样式都很简单就不写在这了，主要讲解一下js代码，下面上代码 335 | 336 | ``` 337 | window.onload = function(){ //判断页面内容与样式是否加载完毕 338 | imglocation("container","box"); 339 | var imgData = {"data":[{"src":"img2.jpg"},{"src":"img3.jpg"},{"src":"img4.jpg"},{"src":"img5.jpg"},{"src":"img6.jpg"}]};//模拟的图片地址 340 | 341 | window.onscroll = function(){//监听滚轮事件 342 | if(checkFlag()){//checkFlag()是判断是否快要显示最后一张图，如果是返回true，否则返回false 343 | for(var i = 0;i 完整代码请到[GitHub][2]上观看，欢迎star 393 | 394 | ## 总结 ## 395 | 396 | 虽然我这里写的是js实现特效，但是如果能用css实现，那么最后是用css，这就看哪种方法方便了，择优嘛；好啦，今天就写这三个案例吧，希望大家看完这三个案例，能够有些想法，最后是要动手写写，光看是没有用的。 397 | 最后，谢谢各位的观看，想看源代码的可以去我的[GitHub][3]上，欢迎star或者添加更多的js特效；如果有哪里写的不好也请指出来，我会马上去改正；如果感到对你有用欢迎收藏点赞！谢谢！ 398 | 399 | 400 | [1]: https://github.com/HEternally/Common-web-effects 401 | [2]: https://github.com/HEternally/Common-web-effects 402 | [3]: https://github.com/HEternally/Common-web-effects 403 | -------------------------------------------------------------------------------- /images/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/images/img.jpg -------------------------------------------------------------------------------- /images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/images/img1.jpg -------------------------------------------------------------------------------- /img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img1.jpg -------------------------------------------------------------------------------- /img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img2.jpg -------------------------------------------------------------------------------- /img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img3.jpg -------------------------------------------------------------------------------- /img/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img4.jpg -------------------------------------------------------------------------------- /img/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img5.jpg -------------------------------------------------------------------------------- /img/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img6.jpg -------------------------------------------------------------------------------- /img/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/img/img7.jpg -------------------------------------------------------------------------------- /javascript图片弹窗.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | javascript图片弹窗 6 | 88 | 89 | 90 | 91 | 文本描述信息 92 | 93 | 101 | 123 | 124 | -------------------------------------------------------------------------------- /javascript鼠标悬停显示子菜单的大型分类菜单.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | js仿新浪游戏频道导航条 5 | 43 | 97 | 98 | 99 |
100 |
101 | 696 |
697 |
698 |
699 |
700 | 701 | -------------------------------------------------------------------------------- /图片预加载.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 图片预加载之无序加载 6 | 16 | 17 | 18 | 19 |
20 | pic 21 |
22 | 上一页 23 | 下一页 24 |
25 |
26 |
27 |

0%

28 |
29 | 73 | 74 | -------------------------------------------------------------------------------- /小米官网banner/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/1.jpg -------------------------------------------------------------------------------- /小米官网banner/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/2.jpg -------------------------------------------------------------------------------- /小米官网banner/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/3.jpg -------------------------------------------------------------------------------- /小米官网banner/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/4.jpg -------------------------------------------------------------------------------- /小米官网banner/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/5.jpg -------------------------------------------------------------------------------- /小米官网banner/images/icon-slides.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HEternally/Common-web-effects/e06ee757af437dec273bc77d6eba566df130eade/小米官网banner/images/icon-slides.png -------------------------------------------------------------------------------- /小米官网banner/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 小米官网banner 8 | 74 | 75 | 76 |
77 | 82 | 83 | 88 | 89 | 94 | 95 | 100 | 101 | 106 | 107 |
108 | 109 | 110 | 111 | 112 | 113 |
114 | 115 | 118 | 119 |
120 | 131 | 213 | 214 | -------------------------------------------------------------------------------- /瀑布流.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 瀑布流 6 | 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 | 220 | 221 | -------------------------------------------------------------------------------- /点击切换的tab标签.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 点击切换选项卡代码 5 | 57 | 103 | 104 | 105 |
106 |
107 |
    108 |
  • 首页
    • 109 |
  • 点击看看
    • 110 |
  • 会自动的
    • 111 |
  • 我的网站
    • 112 |
113 |
114 |
115 |
我的网站
116 | 117 | 118 | 119 |
120 |
121 |
122 | 123 | --------------------------------------------------------------------------------