一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型，也是一个个三角形画出来的。 4.2、WebGL绘制流程 简单说来，WebGL绘制过程包括以下三步： 1、获取顶点坐标 2、图元装配（即画出一个个三角形） 3、光栅化（生成片元，即一个个像素点） 接下来，我们分步讲解每个步骤。 4.2.1、获取顶点坐标 顶点坐标从何而来呢？一个立方体还好说，如果是一个机器人呢？ 没错，我们不会一个一个写这些坐标。 往往它来自三维软件导出，或者是框架生成，如下图： 写入缓存区是啥？ 没错，为了简化流程，之前我没有介绍。 由于顶点数据往往成千上万，在获取到顶点坐标后，我们通常会将它存储在显存，即缓存区内，方便GPU更快读取。 4.2.2、图元装配 我们已经知道，图元装配就是由顶点生成一个个图元（即三角形）。那这个过程是自动完成的吗？答案是并非完全如此。 为了使我们有更高的可控性，即自由控制顶点位置，WebGL把这个权力交给了我们，这就是可编程渲染管线（不用理解）。 WebGL需要我们先处理顶点，那怎么处理呢？我们先看下图： 我们引入了一个新的名词，叫“顶点着色器”，它由opengl es编写，由javascript以字符串的形式定义并传递给GPU生成。 比如如下就是一段顶点着色器代码： 1 2 3 4 attribute vec4 position; void main() { gl_Position = position; } attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值； position即我们定义的顶点坐标； gl_Position是一个内建的传出变量。 这段代码什么也没做，如果是绘制2d图形，没问题，但如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，我们则需要转换成屏幕坐标。 比如：v(-0.5, 0.0, 1.0)转换为p(0.2, -0.4)，这个过程类似我们用相机拍照。 4.2.2.1、顶点着色器处理流程 回到刚才的话题，顶点着色器是如何处理顶点坐标的呢？ 如上图，顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。 你可能留意到，这时候顶点着色器变为： 1 2 3 4 5 attribute vec4 position; uniform mat4 […]
View Details2012年12月12日，【《Web 前端开发人员和设计师必读文章》系列十二】和大家见面了。梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心推荐的文章能够帮助到您。 jQuery 插件和教程 精心挑选：精美的 jQuery 加载动画和进度条插件 精心挑选：10款基于 jQuery 的图片360度旋转插件 精心挑选：几款实用的 jQuery 全景图片展示插件 精心挑选：推荐6套精美的免费 jQuery UI 主题 精心挑选：12款 JavaScript 日历和时间选择插件 精心挑选：12款优秀 jQuery Ajax 分页插件和教程 精心挑选：23款美轮美奂的 jQuery 图片特效插件 精心挑选：10款实用的 jQuery Tab 切换插件和教程 精心挑选：15款优秀 jQuery 文本特效插件和教程 精心挑选：33个优秀的 jQuery 图片展示插件分享 HTML5 & CSS3 应用 Web 前沿：展示一组极其绚丽的 CSS3 效果 未来的Web：让你惊叹的 Chrome 实验项目 推荐十款非常优秀的 HTML5 在线设计工具 35款优秀的基于 HTML5 开发的网页游戏 你可能不知道的5个功能强大的 HTML5 API Web前沿：CSS3 在网页设计中的20佳惊艳应用 Web技术前沿：那些让人惊叹的 CSS3 应用演示 推荐35款非常精致的 CSS3 和 HTML5 网页模板 推荐十款精心挑选的在线 CSS3 代码生成工具 推荐几份能够帮助你学习 CSS3 的实用帮助手册 精美网站模板 推荐10套精美的免费网站后台管理系统模板 12款高质量的免费 HTML 网页模板下载 12款非常漂亮的免费 CSS 网页模板下载 30款精美的国外企业网站模板 PSD 免费下载 分享20款精美的免费 Flash […]
View Details在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在 Web 开发中很有用的效果，记得收藏！ 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。 源码下载 在线演示 美！视差滚动在图片滑块中的应用 视差滚动（Parallax Scrolling）已经被广泛应用于网页设计中，这种技术能够让原本平面的网页界面产生动感的立体效果。美女很养眼吧 :) 源码下载 在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。 源码下载 在线演示 三种风格的全屏幻灯片效果 这个幻灯片效果是由四个区域的独立移动构成，通过画面分割，同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。 源码下载 在线演示 使用 CSS3 实现 3D 图片滑块效果 使用 CSS3 的3D变换特性，我们可以通过让元素在三维空间中变换来实现一些新奇的效果。 这篇文章分享的这款 jQuery 立体图片滑块插件，利用了 3D transforms（变换）属性来实现多种不同的效果。 源码下载 在线演示 单元素实现的 CSS 加载进度提示效果 之前的文章个大家分享过各种类型的加载效果（Loading Effects），这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的，十分强悍。 源码下载 在线演示 动感的页面加载动画效果 这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。 源码下载 在线演示 奇特的网格加载效果 向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。 源码下载 在线演示 使用 CSS3 制作网格动画效果 今天我们想与大家分享一个小的动画概念。这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的。实现的基本思路是对网格项目进行 3D 旋转，扩展成全屏，并呈现内容。 源码下载 在线演示 超炫的复选框（Checkbox）效果 复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。 源码下载 在线演示 from:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html
View DetailsBall Pool 是一个基于 HTML5 技术的实验，模拟现实物理效果，让你在 Web 中感受自然物体的运动。玩法介绍：可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键，有不同的效果，赶紧来体验一下。 源码下载 在线演示 实现各种 CSS3 文本动画效果 这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件，可以让你为网页中的文字运用各种动画。 源码下载 在线演示 离开你网站时显示模态弹窗 Ouibounce 是一个微小的库，用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。 源码下载 在线演示 实现各种好看的阴影效果 Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库，兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用，如果有需要会自动添加前缀。 源码下载 在线演示 表单填写进度提示效果 Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库，你需要做的就是添加表单，剩下的任务就交给 Fort.js 算法了，使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果，满足开发的各种场合需要。 源码下载 在线演示 HTML5 WebGL 实现逼真的云朵效果 使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。 源码下载 在线演示 带有数字显示的加载进度条效果 有的时候，在我们的应用程序中，我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能，易于使用和定制，而且是是免费开源的。 立即下载 在线演示 自适应的占位符效果 在早期，我们都是通过使用 JavaScript 来实现占位符功能。而现在，HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果（Adaptive Placeholder），当你输入的时候，提示文字不会消失，而是以动画的方式移动到了输入框的上方。 源码下载 在线演示 from:http://www.yyyweb.com/377.html
View DetailsWebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。 1. Aquarium Image Source:www.webglsamples.org Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time. 2. 3 Dreams of Black Image Source:www.ro.me A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google […]
View DetailsJS部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function () { var $this = $(".renav"); var scrollTimer; $this.hover(function () { clearInterval(scrollTimer); }, function () { scrollTimer = setInterval(function () { scrollNews($this); }, 2000); }).trigger("mouseout"); }); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": -lineHeight + "px" }, 600, function() { $self.css({ "margin-top": "0px" }).find("li:first").appendTo($self); }); } |
HTML部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style type="text/css"> .renav { width: 200px; height: 150px; line-height: 21px; overflow: hidden; background: #FFFFFF; } .renav li { height: 21px; } </style> <div class="renav"> <ul style="margin-top: 0px;"> <li><a>罗氏</a></li> <li><a>瑞声达</a></li> <li><a>未添加1</a></li> <li><a>未添加2</a></li> <li><a>未添加3</a></li> <li><a>未添加4</a></li> <li><a>西门子</a></li> <li><a>欧姆龙</a></li> </ul> </div> |
from:http://www.jb51.net/article/35149.htm
View Details最近做浏览器界面倒计时，用js就实现，两种方式： 一：设置时长，进行倒计时。比如考试时间等等 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <meta charset="UTF-8"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时，按秒计算，自己调整! function CountDown() { if (maxtime >= 0) { minutes = Math.floor(maxtime / 60); seconds = Math.floor(maxtime % 60); msg = "距离结束还有" + minutes + "分" + seconds + "秒"; document.all["timer"].innerHTML = msg; if (maxtime == 5 * 60)alert("还剩5分钟"); --maxtime; } else{ clearInterval(timer); alert("时间到，结束!"); } } timer = setInterval("CountDown()", 1000); </SCRIPT> </head> <body> <div id="timer" style="color:red"></div> <div id="warring" style="color:red"></div> </body> </html> |
运行结果： 二：设置时间戳，进行倒计时。比如距离活动结束时间等等 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> <script type="text/javascript"> function countTime() { //获取当前时间 var date = new Date(); var now = date.getTime(); //设置截止时间 var str="2017/5/17 00:00:00"; var endDate = new Date(str); var end = endDate.getTime(); //时间差 var leftTime = end-now; //定义变量 d,h,m,s保存倒计时的时间 var d,h,m,s; if (leftTime>=0) { d = Math.floor(leftTime/1000/60/60/24); h = Math.floor(leftTime/1000/60/60%24); m = Math.floor(leftTime/1000/60%60); s = Math.floor(leftTime/1000%60); } //将倒计时赋值到div中 document.getElementById("_d").innerHTML = d+"天"; document.getElementById("_h").innerHTML = h+"时"; document.getElementById("_m").innerHTML = m+"分"; document.getElementById("_s").innerHTML = s+"秒"; //递归每秒调用countTime方法，显示动态时间效果 setTimeout(countTime,1000); } </script> </head > <body onload="countTime()" > <div> <span id="_d">00</span> <span id="_h">00</span> <span id="_m">00</span> <span id="_s">00</span> </div> </body> </html> |
运行结果： from:https://www.cnblogs.com/heizai002/p/6862418.html
View Details有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 1 2 3 4 5 6 7 <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 *{ margin: 0; padding: 0; } ul { list-style: none outside none; padding: 10px; background: green; text-align: center; } ul li { display: inline-block; *display: inline; zoom: 1; background: orange; padding: 5px; } 上面的demo效果，明显的可以看出，在inline-block的元素之间存在“4px”的空白： 上面截图是：IE8-9、Firefox、Safari等浏览器下的效果，换句话说，这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法： 方法二：很多地方讨论使用负的margin来解决，比如说： 1 2 3 4 5 6 7 ul { font-size: 12px; } ul li { margin-right: -4px; *margin-right: 0; } 这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。 当然有些文章介绍使用"-0.25em"来解决，这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问 方法三：设置父元素字体为0 第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。 1 2 3 4 5 6 7 8 9 10 […]
View Details如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法：
|
1 2 3 |
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; |
效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法：
|
1 2 3 4 |
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; |
效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 实现方法：
|
1 2 3 4 5 6 7 |
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); } |
效果如图： 适用范围： 该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。 注： 将height设置为line-height的整数倍，防止超出的文字露出。 给p::after添加渐变背景可避免文字只显示一半。 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。 from:http://www.daqianduan.com/6179.html
View DetailsReact Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。 React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 Android Studio（不要告诉我你还在使用 Eclipse），iOS 平台只能使用 XCode，而开发 Javascript 的 IDE 选择就多了，从 FaceBook 官方推荐的 Atom＋Nuclide，到与 Android Studio 同系列的 Javascript IDE WebStorm，再到功能强大的 Sublime Text 3，以及微软推出的 Visual Studio Code 和 decosoftware 专门为 React Native 打造的开源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用来开发 React Native，唯一的前提能够支持识别 Javascript 语法，识别 JSX 和 React Native API 的智能提醒。接下来我们就来介绍最常用的五款 IDE 的配置和选型。 Atom＋Nuclide Atom 是由 Github 打造的下一代编程开发利器，支持 Windows、Mac OS X、Linux 三大桌面平台，免费且开源。Atom 支持各种编程语言的代码高亮，同时具备强大的代码补全功能，能够极大的提高编程效率，Atom 本质上是一个文本编辑器，而不是一个 IDE，因此在用来开发 React Native 时需要配合 Nuclide 一起使用。 Nuclide 是 Facebook 基于 Atom 的基础上开发的一个插件 IDE，可以用来开发 React Native，iOS […]
View Details