web前端全景图功能实现

资源下载:pannellum

预览图:

未命名1509430566

利用pannellum.js实现全景图功能

 

js 文件树的数据格式化方法

使用tree对数据格式有要求。我们需要自动递归循环读取所有的层级关系并输出我们想要的格式。

方法一

输出结果如下:

未命名1508895042

方法二:

输出结果如下:

123123

canvas渲染video视频,并添加图像设置功能,

本文主要展示使用canvas来实时的获取video并动态播放的例子。

 

优秀前端博客社区和资源整理

javascript 数组去重方法集合

整理了网上较常用的一些数组去重的方法。以做备忘..

 

设计类网站整理推荐

下面分享一些收藏较久的设计类的网站:

uesoso设计师网站导航

SDC设计师网址导航

海量PhotoShop笔刷素材免费下载!PS笔刷吧

Query网页特效最全网页模板和网站模板jQuery代码_17素材网

站酷 (ZCOOL) – 设计师互动平台 – 打开站酷,发现更好的设计!

图趣网(TUQUU)-优秀网页设计平台

百度用户体验中心

红动中国

视觉中国设计师社区

Bootstrap优站精选

awwwards网站奖-最佳网页设计的趋势

大象学社

 

jquery的ajax二次封装

二次封装的目的是按照项目需求直接调用,减少代码冗余。

使用方法:

调用:

对应请求函数:

put、get、post、delete、patch 如需使用同步请求,只需在函数前加入sync如syncPost、syncPut。
对应参数为:
  1. 请求的url
  2. 请求的数据
  3. 请求的预期返回参数数据类型(datatype)
  4. 自定义错误的回调设置(error)
  5. 自定义always函数设置
  6. contentType设置

 

HTML5本地存储——Web SQL Database

之前给大家介绍过h5的本地存储Local Storage和Session Storage,这两个是以一个键值来进行存储。存储少量而不复杂的数据是非常有用的,但是对应结构比较复杂的数据,就有点困难了。所以今天就给大家介绍一下为了解决这个问题出现的Web SQL Database.

Web SQL Database

中文翻译作“本地数据库”,是随着HTML5规范加入的在浏览器端运行的轻量级数据库。

三个核心方法

Web SQL Database 规范中定义的三个核心方法:

openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象

transaction:这个方法允许我们根据情况控制事务提交或回滚

executeSql:这个方法用于执行SQL 查询

创建数据库:

以上对应参数为:

  1. mydb:数据库
  2. 1.0:数据库版本号
  3. Test DB:文字说明
  4. 2*1024*1024:数据库大小
  5. 回调(非必须参数)

使用executeSql查询创建数据表:

上述查询将在’mydb’数据库中创建一个名为LOGS的表。

要在表中创建内容,我们在上面的例子中添加简单的SQL查询,如下所示:

我们还可以在创建时传递动态值,如下所示:

这里d_id和d_log是外部变量,executeSql将数组参数中的每个项映射到”?”,如d_id=1,d_log=2那么最终的查询如下:

查询操作:

要读取现有的记录,我们使用回调来捕获结果如下:

最终的demo:

所以最后,让我们将这个例子保持在完整的HTML5文档中,如下所示:

结果如下:

兼容性如下:

QQ图片20171016095841

javascript 数组操作:添加、删除、遍历、截取、排序

JavaScript Array对象

数组就是一组数据的集合

 

JavaScript Array的作用:使用一个变量名来存储一系列的值。

创建数组的语法:

参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。

参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

数组遍历的常用方法:

1:for in

2:for…

数组添加:

数组删除:

数组截取和合并:

数组排序:

数组拷贝: