-
- 糟糕的坚持也好过直接放弃_1gan 2022-12-22
就是说写的是随便写的，还是有明确规范？还有walk to third。你这是随便写的吗？你这还是说是怎么个事儿。
- 0赞 · 0采集
-
- 糟糕的坚持也好过直接放弃_1gan 2022-12-22
感觉这些代码和写字一样，而且还可以产生神奇的功能，而且显得非常漂亮，像写字一样，我也可以。
- 0赞 · 0采集
-
- 糟糕的坚持也好过直接放弃_1gan 2022-12-22
使用谷歌或者什么搜狐这个字母是真的多。Hef等于css杠斜杠抵抗a点css
- 0赞 · 0采集
-
- LHgreenbird 2021-12-31
2-1代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://img.mukewang.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>- 0赞 · 0采集
-
- LHgreenbird 2021-12-31
2-1代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://img.mukewang.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>- 0赞 · 0采集
-
- 胡卫涛Eric 2021-12-04
- W
- 0赞 · 0采集
-
- 慕姐7221216 2021-02-28
- 笔记功能有点类似评论
-
截图0赞 · 0采集
-
- 林风拖延症 2020-07-13
- 锚钩
- 0赞 · 0采集
-
- qq_慕移动9319924 2020-05-21
列表项无法设置高度
dom.find用法
- 0赞 · 0采集
-
- WE_Xing 2020-04-30
整体—>细节
-
截图0赞 · 0采集
-
- WE_Xing 2020-04-29
imooc.com
-
截图0赞 · 0采集
-
- 兮沫吖 2020-04-01
- 七夕
-
截图0赞 · 0采集
-
- 慕婉清9221589 2020-03-27
第一幅画面中：天上太阳的移动、云的来回飘移、小男孩沿着中间道路一直在走，页面也在滚动。
第二幅动画中：小男孩移动进了商店前的位置，商店的门开始打开，商店的灯光开始变暗。小男孩抱着一束花出来，商店关门。
第三幅页面中：星星变暗变亮的效果，桥下的水波在流动，小男孩上桥的动作。小男孩走到女孩子的面前，这是等待一下，他们一起转身后牵手，同时慕课网的logo会出现，天上的樱花正在飘下来。
- 0赞 · 0采集
-
- qq_慕桂英6512518 2019-10-19
- 有趣
-
截图0赞 · 0采集
-
- qq_慕桂英6512518 2019-10-19
- 有趣
-
截图0赞 · 0采集
-
- 慕无忌7551679 2019-09-27
如何实现动画？
用不同的手动实现动画有何优劣？
应该注意哪些问题？
动画与动画之间产生的异步
怎样梳理代码的流程
- 0赞 · 0采集
-
- 慕沐2143201 2019-09-27
- 4333
- 0赞 · 0采集
-
- 小慕粉丝 2019-08-27
- 小孩的animation和keyframes
- 0赞 · 0采集
-
- 小慕粉丝 2019-08-27
- element.css({ 'transition-timing-function' : 'linear', 'transition-duration' : speed + 'ms', 'transform' : 'translate3d(-' + x + 'px,0px,0px)' }); return this; };这个是什么意思呀
- 0赞 · 0采集
-
- 童心有心 2019-07-13
- 封装function Swipe(container)是构造函数，里面生成了一个对象swipe，scrollTo（）方法就是swipe对象的方法，如果不返回它的话，var swipe = Swipe($("#content"));这句代码的运行结果就不是得到你在构造函数里面生成的对象，而是undefined。
- 1赞 · 0采集
-
- 慕仙0086122 2019-05-14
- p
- 0赞 · 0采集
-
- 慕姐2027847 2019-04-10
list-style:指定所有列表的属性
-type是指每一行，项标记的类型，表头前面的符号
-position是项标记放置的位置，在表的内外
-image用图像替换项标记
- 0赞 · 0采集
-
- 初始化学者 2019-03-16
男孩走动+页面背景图片滚动 => 男孩走动
页面整体布局: 横向的+3个主题页面+页面之前是无缝拼接的+页面要滚动
布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面
这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点
- 0赞 · 0采集
-
- 大山的子孙哟爱太阳 2019-02-13
transform
translate3d(x,y,z) 定义 3D 转化。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate3d(x,y,z,angle) 定义 3D 旋转。 - 0赞 · 1采集
-
- qq_蒼白嘚歲月_03910496 2019-01-21
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.js"></script>
- 1赞 · 0采集
-
- 娅123 2018-11-12
页面切换部分的代码封装
封装，即隐藏对象的属性和实现细节，仅对外公开接口。
封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员
这个主题案例，我采用的是面向接口编程的写法，简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点
就拿页面切换的效果来说，在某一时刻，元素A需要让页面进行切换，那么元素A不需要关心页面是怎么切换的，它只能要调用到一个接口方法能让页面切换就行了
基于这样的理论，我们就开始改造一下页面切换的零碎的代码块
页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口
JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟
具体我看看右边代码块Swipe.js的实现 与index.html中调用
- 0赞 · 0采集
-
- 娅123 2018-11-12
页面之间的卷滚切换效果
页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？
一般来说要根据布局的结构来，大体有2种：
移动父容器，改变父容器的坐标
移动每一个子容器的坐标
显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话，那么我们会考虑第二种算法，可以做成动态加载，但是这种处理是超级麻烦，这里不讨论
改变坐标的处理可以分为2种：
传统的top,left坐标修改
CSS3中的transform属性
传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。
CSS3引入了一个新的属性Transform
transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强
过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性
transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料
这里需要特别注意的就是：
transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程
简单的一句话描述就是
通过设置transition的一些参数，让translate3d这个属性发生变化
如何通过translate结合transition改变元素的页面位置，我们具体看到右边的代码
通过点击"点击页面开始切换"出现页面切换的效果
- 0赞 · 0采集
-
- 娅123 2018-11-12
页面的横向布局
本章正式进入七夕这个主题效果是如何实现的讲解，首先回顾下视频的内容：整个效果都是以小男孩走路为前提，在三个主题页面中切换并在每个主题页面中会有不同的效果呈现
我们可以这样理解，效果上
页面主题会滚动
小男孩会走动
通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行
从页面的效果，考虑页面整体布局结构应该需要这样
页面是一个横向的
包含了3个主题页面
页面之间是无缝拼接的
页面还要能滚动
布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面
页面布局结构如下
<ul class='content-wrap'> <!-- 第一副画面 --> <li> 页面1 </li> <!-- 第二副画面 --> <li> 页面2 </li> <!-- 第三副画面 --> <li> 页面3 </li> </ul>
这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点
在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸
具体的实现我们参考右边的代码区域
- 0赞 · 0采集
-
- 慕桂英0244633 2018-11-07
- 1
- 0赞 · 0采集
-
- 独奏的幸福 2018-10-23
h5+js+css
- 0赞 · 0采集
