DOM编程艺术之动画

一:实现方式
-gif
-flash
-CSS3
-JS

二:三要素
    -对象
        -DOM
    -属性
        -width
        -height
        -Left
        -....
    -定时器
        -setInterval
        -setTimeout
        -requestAnimationFrame

三:setInterval
    -var timer=setInterval(func,delay)
                函数  触发定时器的间隔
    -clearInterval(timer)
    -每隔一段时间执行


四:setTimeout
    -var timer=setTimeout(func,delay)
    -clearTimeout(timer)
    -只会执行一次

五:requestAnimationFrame
    -var timer=requestAnimationFrame(func)
    -cancelAnimationFrame(func)
    -间隔时间以显示器的频率决定
    -更流畅

六:常见动画
    -形变
    -位移
    -旋转
    -透明度
    -...

七:动画函数
    -var animation=function(ele,attr,from,to){
        var distance=Math.abs(to-from);
        var stepLength=distance/100
        var sign=(to-from)/distance
        var offset=0;
        var step=function(){
            var tmpOffset=offset+stepLength;
            if(tmpOffset<distance){
                ele.style[attr]=from+tmpOffset*sign+'px'
            }else{
                ele.style[attr]=from+"px"
                clearInterval(intervalId)
            }
        }
        ele.style[attr]=from+"px";
        var intervalId=setInterval(step,10)
    }

    -var process=function(prcsswrap,drtn,intrvl,callback){
        var width=prcsswrap.clientWidth
        var prcss=prcsswrap.getElementsByClassName('prcss')[0]
        var count=drtn/intrvl
        var offset=Math.floor(width/count)
        var tmpCurrent=CURRENT
        var step=function(){

        }
        var intervalId=setInterval(step,intrvl)
    }

 

CSS之等分布局

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title></title>
<style type=”text/css”>
/一:float
.parent{
margin-left:-20px 总宽度增加一个G
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box; 包含了padding
}
/

        /*二:table
        .parent-fix{
            margin-left: -20px;
        }
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed; 一:布局优先,加速渲染,二:单元格未设置宽度单元格则是平分
        }
        .column{
            display: table-cell;
            padding-left: 20px;
        }*/

        /*三:flex
        .parent{
            display: flex;
        }
        .column{
            flex: 1; 每一列宽度都会平均分配
        }
        .column+.column{
            margin-left: 20px;
        }*/



    &lt;/style&gt;
    &lt;script type="text/javascript"&gt;
        每列宽度,间距一样
        总宽度为C,每列宽度为W,每列间距为G,多少列为N
        则C+G=(W+G)*N 总宽度加上一个G

        一:float
            -IE7以下兼容性不太好
            -结构与样式有耦合性

        二:table
            -套一个parent-fix来实现C+G的效果
            -无耦合性

        三:flex
            -兼容性是个坑


    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="parent-fix"&gt;
&lt;div class="parent"&gt;
    &lt;div class="column"&gt;
        &lt;p&gt;1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
        &lt;p&gt;2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
        &lt;p&gt;3&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
        &lt;p&gt;4&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

</html>

 

知道你们不想撸代码写PPT之可视化页面做一款炫酷的WEB PPT

推荐阅读地址:我的极客标签社区


前段时间嘟嘟发布了一篇文章站在巨人的肩膀上——制作酷炫web幻灯片:http://www.gbtags.com/gb/share/5688.htm


给人第一眼感觉:卧槽!碉堡了;第二眼:卧槽!碉堡了;第三眼:卧槽!还要写代码!


于是在经过某些懒人的一番寻找找到了一个可视化的WEB PPT制作网页


地址:http://strut.io/editor/


点击本文的”在线演示2”也是okay的


保存演示文件到本地仅仅需要ctrl+s即可具体步骤如下


制作好以后 点击impress按钮 然后把当前页面保存ctrl+s到本地就okay了



  • 支持makedown

  • 可视化开发界面

  • 支持多种WEB PPT

  • 支持impress

  • 支持handouts

  • 支持bespoke

  • 多种WEB PPT效果切换

  • 支持导入/导出strut项目文件

  • 支持导出HTML文件

  • 支持添加/修改class

  • 支持添加文本,视频,网页,图片

  • 内置10款图形





 



这里给出几份图片





 


 


最后:如果访问在线网页过慢,可以去git clone下项目git就可以本地运行了~


git地址:https://github.com/tantaman/Strut


如果嫌麻烦的可以直接下载本文章的演示素材本地运行即可

DOM编程艺术之事件分类

一:Event
-load
-unload
-error
-select
-abort

二:UIEvent
    -resize
    -scroll;

三:FocusEvent
    -blur
    -focus
    -focusin
    -focusout

