H5+JS+CSS3实现七夕言情_技术笔记

糟糕的坚持也好过直接放弃_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
1. 列表项无法设置高度
2. 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采集

数据加载中...

H5+JS+CSS3实现七夕言情

页面切换部分的代码封装

页面之间的卷滚切换效果

页面的横向布局