编排的总计器应用,令人侧目的HTML5卡通及源码解
分类:澳门新萄京最大平台

纯 HTML CSS JavaScript 编写的计算器应用

2016/09/26 · CSS, HTML5, JavaScript · 2 评论 · 计算器

原作出处: dunizb   

HTML5单页面手势滑屏切换原理,html5页面手势原理

H5单页面手势滑屏切换是应用HTML5 触摸事件(Touch卡塔尔(قطر‎ 和 CSS3动漫(Transform,Transition卡塔尔(英语:State of Qatar)来落到实处的,效果图如下所示,本文轻松说一下其贯彻原理和根本思路。
1、完毕原理 若是有5个页面,每一种页面占荧屏100%宽,则开创八个DIV容器viewport,将其调幅(width卡塔尔(قطر‎设置为500%,然后将5个页面装入容器中,并让那5个页面平分整个容器,最终将容器的私下认可地方设置为0,overflow设置为hidden,那样显示屏就私下认可展现第八个页面。

XML/HTML Code复制内容到剪贴板

  1. <div id="viewport" class="viewport">    
  2. <div class="pageview" style="background: #3b76c0" >    
  3. <h3 >页面-1</h3>    
  4. </div>    
  5. <div class="pageview" style="background: #58c03b;">    
  6. <h3>页面-2</h3>    
  7. </div>    
  8. <div class="pageview" style="background: #c03b25;">    
  9. <h3>页面-3</h3>    
  10. </div>    
  11. <div class="pageview" style="background: #e0a718;">    
  12. <h3>页面-4</h3>    
  13. </div>    
  14. <div class="pageview" style="background: #c03eac;">    
  15. <h3>页面-5</h3>    
  16. </div>    
  17. </div>   

CSS样式:

XML/HTML Code复制内容到剪贴板

  1. .viewport{    
  2. width: 500%;    
  3. height: 100%;    
  4. display: -webkit-box;    
  5. overflow: hidden;    
  6. pointer-events: none;    
  7. -webkit-transform: translate3d(0,0,0);    
  8. backface-visibility: hidden;    
  9. position: relative;    
  10. }  

登记touchstart,touchmove和touchend事件,当手指在显示屏上海滑稽剧团动时,使用CSS3的transform来实时设置viewport的职责,比如要显得第叁个页面,就安装viewport的transform:translate3d(100%,0,0卡塔尔国就能够, 在那间我们选择translate3d来顶替translateX,translate3d能够积极展开手提式有线电话机GPU加快渲染,页面滑动更流畅。
2、首要思路
从指尖放在荧屏上、滑动操作、再到间隔荧屏是三个全部的操作进程,对应的操作会触发如下事件:
手指放在荧屏上:ontouchstart
手指在显示器上滑动:ontouchmove
手指离开荧屏:ontouchend
大家须求捕获触摸事件的这多个阶段来变成页面包车型客车滑动:
ontouchstart: 起始化变量, 记录手指所在的岗位,记录当前时间

XML/HTML Code复制内容到剪贴板

  1. /*手指放在显示屏上*/    
  2. document.addEventListener("touchstart",function(e){    
  3. 编排的总计器应用,令人侧目的HTML5卡通及源码解析下载。e.preventDefault();    
  4. var touch = e.touches[0];    
  5. startX = touch.pageX;    
  6. startY = touch.pageY;    
  7. initialPos = currentPosition; //此次滑动前的开首地点    
  8. viewport.style.webkitTransition = ""; //撤消动画成效    
  9. startT = new Date(卡塔尔(英语:State of Qatar).getTime(卡塔尔; //记录手指按下的开首时间    
  10. isMove = false; //是还是不是发生滑动    
  11. }.bind(this),false);   

ontouchmove: 获得当前所在地点,总括手指在显示屏上的位移差量deltaX,然后使页面跟随移动

XML/HTML Code复制内容到剪贴板

  1. /*手指在显示器上海滑稽剧团动,页面跟随手指运动*/    
  2. document.addEventListener("touchmove",function(e){    
  3. e.preventDefault();    
  4. var touch = e.touches[0];    
  5. var deltaX = touch.pageX - startX;    
  6. var deltaY = touch.pageY - startY;    
  7. //若是X方向上的位移大于Y方向,则认为是反正滑动    
  8. if (Math.abs(deltaX) > Math.abs(deltaY)){    
  9. moveLength = deltaX;    
  10. var translate = initialPos   deltaX; //当前亟需活动到的任务    
  11. //假诺translate>0 或 < maxWidth,则意味着页面超过边界    
  12. if (translate <=0 && translate >= maxWidth){    
  13. //移动页面    
  14. this.transform.call(viewport,translate);    
  15. isMove = true;    
  16. }    
  17. direction = deltaX>0?"right":"left"; //剖断手指滑动的趋势    
  18. }    
  19. }.bind(this),false);   

ontouchend:手指离开显示屏时,计算荧屏最后停留在哪风流倜傥页。首先计算手指在显示器上的停留时间deltaT,假设deltaT<300ms,则认为是相当的慢滑动,相反则是慢速度滑冰动,飞快滑动和慢速度滑冰动的管理是不一致的:
(1卡塔尔借使是快捷滑动,则让如今页面完整的栖息在显示屏核心(须要总计当前页面还应该有多少供给滑动卡塔尔国
(2卡塔尔(قطر‎假诺是慢速度滑冰动,还亟需剖断手指在荧屏上海滑稽剧团动的间距,假如滑动的离开未有超越荧屏宽度四分之二,则要回降低到上后生可畏页,相反则要停留在现阶段页面

XML/HTML Code复制内容到剪贴板

  1. /*手指离开显示器时,计算最后需求逗留在哪生机勃勃页*/    
  2. document.addEventListener("touchend",function(e){    
  3. e.preventDefault();    
  4. var translate = 0;    
  5. //总计手指在荧屏上停留的日子    
  6. var deltaT = new Date().getTime() - startT;    
  7. if (isMove卡塔尔{ //爆发了左右滑动    
  8. //使用动画片过渡让页面滑动到终极的职责    
  9. viewport.style.webkitTransition = "0.3s ease -webkit-transform";    
  10. if(deltaT < 300卡塔尔国{ //假如停留时间小于300ms,则认为是急速滑动,无论滑动距离是有一些,都停留到下后生可畏页    
  11. translate = direction == 'left'?    
  12. currentPosition-(pageWidth moveLength):currentPosition pageWidth-moveLength;    
  13. //倘诺最终地方抢先界限地点,则停留在边界地方    
  14. translatetranslate = translate > 0 ? 0 : translate; //左边界    
  15. translatetranslate = translate < maxWidth ? maxWidth : translate; //右边界    
  16. }else {    
  17. //借使滑动间隔小于显示屏的百分之七十,则退回到上风流倜傥页    
  18. if (Math.abs(moveLength)/pageWidth < 0.5){    
  19. translate = currentPosition-moveLength;    
  20. }else{    
  21. //借使滑动间隔抢先荧屏的四分之二,则滑动到下生机勃勃页    
  22. translate = direction == 'left'?    
  23. currentPosition-(pageWidth moveLength):currentPosition pageWidth-moveLength;    
  24. translatetranslate = translate > 0 ? 0 : translate;    
  25. translatetranslate = translate < maxWidth ? maxWidth : translate;    
  26. }    
  27. }    
  28. //奉行滑动,让页面完整的显示到显示屏上    
  29. this.transform.call(viewport,translate);    
  30. }    
  31. }.bind(this),false);   

除去,还要计算当前页面是第几页,并安装当前页码

XML/HTML Code复制内容到剪贴板

  1. //计算当前的页码    
  2. pageNow = Math.round(Math.abs(translate) / pageWidth)   1;    
  3. setTimeout(function(){    
  4. //设置页码,DOM操作需求停放子线程中,不然会并发卡顿    
  5. this.setPageNow();    
  6. }.bind(this),100);   

中央的笔触就这一个,当然在实操进程中还会有生龙活虎对细节供给小心,这里就不详细说了,都在代码里能凸显出来。关于HTML5单页面手势滑屏切换原理 我就给大家介绍这么多,希望对大家有所支持!

H5单页面手势滑屏切换是运用HTML5 触摸事件(Touch卡塔尔(英语:State of Qatar) 和 CSS3卡通(Transform,Transition卡塔尔来贯彻的,效...

让人惊叹的HTML5卡通及源码解析下载,

HTML5十分帅,利用HTML5创制动漫简直让我们忘记了那世界上还恐怕有flash的存在。后天大家要享受的局地HTML5动漫片都还能够,有些动漫设计依旧挺独出新裁的。别的,每意气风发款HTML5动画都提供源代码下载,况且我们对源码作一些简短的深入分析。

大器晚成道笔试题

事情发生前不经常看见三个商城的笔试题,标题如下:

用HTML5、CSS3、JavaScript,做一个网页,达成如下图情势总结器

澳门新萄京 1

切切实实要求:

  1. 有且唯有一个文书:index.html。不容许再有此外文件,差别意再有独立的CSS、JS、PNG、JPG文件。
  2. 运作情状为 Google Chrome。
  3. 必需协助标准的四则运算。举例:1 2*3=7。
  4. 请在选拔邮件的48小时内独立完花销测量试验,并还原来邮件。

HTML5画图特效 超酷的笔刷动画

那是后生可畏款基于HTML5的画笔动画,能够选择区别的笔刷形状,笔刷在画布上运动时就能够播放非常灿烂的动漫效果。

核心jQuery代码:

澳门新萄京 2var H = 0; $('.button').bind('mousedown touchstart',function(e) { $('.clicked').removeClass('clicked'); $(this).addClass('clicked'); }); $(document).bind('mousemove touchmove',function(e) { e.preventDefault(); var drawSize = 55; var drawType = $('.clicked').html(); var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive'); var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)]; var xPos = e.originalEvent.pageX; var yPos = e.originalEvent.pageY; $('body').append('<div class="draw">); $('.draw').each(function() { var div = $(this); setTimeout(function() {$(div).remove();},800); }); }); setInterval(function() { if(H<=360) {H ;} else {H=0;} },10); View Code

澳门新萄京 3

在线演示        源码下载

风度翩翩道笔试题引发的八个练手项目

花了少数年华写好的首先版,切合了笔试题的渴求。后来左看右看感觉还是能校正做的更加好,于是给它不仅的改革,加新作用等,那样下去没完没了,利用业余时间一点一点的写,从刚起始的网页版,到后来做响应式的移动版,再到近年来的移动App,短短续续大约写了半年啊。

HTML5喜人的404页面动漫 很逗的机器人

运用HTML5绘制的机器人,还恐怕会动哦。你能够将它看成一个负有创见的404页面。

核心CSS3代码:

澳门新萄京 4@-webkit-keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } @keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } View Code

澳门新萄京 5

在线演示        源码下载

类型地址

最终版的计算器,项目地址和预览图片在 GitHub:。

HTML5/jQuery 3D主题图插件 多样超酷切换动漫

规范图是很守旧的jQuery插件,不过那款宗旨图基于HTML5,动漫特效尤其丰盛。

 

澳门新萄京 6

在线演示        源码下载

功用表明

最后版的效能如下:

  1. 分界面结构接纳CSS3 的 Flex box结构
  2. 置于两套宗旨可切换
  3. 总计历史记录呈现
  4. 左滑右滑能够切换双臂形式(App卡塔尔国
  5. 当输动手提式无线电话机号码后长按约等于号能够拨打手提式有线电电话机号码(App卡塔尔
  6. 本子更新检查(App卡塔尔(英语:State of Qatar)

分界面构造

出于那些项目只是练手,所以采用了HTML5个CSS3本领,也不筹算宽容IE等低版本浏览器,所以直接动用CSS3提供的Flexbox布局方式。并且采纳rem单位来举行自动总计尺寸。

测算总结历史记录显示效果,使用HTML5提供的地头存款和储蓄成效之Local Storage,为了方便使用Local Storage,对它实行了简单的包装(见js/common.js文件)使之key值按自然规律生产,方便管理。

澳门新萄京 7

key由appName id组成,id是自动增进不重复的,能够按id和appName删除一条记下,输入*则整个删减。

打包APP

挪动Web版总计器写完后,又想把她做成APP在手提式有线电电话机上运转,由于自家没用过混合APP诸如ionic之类的框架,所以参谋了刹那间,选用了Hbuild来扩充付出和APP的包装,特别便于。(HBuild).

双臂格局

左滑右滑可以切换双臂方式,那就供给活动端的touch事件了,使用如下代码判别是左滑如故又滑:

JavaScript

/** 单腿情势 */ function singleModel(卡塔尔(英语:State of Qatar){ var calc = document.getElementById("calc"卡塔尔(قطر‎; var startX = 0,moveX = 0,distanceX = 0; var distance = 100; var width = calc.offsetWidth; //滑动事件 calc.addEventListener("touchstart",function(e卡塔尔{ startX = e.touches[0].clientX; }); calc.addEventListener("touchmove",function(e){ moveX = e.touches[0].clientX; distanceX = moveX - startX; isMove = true; }); window.addEventListener("touchend",function(e){ if(Math.abs(distanceX) > width/3 && isMove){ if( distanceX > 0 ){ positionFun("right"); //右滑 }else{ positionFun("left"); //作滑 } } startY = moveY = 0; isMove = false; }); }

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
/** 单手模式 */
function singleModel(){
    var calc = document.getElementById("calc");
    var startX = 0,moveX = 0,distanceX = 0;
    var distance = 100;  
    var width = calc.offsetWidth;
    //滑动事件
    calc.addEventListener("touchstart",function(e){
        startX = e.touches[0].clientX;
    });
    calc.addEventListener("touchmove",function(e){
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    });
    window.addEventListener("touchend",function(e){
        if(Math.abs(distanceX) > width/3 && isMove){
            if( distanceX > 0 ){
                positionFun("right");        //右滑
            }else{
                positionFun("left");          //作滑
            }
        }
        startY = moveY = 0;
        isMove = false;
    });  
}

假定是坐滑,就position:absolut;left:0,bottom:0,再把最外层DIV缩短到十分之八,那样就兑现了左滑计算器收缩移动到左下角。右滑道理雷同。

电话机拨打功效

当输入手提式无线电话机号码后长按相当于号可以拨打手提式有线电话机号码。那一个成效没什么神奇,在活动Web上会对这个看起来像是电话号码的数字管理为电话链接,举例:

  • 7位数字,形如:1234567
  • 带括号及加号的数字,形如:( 86卡塔尔(قطر‎123456789
  • 双连接线的数字,形如:00-00-00111
  • 11位数字,形如:13800138000

兴许还会有别的项指标数字也会被辨认。咱们能够透过如下的meta来开启电话号码的自动识别:

XHTML

<meta name="format-detection" content="telephone=yes" />

1
<meta name="format-detection" content="telephone=yes" />

敞开电话职能

XHTML

<a href="tel:123456">123456</a>

1
<a href="tel:123456">123456</a>

翻开短信成效:

XHTML

<a href="sms:123456">123456</a>

1
<a href="sms:123456">123456</a>

不过,在Android系统上,只可以调用系统的拨号分界面,在iOS上则能调过这一步直接把电话拨打出来。

本子更新检查

在关于页面,有一个本子更新检查开关,就能够检查是还是不是有新本子,这一个效果的规律是发送叁个JSOPN哀告去检查服务器上的JSON文件,比对版本号,如果服务器上的本子比APP的本子高则会提醒有新本子能够下载。

客户端JavaScript代码:

JavaScript

function updateApp(卡塔尔(قطر‎{ //检查新本子 var updateApp = document.getElementById("updateApp"卡塔尔(英语:State of Qatar); updateApp.onclick = function(卡塔尔国{ var _this = this; $.ajax({ type:'get', url:'', dataType:'jsonp', beforeSend : function(){ _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在检查新版本..."; }, success:function(data卡塔尔(قطر‎{ var newVer = data[0].version; if(newVer > appConfig.version){ var log = data[0].log; var downloadUrl = data[0].downloadUrl; if(confirm("检查到新本子【" newVer "】,是或不是立即下载?n 更新日志:n " log)){ var a = document.getElementById("telPhone"); a.href = downloadUrl; a.target = "_blank"; a.click(卡塔尔(英语:State of Qatar); } }else{ alert("你很潮哦,当前早已然是风靡版本!"卡塔尔(قطر‎; } _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新本子"; }, error:function(msg卡塔尔国{ _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新本子"; alert("检查战败:" msg.message卡塔尔(英语:State of Qatar); } }卡塔尔(قطر‎; } }

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
function updateApp(){
    //检查新版本
    var updateApp = document.getElementById("updateApp");
    updateApp.onclick = function(){
        var _this = this;
        $.ajax({
            type:'get',
            url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',
            dataType:'jsonp',
            beforeSend : function(){
                _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在检查新版本...";
            },
            success:function(data){
                var newVer = data[0].version;
                if(newVer > appConfig.version){
                    var log = data[0].log;
                    var downloadUrl = data[0].downloadUrl;
                    if(confirm("检查到新版本【" newVer "】,是否立即下载?n 更新日志:n " log)){
                        var a = document.getElementById("telPhone");
                        a.href = downloadUrl;
                        a.target = "_blank";
                        a.click();
                    }
                }else{
                    alert("你很潮哦,当前已经是最新版本!");
                }
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新版本";
            },
            error:function(msg){
                _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 检查新版本";
                alert("检查失败:" msg.message);
            }
        });
    }
}

服务端JSON:

JavaScript

[ { "version":"3.1.0", "downloadUrl":"", "hashCode":"二〇一六0812224616", "log":"1.新增加切换宗旨作用 n 2.新添双手切换格局功用 n 3.调整UI " } ]

1
2
3
4
5
6
7
8
[
    {
        "version":"3.1.0",
        "downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",
        "hashCode":"20160812224616",
        "log":"1.新增切换主题功能 n 2.新增单手切换模式功能 n 3.调整UI "
    }
]

CSS3各大网址分享开关 带网址Logo小Logo

那么些按键样式极度充裕,而且还富含网址的Logo,那几个超酷的按键都是使用CSS3兑现的。

核心CSS3代码:

澳门新萄京 8.zocial.icon { overflow: hidden; max-width: 2.4em; padding-left: 0; padding-right: 0; max-height: 2.15em; white-space: nowrap; } .zocial.icon:before { padding: 0; width: 2em; height: 2em; -webkit-box-shadow: none; box-shadow: none; border: none; } .zocial:active { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, transparent), to(rgba(0,0,0,.1))); background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 30%, transparent 50%, rgba(0,0,0,.1)); } View Code

澳门新萄京 9

在线演示        源码下载

下个版本布置

脚下3.1.0版本还设有点主题材料:

  1. 是因为JS本人存在计量浮点数精度错过难点,所以那么些标题在项目中允许存在,需求本人去处理这几个难点
  2. 鉴于接受了第三方的天气接口,用了jquery.Ajax方法,所以违背了运用纯原生写的当初的愿景。

就此下个版本的开垦陈设为:

  1. 解决浮点数总结精度难题
  2. 把收获天气音信的jquery.Ajax方法替换为原生JavaScript代码,自身封装JSONP诉求函数
  3. 利用面向对象方式重构应用软件

招待我们到github上来探视,假诺钟爱能够star、watch一下,或提issue。

4 赞 21 收藏 2 评论

澳门新萄京,

澳门新萄京 10

HTML5 SVG环形图表应用 相当酷的数码起初动漫

很有创新意识的HTML5图纸应用,图表是环形的,开首化时的动漫效果也要命不错。

核心jQuery代码:

澳门新萄京 11$(function(){ $("#doughnutChart").drawDoughnutChart([ { title: "Tokyo", value : 120, color: "#2C3E50" }, { title: "San Francisco", value: 80, color: "#FC4349" }, { title: "New York", value: 70, color: "#6DBCDB" }, { title: "London", value : 50, color: "#F7E248" }, { title: "Sydney", value : 40, color: "#D7DADB" }, { title: "Berlin", value : 20, color: "#FFF" } ]); }); /*! * jquery.drawDoughnutChart.js * Version: 0.3(Beta) * Inspired by Chart.js() * * Copyright 2013 hiro * * Released under the MIT license. * */ ;(function($, undefined) { $.fn.drawDoughnutChart = function(data, options) { var $this = this, W = $this.width(), H = $this.height(), centerX = W/2, centerY = H/2, cos = Math.cos, sin = Math.sin, PI = Math.PI, settings = $.extend({ segmentShowStroke : true, segmentStrokeColor : "#0C1013", segmentStrokeWidth : 1, baseColor: "rgba(0,0,0,0.5)", baseOffset: 4, edgeOffset : 10,//offset from edge of $this percentageInnerCutout : 75, animation : true, animationSteps : 90, animationEasing : "easeInOutExpo", animateRotate : true, tipOffsetX: -8, tipOffsetY: -45, tipClass: "doughnutTip", summaryClass: "doughnutSummary", summaryTitle: "TOTAL:", summaryTitleClass: "doughnutSummaryTitle", summaryNumberClass: "doughnutSummaryNumber", beforeDraw: function() { }, afterDrawed : function() { }, onPathEnter : function(e,data) { }, onPathLeave : function(e,data) { } }, options), animationOptions = { linear : function (t) { return t; }, easeInOutExpo: function (t) { var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t; return (v>1) ? 1 : v; } }, requestAnimFrame = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; }(); settings.beforeDraw.call($this); var $svg = $('<svg width="' W '" height="' H '" viewBox="0 0 ' W ' ' H '" xmlns="" xmlns:xlink="), $paths = [], easingFunction = animationOptions[settings.animationEasing], doughnutRadius = Min([H / 2,W / 2]) - settings.edgeOffset, cutoutRadius = doughnutRadius * (settings.percentageInnerCutout / 100), segmentTotal = 0; //Draw base doughnut var baseDoughnutRadius = doughnutRadius settings.baseOffset, baseCutoutRadius = cutoutRadius - settings.baseOffset; var drawBaseDoughnut = function() { //Calculate values for the path. //We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate. var startRadius = -1.570,// -Math.PI/2 segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)), endRadius = 4.7131,// startRadius segmentAngle startX = centerX cos(startRadius) * baseDoughnutRadius, startY = centerY sin(startRadius) * baseDoughnutRadius, endX2 = centerX cos(startRadius) * baseCutoutRadius, endY2 = centerY sin(startRadius) * baseCutoutRadius, endX = centerX cos(endRadius) * baseDoughnutRadius, endY = centerY sin(endRadius) * baseDoughnutRadius, startX2 = centerX

  • cos(endRadius) * baseCutoutRadius, startY2 = centerY sin(endRadius) * baseCutoutRadius; var cmd = [ 'M', startX, startY, 'A', baseDoughnutRadius, baseDoughnutRadius, 0, 1, 1, endX, endY, 'L', startX2, startY2, 'A', baseCutoutRadius, baseCutoutRadius, 0, 1, 0, endX2, endY2,//reverse 'Z' ]; $(document.createElementNS('', 'path')) .attr({ "d": cmd.join(' '), "fill": settings.baseColor }) .appendTo($svg); }(); //Set up pie segments wrapper var $pathGroup = $(document.createElementNS('', 'g')); $pathGroup.attr({opacity: 0}).appendTo($svg); //Set up tooltip var $tip = $('<div class="' settings.tipClass '" />').appendTo('body').hide(), tipW = $tip.width(), tipH = $tip.height(); //Set up center text area var summarySize = (cutoutRadius
  • (doughnutRadius - cutoutRadius)) * 2, $summary = $('<div class="'
  • settings.summaryClass '" />') .appendTo($this) .css({ width: summarySize "px", height: summarySize "px", "margin-left": -(summarySize / 2) "px", "margin-top": -(summarySize / 2) "px" }); var $summaryTitle = $('<p class="' settings.summaryTitleClass '">' settings.summaryTitle '</p>').appendTo($summary); var $summaryNumber = $('<p class="' settings.summaryNumberClass '"></p>').appendTo($summary).css({opacity: 0}); for (var i = 0, len = data.length; i < len; i ) { segmentTotal = data[i].value; $paths[i] = $(document.createElementNS('', 'path')) .attr({ "stroke-width": settings.segmentStrokeWidth, "stroke": settings.segmentStrokeColor, "fill": data[i].color, "data-order": i }) .appendTo($pathGroup) .on("mouseenter", pathMouseEnter) .on("mouseleave", pathMouseLeave) .on("mousemove", pathMouseMove); } //Animation start animationLoop(drawPieSegments); function pathMouseEnter(e) { var order = $(this).data().order; $tip.text(data[order].title ": " data[order].value) .fadeIn(200); settings.onPathEnter.apply($(this),[e,data]); } function pathMouseLeave(e) { $tip.hide(); settings.onPathLeave.apply($(this),[e,data]); } function pathMouseMove(e) { $tip.css({ top: e.pageY settings.tipOffsetY, left: e.pageX - $tip.width() / 2 settings.tipOffsetX }); } function drawPieSegments (animationDecimal) { var startRadius = -PI / 2,//-90 degree rotateAnimation = 1; if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1 drawDoughnutText(animationDecimal, segmentTotal); $pathGroup.attr("opacity", animationDecimal); //draw each path for (var i = 0, len = data.length; i < len; i ) { var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)), endRadius = startRadius segmentAngle, largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0, startX = centerX cos(startRadius) * doughnutRadius, startY = centerY sin(startRadius) * doughnutRadius, endX2 = centerX cos(startRadius) * cutoutRadius, endY2 = centerY sin(startRadius) * cutoutRadius, endX = centerX cos(endRadius) * doughnutRadius, endY = centerY sin(endRadius) * doughnutRadius, startX2 = centerX cos(endRadius) * cutoutRadius, startY2 = centerY sin(endRadius) * cutoutRadius; var cmd = [ 'M', startX, startY,//Move pointer 'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path 'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths) 'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path 'Z'//Cloth path ]; $paths[i].attr("d", cmd.join(' ')); startRadius = segmentAngle; } } function drawDoughnutText(animationDecimal, segmentTotal) { $summaryNumber .css({opacity: animationDecimal}) .text((segmentTotal * animationDecimal).toFixed(1)); } function animateFrame(cnt, drawData) { var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1; drawData(easeAdjustedAnimationPercent); } function animationLoop(drawData) { var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1, cnt =(settings.animation)? 0 : 1; requestAnimFrame(function() { cnt = animFrameAmount; animateFrame(cnt, drawData); if (cnt <= 1) { requestAnimFrame(arguments.callee); } else { settings.afterDrawed.call($this); } }); } function Max(arr) { return Math.max.apply(null, arr); } function Min(arr) { return Math.min.apply(null, arr); } function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } function CapValue(valueToCap, maxValue, minValue) { if (isNumber(maxValue) && valueToCap > maxValue) return maxValue; if (isNumber(minValue) && valueToCap < minValue) return minValue; return valueToCap; } return $this; }; })(jQuery); View Code

澳门新萄京 12

在线演示        源码下载

HTML5Mini音乐播放器 3D翻转播放按键

很有新意的HTML5音乐播放器,并且播放按键还会有3D的卡通片效果,整个播放器也是一定精致。

核心jQuery代码:

澳门新萄京 13// Most of this is all Dave Rupert // See (function(){ $(".play-pause").click(function() { if($(this).hasClass('pausing')){ $(this).removeClass('pausing'); $(this).addClass('playing'); $(this).css("background-image", "url()"); audio.play(); } else if($(this).hasClass('playing')){ $(this).removeClass('playing'); $(this).addClass('pausing'); $(this).css("background-image", "url()"); audio.pause(); } else { $(this).addClass('playing'); $(this).css("background-image", "url()"); audio.play(); } }); var pcastPlayers = document.querySelectorAll('.player-container'); var speeds = [ 1, 1.5, 2, 2.5, 3, 0.5 ] for(i=0;i<pcastPlayers.length;i ) { var player = pcastPlayers[i]; var audio = player.querySelector('audio');/* var play = player.querySelector('.play-pause.playing'); var pause = player.querySelector('.play-pause.pausing');*/ var progress = player.querySelector('.pcast-progress'); var currentTime = player.querySelector('.pcast-currenttime'); var currentSpeedIdx = 0; var toHHMMSS = function ( totalsecs ) { var sec_num = parseInt(totalsecs, 10); // don't forget the second param var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = sec_num - (hours * 3600) - (minutes * 60); if (hours < 10) {hours = "0" hours; } if (minutes < 10) {minutes = "" minutes;} if (seconds < 10) {seconds = "0" seconds;} var time = hours ':' minutes ':' seconds; if (hours <= 1) { var time = minutes ':' seconds; } return time; } audio.addEventListener('loadedmetadata', function(){ progress.setAttribute('max', Math.floor(audio.duration)); duration.textContent = toHHMMSS(audio.duration); }); audio.addEventListener('timeupdate', function(){ progress.setAttribute('value', audio.currentTime); currentTime.textContent = toHHMMSS(audio.currentTime); }); /* play.addEventListener('click', function(){ this.style.display = 'none'; pause.style.display = 'inline-block'; pause.focus(); audio.play(); }, false); pause.addEventListener('click', function(){ this.style.display = 'none'; play.style.display = 'inline-block'; play.focus(); audio.pause(); }, false); */ progress.addEventListener('click', function(e){ audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth); }, false); } })(this); View Code

澳门新萄京 14

在线演示        源码下载

HTML5/CSS3兑现蝙蝠侠人物动漫 蜘蛛侠化身

用CSS3完结的人物拼接动画,效果相当不易。

核心CSS3代码:

澳门新萄京 15@-webkit-keyframes ani-head-1-0 { 0% { -webkit-transform: translate3d(-322.74999999999994px, 121.99999999999994px, 0px); background-color: rgba(53,53,53,1); } 98.912% { -webkit-transform: translate3d(67px, 123px, 0px); background-color: rgba(53,53,53,1); } 100% { -webkit-transform: translate3d(67px, 123px, 0px); background-color: rgba(53,53,53,1); } } @keyframes ani-head-1-0 { 0% { transform: translate3d(-322.74999999999994px, 121.99999999999994px, 0px); background-color: rgba(53,53,53,1); } 98.912% { transform: translate3d(67px, 123px, 0px); background-color: rgba(53,53,53,1); } 100% { transform: translate3d(67px, 123px, 0px); background-color: rgba(53,53,53,1); } } View Code

澳门新萄京 16

在线演示        源码下载

HTML5丰富酷,利用HTML5制作动漫几乎让我们忘记了这世界上还会有flash的存在。前几天我们要享受的有个别...

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:编排的总计器应用,令人侧目的HTML5卡通及源码解

上一篇:澳门新萄京:JS中JSON对象和字符串之间的相互转 下一篇:没有了
猜你喜欢
热门排行
精彩图文