四:InputEvent
    -beforeinput
    -input

五:KeyboardEvent
    -keydown
    -keyup

六:MouseEvent
    -click
    -dbclick
    -mousedown
    -mouseenter;
    -mouseleave
    -mousemoved 
    -mouseout
    -mouseover
    -mouseup

七:WheelEvent
    -wheel

八:MouseEvent对象
    -属性
        -clientX,clientY //页面
        -screenX,screenY //系统的屏幕
        -ctrlKey,shiftKey,altKey //按下去玩 true
        -button(0,1,2) //鼠标 左键,中间,右键

九:MouseEvent顺序
    -从元素A上方移过
        -mousemove-mouseover(A)-mouseenter(A)-mousemove(A)-mouseout(A)-mouseleave(A)
    -点击元素
        -mousedown-[mousemove]-mouseup-click

十:例子-拖拽div
    -HTML
        -&lt;div id="div1"&gt;&lt;/div&gt;
    -CSS
        -#div1{
            position:absolute;
            ///
        }
    -js
        -var elem=document.getElementById("div1")
        -var clientX,clientY,moving;
        -var mouseDownHandler=function(event){
            event=event||window.event
            clientX=event.clientX;
            clientY=event.clientY;
            moving=!0;
        }
        -var mouseMoveHandler=function(event){
            if(!moving) return;
            event=event||window.event
            var newClientX=event.clientX
            var newClientY=event.clientY
            var left=parseInt(elem.style.left)||0,
                   top=parseInt(elem.style.top)||0
            elem.style.left=left+(newClientX-clientX)+"px";
            elem.style.top=top+(newClientY-clientY)+"px";
            clientX=newClientX;
            clientY=newClientY;
        }
        -var mouseUpHandler=function(event){
            moving=!1;
        }
        addEvent(elem,'mousedown',mouseDownHandler)
        addEvent(elem,"mousemove",mouseMoveHandler)
        addEvent(elem,"mouseup",mouseUpHandler)


十一:WheelEvent对象
    -属性
        -daltaMode
        -daltaX
        -daltaY
        -daltaZ

十二:FocusEvent
    -属性
        -relatedTarget//失去焦点的元素

十三:InputEvent
    -onpropertychange(IE)

十四:KeyboardEvent
    -属性
        -key //按下的什么键
        -code//按键码
        -ctrlKey,shiftKey...
        -repeat//按住不动的键 持续按键
        -keyCode 
        -charsetCode
        -which

十五:window
    -load
    -unload
    -error
    -abort

十六:Image
    -load
    -error
    -abort
    -&lt;img src="xxx" onerror="this.scr='http://xxx.png"&gt;

十七:UIEvent</pre>

DocusEvent WheelEvent UIEvent MouseEvent KeyboardEvent InputEvent Event


 


 


图片打包下载:事件


 


 


 

解决IE9、IE10无法加载本地CSS文件的问题

转自http://wlt436.blog.163.com/blog/static/6464704201472944155390/


从去年三月份开始,我的IE出现了一个很奇怪的现象:在IE9/IE10模式下打开所有本地网页,都不能加载外链CSS样式表,浏览器会报“SEC7113:CSS 因 Mime 类型不匹配而被忽略”的错误;而在IE6/7/8以及chrome、firefox里面就不存在这样的问题,这给我的前端开发造成了很大的麻烦。查阅了微软的官方文档,给出的解释是微软对浏览器的安全机制作了一些修改,会拒绝加载MIME type不匹配的CSS文件,不过我在<link>里面已经正确声明了css type,这个问题仍然存在。当时尝试了各种解决方法,搜遍了百度谷歌,在各种技术论坛发帖询问,都没有效果,至于网上那些所谓修改web.xml的方法,纯属扯淡。


这一年半以来,我都是使用在本地架设一个服务器环境的方法来实现对本地网页的预览,具体的实现步骤不说了,这种方式极其不方便,原来想要浏览一个网页,去到对应的目录双击打开就行,现在还得先用dreamweaver打开,然后发布一下才可以正常浏览。


直到今天,偶然看到了这篇文章:http://social.technet.microsoft.com/Forums/ie/zh-CN/592ae03c-b5b5-468b-886a-9bdc54e9a4aa/ie10-wont-open-local-css-files


文章下面的推荐答案经过我的测试,实际上是无效的。但是最后面一个回答,终于解决了这个困扰我一年半的问题。具体的解决步骤非常简单:


1、下载FileTypesMan,百度即可找到,只有60多K


2、解压运行FileTypesMan.exe,程序会花一点时间查找所有的文件格式,稍等一下即可


3、在列表中找到.css,双击进入到“编辑文件类型”界面


4、在MIME类型那里,修改为text/css


5、点确定,大功告成~


