-
dddd查看全部
-
code1查看全部
-
分享下源码嘛查看全部
-
2-1代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } /*主体部分*/ #content { width : 60%; height : 60%; top : 20%; left : 20%; overflow : hidden; position : absolute; border : 1px solid #ccc; } .content-wrap { position: relative; } .content-wrap > li { width: 100%; height: 100%; background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } </style> </head> <body> <div id='content'> <ul class='content-wrap'> <!-- 第一副画面 --> <li> 页面1 </li> <!-- 第二副画面 --> <li> 页面2 </li> <!-- 第三副画面 --> <li> 页面3 </li> </ul> </div> <script type="text/javascript"> var container = $("#content"); // 获取第一个子节点 var element = container.find(":first"); // li页面数量 var slides = element.find("li"); // 获取容器尺寸 var width = container.width(); var height = container.height(); // 设置li页面总宽度 element.css({ width : (slides.length * width) + 'px', height : height + 'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide = slides.eq(index); //获取到每一个li元素 // slide.css({ width : width + 'px', height : height + 'px' }); }); </script> </body> </html>查看全部 -
2-1代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } /*主体部分*/ #content { width : 60%; height : 60%; top : 20%; left : 20%; overflow : hidden; position : absolute; border : 1px solid #ccc; } .content-wrap { position: relative; } .content-wrap > li { width: 100%; height: 100%; background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } </style> </head> <body> <div id='content'> <ul class='content-wrap'> <!-- 第一副画面 --> <li> 页面1 </li> <!-- 第二副画面 --> <li> 页面2 </li> <!-- 第三副画面 --> <li> 页面3 </li> </ul> </div> <script type="text/javascript"> var container = $("#content"); // 获取第一个子节点 var element = container.find(":first"); // li页面数量 var slides = element.find("li"); // 获取容器尺寸 var width = container.width(); var height = container.height(); // 设置li页面总宽度 element.css({ width : (slides.length * width) + 'px', height : height + 'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide = slides.eq(index); //获取到每一个li元素 // slide.css({ width : width + 'px', height : height + 'px' }); }); </script> </body> </html>查看全部 -
列表项无法设置高度
dom.find用法
查看全部 -
整体—>细节
查看全部 -
imooc.com
查看全部 -
第一幅画面中：天上太阳的移动、云的来回飘移、小男孩沿着中间道路一直在走，页面也在滚动。
第二幅动画中：小男孩移动进了商店前的位置，商店的门开始打开，商店的灯光开始变暗。小男孩抱着一束花出来，商店关门。
第三幅页面中：星星变暗变亮的效果，桥下的水波在流动，小男孩上桥的动作。小男孩走到女孩子的面前，这是等待一下，他们一起转身后牵手，同时慕课网的logo会出现，天上的樱花正在飘下来。
查看全部 -
如何实现动画？
用不同的手动实现动画有何优劣？
应该注意哪些问题？
动画与动画之间产生的异步
怎样梳理代码的流程
查看全部 -
list-style:指定所有列表的属性
-type是指每一行，项标记的类型，表头前面的符号
-position是项标记放置的位置，在表的内外
-image用图像替换项标记
查看全部 -
男孩走动+页面背景图片滚动 => 男孩走动
页面整体布局: 横向的+3个主题页面+页面之前是无缝拼接的+页面要滚动
布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面
这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点
查看全部 -
transform
translate3d(x,y,z) 定义 3D 转化。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate3d(x,y,z,angle) 定义 3D 旋转。 查看全部
举报
0/150
提交
取消