H5+JS+CSS3 实现圣诞情缘--整体结构篇

1.布局结构

本动画是由3幅画面组成,每个主题页面会有不同的动画效果,因此三个页面分开实现。
三个页面的切换由JS动态控制。

<section class="container">
    <!-- 第一幅画面 -->
    <section class="page-a bg-adaptive">
    </section>
    <!-- 第二幅画面 -->
    <section class="page-b bg-adaptive">
    </section>
    <!-- 第三幅画面 -->
    <section class="page-c bg-adaptive">
    </section>
</section>

三个页面大小一致,会互相重叠,所以利用z-index属性决定三个页面的排列顺序。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
http://www.cnblogs.com/ForEvErNoME/p/3373641.html
http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

querySelector()和querySelectorAll()的区别
http://www.runoob.com/jsref/met-document-queryselector.html

querySelector()和getElementById()的区别
http://www.imooc.com/article/13027

在学习获取页面元素时,注意到下面这行代码总是显示错误,查了很多资料,才发现

var page = document.querySelector("#page");

应该去掉 var

page = document.querySelector("#page");

这仅是个人查阅资料得来的灵感,如果有小伙伴遇到和我类似的问题,可以试试。

添加事件监听机制 addEventListener():
http://www.jb51.net/article/49858.htm
http://www.runoob.com/js/js-htmldom-eventlistener.html

2.镜头效果

实现三个页面的切换效果,运用到之前讲过的animation动画。
请查看 http://blog.csdn.net/leapmotion1/article/details/72955015

引入Jquery.js 利用封装好的方法快速实现切换页面。
http://www.w3school.com.cn/jquery/attributes_addclass.asp

若是在实现动画效果时,出现页面覆盖问题,注意调节z-index的值。

3.代码封装

为了实现代码的“高内聚,低耦合”,作者引入了面向对象的思想。
在设计上,作者将每一个场景当作一个独立的”场景对象”,场景内部都封装了各自的子对象,对象与对象之间通过接口调用。简单的说就是将行为封装分布在各个对象中,并让这些对象自己各自负责自己的行为,这也是面向对象设计的一个优点。

设计了3个独立的JS文件,并引入了一个公共的JS文件作为“中介”对象,通过接口调用各个对象。

在“中介”JS文件中,封装了一个公用函数,作为公用调用接口。

对于不了解JS闭包知识的小伙伴们,我找到了一个链接,知识普及非常简单易懂
http://www.cnblogs.com/wangfupeng1988/p/3977924.html

4.场景切换

这里运用到了观察者模式:一对多的关系。
场景切换是在每个场景动作结束后切换到另一个场景。为了避免代码耦合,场景之间尽量不要直接调用另外一个场景代码。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个基本的搜索框下拉列表的实现步骤: 1. HTML结构:在HTML中创建一个输入框和一个下拉列表的容器,下拉列表的容器初始设置为隐藏状态。 ```html <div class="search-container"> <input type="text" placeholder="请输入搜索关键字"> <div class="search-list-container"> <ul class="search-list"></ul> </div> </div> ``` 2. CSS样式:设置输入框的样式和下拉列表容器的样式,下拉列表容器的初始状态设置为 `display:none` 。 ```css .search-container { position: relative; } input[type="text"] { width: 300px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .search-list-container { position: absolute; top: 35px; left: 0; z-index: 99; width: 300px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 5px; display: none; } ``` 3. JS交互:监听输入框的键盘输入事件,在输入框中输入内容时,向后台发送请求获取匹配的搜索结果,将结果渲染到下拉列表中,并将下拉列表容器设置为显示状态。 ```javascript const input = document.querySelector('input[type="text"]'); const searchListContainer = document.querySelector('.search-list-container'); const searchList = document.querySelector('.search-list'); input.addEventListener('input', function(e) { const keyword = e.target.value; if (keyword.trim()) { // 发送请求获取匹配的搜索结果 const searchResults = getSearchResults(keyword); renderSearchList(searchResults); searchListContainer.style.display = 'block'; } else { searchList.innerHTML = ''; searchListContainer.style.display = 'none'; } }); function getSearchResults(keyword) { // 向后台发送请求获取搜索结果 const results = ['搜索结果1', '搜索结果2', '搜索结果3']; return results; } function renderSearchList(results) { let html = ''; results.forEach(result => { html += `<li>${result}</li>`; }); searchList.innerHTML = html; } ``` 以上就是一个简单的搜索框下拉列表的实现方法,您可以根据自己的需求进行样式和交互的修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值