JS Tween动画效果研究 : - )Tween...-Profound Grid：实现固定和流动...-注意：.Net Mvc项目暂缓升级jQuery至1.9.0

当前位置: 编程技术>WEB前端

本页文章导读:

▪JS Tween动画效果研究 : - )Tween公式直接用先看iframe一下DEMO：DEMO:点击直接查看Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duratio.........

▪Profound Grid：实现固定和流动布局的响应式网格系统　　Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS，带给你灵活性和全面的控制。你可以让让个流动或者固定，还可以根据需要为每个媒体添加布局。更改列和间隔宽度，并.........

▪注意：.Net Mvc项目暂缓升级jQuery至1.9.0 我的项目环境如下.Net Mvc4 Razor2 EF5今天在Nuget中把jQuery升到新版本，发现Model验证不行了，查了半天，退回1.8.3，搞定。-------------------------------------------------------------------------------------------------.........

[1]JS Tween动画效果研究 : - )Tween公式直接用

来源: 发布时间: 2013-11-06

先看iframe一下DEMO：

DEMO:点击直接查看

Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.

t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)

如：

Quad:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut:function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
}

公式的原理是神马，我也搞不懂，看起来好高深，我只知道用。。。拿来主义，呵呵。

我们知道了其中的参数的意思，就可以写一个通用的move函数，用的时候只要传递Tween方法即可，我写的方法如下：

动画与绘制轨迹曲线的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tween动画效果</title>
<style type="text/css">
#vvg { text-align: center; font-size: 16px; font-weight: bold; }
#box { width: 520px; height: 50px; border: 1px solid #333; margin: 10px auto; position: relative; }
#sbox { width: 20px; height: 50px; position: absolute; left: 0; background: red; }
#graph{ border: 1px solid #ccc; background: #272424;}
#vvg .radios{width: 520px; margin: 5px auto; font-weight: normal; text-align: left; overflow: hidden;}
#vvg .radios label{ width:103px; float: left;}
#vvg .row1{ background: #cccccc;}
#vvg .row2{ background: #b6b6b6; margin-top: 10px;}
#vvg .btn{padding: 5px 40px;}
</style>
</head>
<body>
<div id="vvg">
<div id="box">
<div id="sbox"> </div>
</div>
<canvas id="graph" width="522px" height="500">你的浏览器不支持canvas</canvas>
<div id="radio_1">
<label><input type="radio" value="Linear" name="tname" checked>Linear</label>
<label><input type="radio" value="Quad" name="tname">Quad </label>
<label><input type="radio" value="Cubic" name="tname">Cubic </label>
<label><input type="radio" value="Quart" name="tname">Quart </label>
<label><input type="radio" value="Quint" name="tname">Quint</label>
<label><input type="radio" value="Sine" name="tname">Sine</label>
<label><input type="radio" value="Expo" name="tname">Expo</label>
<label><input type="radio" value="Circ" name="tname">Circ</label>
<label><input type="radio" value="Elastic" name="tname">Elastic</label>
<label><input type="radio" value="Back" name="tname">Back</label>
<label><input type="radio" value="Bounce" name="tname">Bounce</label>
</div>
<div id="radio_2">
<label><input type="radio" value="easeIn" name="tname2" checked>easeIn</label>
<label><input type="radio" value="easeOut" name="tname2">easeOut</label>
<label><input type="radio" value="easeInOut" name="tname2">easeInOut</label>
</div>
<div><input type="button" value="运行" id="run"></div>
</div>

<script type="text/javascript">
// 快捷选择函数
function $(arg, context) {
var tagAll, n, eles = [], i, sub = arg.substring(1);
context = context || document;
if (typeof arg == 'string') {
switch (arg.charAt(0)) {
case '#':
return document.getElementById(sub);
break;
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = $('*', context);
n = tagAll.length;
for (i = 0; i < n; i++) {
if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}
return eles;
break;

[2]Profound Grid：实现固定和流动布局的响应式网格系统

来源: 发布时间: 2013-11-06

　　Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS，带给你灵活性和全面的控制。你可以让让个流动或者固定，还可以根据需要为每个媒体添加布局。更改列和间隔宽度，并根据需要删除或添加列。

您可能感兴趣的相关文章

2012年最佳的15个 CSS3 教程推荐
35个让人惊讶的 CSS3 动画效果演示
推荐12个漂亮的 CSS3 按钮实现方案
2012年最酷的25个 CSS3 学习教程
20个非常绚丽的 CSS3 特性应用演示

　　这个网格系统让您的的标记语义化，没有任何“grid_x”类。除非你想使用它们，在这种情况下，它们也可以包括在内。深刻的网格使用负外边距计算列。与其他网格系统不同，流体布局在每一个浏览器看起来几乎完全一样。

布局示例：

✓ Fixed（固定布局）
✓ Responsive Fixed（响应式固定布局）
✓ Fluid（流动布局）
✓ Max-Width Fluid（有最大宽度的流动布局）
✓ Responsive Fluid（响应式流动布局）
✓ Multiple Grids（）多重网格布局
✓ Nested Grids（嵌套网格布局）
✓ Push/Pull（推拉布局或者错位布局）

使用指南：

　　设置网格的总宽度，流动布局设置为 100%：

$total-width: 960px; // px or %

　　设置网格的总列数：

$total-colums: 12; // number

　　设置网格列之间的间距：

$gutter_width: 1%; // px or %

　　设置网格左右两侧的外边距：

$container_margin: 1%; // px or %

Github 官方主页立即下载

您可能感兴趣的相关文章

24个很酷的 CSS3 文本效果示例及教程
推荐能够帮助你学习 CSS3 的实用手册
45个纯 CSS3 实现的精美边框效果教程
CSS3 Media Queries 响应式设计教程
20个非常酷的 CSS3 导航菜单制作教程

本文链接：Profound Grid：固定和流动布局的响应式网格系统

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接

[3]注意：.Net Mvc项目暂缓升级jQuery至1.9.0

来源: 发布时间: 2013-11-06

我的项目环境如下.Net Mvc4 Razor2 EF5

今天在Nuget中把jQuery升到新版本，发现Model验证不行了，查了半天，退回1.8.3，搞定。

---------------------------------------------------------------------------------------------------------------------------------------------------------------

200字，好难搞的，本文意在提醒，实在没有话说。

本文链接