然后再打开本地网页,css文件已经可以正常加载了。

学习笔记-angular实例-Amail分析

github地址:https://github.com/Relsoul/readbook/tree/master/angular/html%E5%AE%9E%E8%B7%B5/%E5%85%A5%E9%97%A8%E5%AE%9E%E8%B7%B5/Amail%E5%AE%9E%E8%B7%B5

第一个angular实例-Amail分析

首先构建html模板和引入angular


<!DOCTYPE html>
<html ng-app=”AMail”> //这里声明一个ng-app模块
<head>
<meta charset=”utf-8”>
<title></title>
<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script&gt;
<script src=’http://apps.bdimg.com/libs/angular.js/1.3.9/angular.js‘ type=”text/javascript” charset=”utf-8”></script>
<script src=”http://apps.bdimg.com/libs/angular.js/1.3.9/angular-route.min.js“ type=”text/javascript” charset=”utf-8”></script>
<script src=”app.js” type=”text/javascript” charset=”utf-8”></script>
</head>
<body>
<h1>A-Mail</h1>
//ng-view:所有的模板会在这个div里面呈现
<div ng-view></div>
</body>
</html>

接下来定义模板


列表模板(list.html)


<table>
<tr>
<td><strong>发送者</strong></td>
<td><strong>主题</strong></td>
<td><strong>日期</strong></td>
</tr>
//ng-repeat 类似于for in循环一样 会遍历出data属性
<tr ng-repeat=”mail in data”>
<td></td>
<td><a href=”#/view/“></a></td>
<td></td>
//便于理解route里的URL参数
<a href=”#/test/ss?search=mm”>clickme</a>
</tr>
</table>

详细列表(detail列表)


<div><strong>Subject:</strong></div>
<div><strong>Sender:</strong></div>
<div><strong>Date:</strong></div>
<div><strong>To:</strong>
<span ng-repeat=”Mto in mail.recipients”></span>
</div>
<a href=”#/“>返回</a>

最后编写控制程序


首先创建Amail模块


//ngRoute:在创建Amail模块的时候需要依赖什么模块 比如ngRoute就是angular的路由模块 也就是angular-router.js
var aMailservices=angular.module(“AMail”,[“ngRoute”]);

然后创建路由


//创建路由
function AmailRouteConfig($routeProvider){
//这里的$routeProvider会自动注入
//$routeProvider起一个路由分配左右
$routeProvider.
when(“/“,{
//当访问主页面 也就是127.0.0.0
controller:ListController,//控制这个模板的控制器为ListController
templateUrl:”list.html”//访问主页面加载的模板为list.html
}).
//在id前加了一个冒号指定参数化URL
//结合list的<td><a href=”#/view/“></a></td>就可以知道了
when(“/view/:id”,{
controller:DetaiController,
templateUrl:”detail.html”
}).
//便于理解URL里的参数
when(“/:name/:sid”,{
controller:routeURL,
templateUrl:”routeURL.html”
})
.
//访问其他没有定义的页面统一跳转到”/“
otherwise({
redirectTo:”/“
});
}

配置路由


//配置路由
aMailservices.config([“$routeProvider”,AmailRouteConfig]);

自定义邮件JSON


var messages=[{
id:0,sender:”aaa@aaa.com”,subject:”第一封测试邮件标题”,date:”2015年8月28日23:36:05”,recipients:[“bbb@bbb.com”,”ccc@ccc.com”],message:”第一封测试邮件内容第一封测试邮件内容第一封测试邮件内容”
},
{
id:2,sender:”ddd@ddd.com”,subject:”第二封测试邮件标题”,date:”2015年8月28日23:36:05”,recipients:[“eee@eee.com”,”fff@fff.com”],message:”第二封测试邮件内容第二封测试邮件内容第二封测试邮件内容”
},
{
id:3,sender:”aaa@aaa.com”,subject:”第三封测试邮件标题”,date:”2015年8月28日23:36:05”,recipients:[“bbb@bbb.com”,”ccc@ccc.com”],message:”第三封测试邮件内容第三封测试邮件内容第三封测试邮件内容”
},]

List.html控制器


//控制List.html模板的控制器
//把邮件发送给邮件列表模板
function ListController($scope){
$scope.data=messages;
}

解析URL detail.html控制器


//从路由信息(URL解析出来的)获取邮件id 然后找到正确的邮件对象
function DetaiController($scope,$routeParams){
console.log($routeParams)
$scope.mail=messages[$routeParams.id]
}

理解route中的$routeParams 在route配置中:即为捕获url中的参数


function routeURL($scope,$routeParams){
console.log($routeParams)
$scope.routeURL=$routeParams;
}

自此一个简单的angular Amail就编写完毕了