JS+CSS3实现带预览图幻灯片效果_学习笔记

首页免费课 JS+CSS3实现带预览图幻灯片效果笔记

JS+CSS3实现带预览图幻灯片效果

                
                Lyn
            Web前端工程师

                    查看讲师更多课程 
                    Lyn讲师的其他课程
                
JS+CSS3实现“粽情端午”
中级·39506
免费课程
                                
CSS3+JS 实现超炫的散列画廊特效
中级·46095
免费课程
                                
可调大小面板实现（Resizeable Panel）
初级·13050
免费课程
                                
QQ空间时光轴特效
初级·29070
免费课程
                                
鼠标拖拽效果
初级·25996
免费课程
                                
                难度初级
            
                时长 1小时33分
            
                学习人数
            
综合评分9.50
                            114人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

EElili 04:48

页面结构分析功能和行为分析 1、输出所有幻灯片内容 2、点击控制按钮切换当前的幻灯片 3、悬停在控制按钮上，展现预览图开发前需要做得事：分析案例适合场景，首页？还是子栏目分析案例开发方案

查看全部

1 采集收起来源：开发方法
2015-07-11
吃糖糖不哭

//6. 动态调整图片的 margin-top 以使其垂直居中 function movePictures(){ var picture = g('.picture'); for(i=0;i<pictures.length;i++){ pictures[i].style.marginTop = pictures[i]. clientHeight/2)+'px' } }

查看全部

1 采集收起来源：动态调整图片高度
2018-03-22
J_Dreamy 00:01

很好！

查看全部

1 采集收起来源：案例介绍
2015-06-10
慕圣9983511

垂直居中margin-top：-1*height/2，top：50%即可

查看全部

1 采集收起来源：动态调整图片高度
2018-08-26
Shane_Leo 03:43

倒影css样式

查看全部

1 采集收起来源：下面编写倒影
2018-08-18
请叫我幸运女神的女儿

适合单列布局，不适合左右分栏，突出大图效果

查看全部

1 采集收起来源：案例介绍
2018-07-10
z_l_z 05:02

HTML结构

查看全部

1 采集收起来源：开发方法
2018-05-09
淡水狗 02:08

css3倒影只支持webkit内核浏览器。火狐不支持

查看全部

1 采集收起来源：总结
2018-04-18
遇上兔跑的龟

<style> *{ padding:0;margin:0;} body{ padding:50px 0; background:#FFFFFF; font-size: 14px; font-family:Arial, Helvetica, sans-serif; color:#555; -webkit-font-smoothing:antialiased;/*字体抗锯齿*/} .slider .main .main-i, .slider, .slider .main{ width:100%; height:400px; position:relative; } /*幻灯片区域*/ .slider .main{ overflow:hidden;} /*每一个幻灯片样式*/ .slider .main .main-i{ } .slider .main .main-i img{ width:100%; position:absolute; left:0; top:0;z-index:1;} .slider .main .main-i .caption{ position:absolute; right:50%; left:30%; z-index:9;} .slider .main .main-i .caption h2{ font-size:40px; line-height:50px; text-align:right; color:#999999;} .slider .main .main-i .caption h3{ font:Verdana, Arial, Helvetica, sans-serif; font-size:50px; line-height:50px; color:#99FF33;text-align:right;} /*控制按钮区域*/ .slider .ctrl{width:100%; text-align:center; height:13px; line-height:13px; background-color:#FF0000; position:absolute; top:0; bottom:-13;} </style>

查看全部

1 采集收起来源：下面编写倒影
2018-03-22
遇上兔跑的龟

<div class="slider"> <div class="main"> <div class="main-i"> <div class="caption"> <h2>h2 caption</h2> <h3>h3 caption</h3> </div> <img src="幻灯片/img/03.jpg"> </div> </div> <div class="ctrl"> <a class="ctrl-i" href="jacascript:;"><img src="幻灯片/img/03.jpg"></a> </div> </div>

查看全部

1 采集收起来源：距离底部有点距离
2018-03-22
靑木知湫

-webkit-box-reflect:below 0px (倒影) -webkit-gradient( //遮照 linear, // 线性渐变 left top, // 从左上开始 left bottom, // 到左下结束 from( tarnsparent ), // 开始颜色透明 color-stop (50%, transparent), // 在50%的位置颜色也透明 to(rga()), 结束颜色 )

查看全部

1 采集收起来源：基本界面样式完成
2017-08-15
dog_195837

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px 0; background-color: #fff; font-size:14px ; font-family: 'Avenir Next' ; color: #555; -webkit-font-smoothing:antialiased; /*字体抗锯齿*/ } </style> </head> <body> </body> </html>

查看全部

1 采集收起来源：开发目录介绍
2018-03-22
qq__1939 00:16

<img src='{{index}}.jpg'/>

查看全部

1 采集收起来源：输出以及切换
2018-03-22
慕无忌0137151 02:40

图片倒影

查看全部

0 采集收起来源：下面编写倒影
2016-05-07
q_阳阳羊_0 02:16

案例总结

查看全部

0 采集收起来源：总结
2016-05-06