用JS开发页面动画效果时的一个设计思路
作者:Justin 来源:Justin’s Blog 发布时间:2008-02-03 15:12:00
首先说明下范围
用Javascript来开发WEB页面的动画效果
该思路同时考虑页面效率、SEO,如果数据大,也可以缓解后端压力。
这个是程序设计思路
还谈不上思想,只是自己实践使用过的一个方法
我们经常看到网页上有各种各样的动画,例如下图
我们先假设一下条件
这些记录都需要被搜索引擎收录
直接对页面元素做动画有困难(这里可能比较简单,但是困难的情况还是很多的)
信息需要循环显示
数据比较多,N条
这个时候出现问题
数据必须是HTML标签,不能直接写入JS
直接对页面元素控制,并做动画有难度。由于要循环,得拆分子元素
数据比较多,控制子元素会出现效率问题
第一个问题呢,我们这么做,让HTML载入,然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。
第二个问题怎么搞呢,我们在读完数据之后,再搞出一个代理层来,比如叫A层。那么A层仅仅是提供显示,JS控制这个层来做动画。每次动画的时候呢把新的数据填进去,再做动画。
第三个问题迎刃而解,控制A层就OK了。
Y方案:具体看看流程吧:(我把JS读取数据的步骤省略不说了,这个相信大家都知道怎么搞)
第一步,元素的层次结构:
A层 z-index:2;———— 隐藏 //负责动画
真层 z-index:1;———— 显示 //给爬虫看,且负责显示的当前信息
第二步动画:完成后返回第一步既可。
A层填入数据–》显示–》动画
动画结束之后,B层直接设置坐标,到标准位置
A层隐藏。
上面这样做的理由是,填数据的过程,是会造成页面抖动的,所以我们把这个过程隐藏的来完成。
更升级的问题,如果真层直接设置坐标也比较困难,怎么办?那么就再搞个B层出来
X方案:
A层 z-index:3;———— 隐藏 //负责动画
B层 z-index:2;———— 显示 //只显示当前信息
真层 z-index:1;———— 隐藏 //仅仅给爬虫看,以及读取数据用,之后不再显示
动画的时候,A填入数据–》A显示–》A动画–》B填入数据–》A隐藏
再升级下问题:如果数据实在太多,没法一次用HTML载入完成,怎么办?那么用AJAX来搞吧,具体做法和上面一样
从具体到抽象:设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层,不断的更新数据,不断的隐藏显示来造成假象,然后做动画。
注意的问题:如果每个item中,图片比较多,可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步,且比较难控制坐标的时候,那么适合用X方案。
猜你喜欢
- 记录了mysql 8.0.12 的安装配置方法,分享给大家。一、安装1.从网上下载MySQL8.0.12版本,下载地址2. 下载完成后解压我
- 一、JDBC是什么?JDBC 指 Java 数据库连接(Java Database Connectivity),是一种标准Java应用编程接
- inspect模块用于收集python对象的信息,可以获取类或函数的参数的信息,源码,解析堆栈,对对象进行类型检查等等,有几个好用的方法:D
- 一般的多数据库支持在配置文件中如下: <connectionStrings> <add name="MyCmsC
- 本文实例讲述了python简单获取本机计算机名和IP地址的方法。分享给大家供大家参考。具体实现方法如下:方法一:>>> i
- 1.查询高于平均价格的商品名称: SELECT item_name FROM ebsp.product_market_price WHERE
- mysql脏页由于WAL机制,InnoDB在更新语句的时候,制作了写日志这一个磁盘操作,就是redo log,在内存写完redo log后,
- 1、pd.cut()用于将数据值按照值本身进行分段并排序到 bins 中。参数包含:x, bins, right, include_lowe
- 网关是什么简单来说,网关就是暴露给外部的请求入口。就和门卫一样,外面的人想要进来,必须要经过门卫。当然,网关并不一定是必须的,后端服务通过h
- replace()最简单的算是能力就是简单的字符替换。示例代码如下: <script language="javascrip
- 为什么要使用Enum.(Why?)在普通类别中,枚举和我们在对象中定义的类变量一样的,每一个类变量就是一个枚举项,访问方式如下:class
- CentOS6.9安装Mysql5.7,供大家参考,具体内容如下一、上传安装包二、建立用户以及mysql的目录1、建立一个mysql的组输入
- 背景np.loadtxt()用于从文本加载数据。文本文件中的每一行必须含有相同的数据。***loadtxt(fname,dtype=<
- 我看见朋友可以把数据库的记录输出到页面表格上去,觉得很有用。这是怎么做的啊?见下:dbtable.asp<html><he
- Java一直标榜一句老话叫“编写一次,到处运行(Write Once,Run Anywhere)”,CSS也差一点点做到了。但就是为了差的一
- 我这里总结了判断记录是否存在的常用方法: sql语句:select count(*) from tablename; 然后读取count(*
- 使用opencv自带的模板匹配1、目标匹配函数:cv2.matchTemplate()res=cv2.matchTemplate(image
- cv2库在opencv库内,因此需要下载opencv-python1、打开windows命令行:win+Rcmd2、更新pip版本(不一定要
- Go令牌Go程序包括各种令牌和令牌可以是一个关键字,一个标识符,常量,字符串文字或符号。例如,下面的Go语句由六个令牌:fmt.Printl
- 第一步:在handleTarget函数方法开始加入:var theTarget = e.target; if (theTarget != n