您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • 使用HTML5实现刮刮卡效果

    使用HTML5实现刮刮卡效果

    使用HTML5实现刮刮卡效果
    20150922231834
    引入js代码

    <script type="text/javascript">var bodyStyle = document.body.style;bodyStyle.mozUserSelect = 'none';bodyStyle.webkitUserSelect = 'none';var img = new Image();var canvas = document.querySelector('canvas');canvas.style.backgroundColor='transparent';canvas.style.position = 'absolute';var imgs = ['p_0.jpg','p_1.jpg'];var num = Math.floor(Math.random()*2);img.src = imgs[num];img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { ctx.fillStyle = 'gray'; ctx.fillRect(0, 0, w, h); } function eventDown(e){ e.preventDefault(); mousedown=true; } function eventUp(e){ e.preventDefault(); mousedown=false; } function eventMove(e){ e.preventDefault(); if(mousedown) { if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 10, 0, Math.PI * 2); fill(); } } } canvas.width=w; canvas.height=h; canvas.style.backgroundImage='url('+img.src+')'; ctx=canvas.getContext('2d'); ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h); layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove);});</script>

    下载地址
    预览地址

  • 基于HTML5和CSS的全屏焦点图特效

    基于HTML5和CSS的全屏焦点图特效

    基于HTML5和CSS的全屏焦点图特效
    20150913112627
    引入css js代码文件

    <link href="css/slider.css" rel="stylesheet" type="text/css" /><!--[if lt IE 9]><script src="js/html5.js"></script><![endif]--><script type='text/javascript' src='js/jquery-1.7.2.min.js'></script><script type='text/javascript' src='js/common.js'></script><script type='text/javascript' src='js/slider.js'></script>

    html结构文件

    <header> <div class="header-content home"> <div class="parallax-bg" id="slider-wrap"> <div class="slider parallax-bg" id="slider"> <div class="slider-sections sandbox"> <section class="first"> <img alt="Kendo UI" src="images/home-banner-1.png" /> <div class="text"> <h2> SmartSite Ver 2.2 <br /> 智能网站管理系统 </h2> <p class="copy"> 采用前后台完全分离技术,通过标签(支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等)加模板技术.全站生成纯静态页。 </p> <p class="button"> <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"> Download </a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);" href="http://www.jqueryba.com/"> Learn More </a> </p> </div> </section> <section> <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" /> <div class="text" style="padding-top: 10px;"> <h2> 企业网站管理系统 </h2> <p class="copy"> 单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城,在线支付、配送、支付方式管理、广告等模块。 </p> <p class="button"> <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"> Download </a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);" href="http://www.jqueryba.com/"> Learn More </a> </p> </div> </section> <section> <img src="images/home_banner_web-q2.png" alt="Kendo UI" /> <div class="text"> <h2> 智能移动网站管理系统 </h2> <p class="copy"> 基于jquery.Mobile、HTML5技术框架,前后台完全分离,采用标签加模板技术,全站生成纯静态页。 </p> <p class="button"> <a href="http://www.jqueryba.com/" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);"> Download </a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://www.jqueryba.com/']);" href="http://www.jqueryba.com/"> Learn More </a> </p> </div> </section> </div> </div> <a class="slider-prev" href="javascript: void(0)"> ? </a> <a class="slider-next" href="javascript: void(0)"> ? </a> </div> </div></header>

    下载地址
    预览地址

  • html5圆形进度条加载按钮效果

    html5圆形进度条加载按钮效果

    html5圆形进度条加载按钮效果
    20150830140453

    <script type="text/javascript" src="js/classie.js"></script><script type="text/javascript" src="js/uiProgressButton.js"></script><script type="text/javascript">[].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) { new UIProgressButton( bttn, { callback : function( instance ) { var progress = 0, interval = setInterval( function() { progress = Math.min( progress + Math.random() * 0.1, 1 ); instance.setProgress( progress ); if( progress === 1 ) { instance.stop( pos === 1 || pos === 3 ? -1 : 1 ); clearInterval( interval ); } }, 150 ); } } );} );</script>

    下载地址
    预览地址

  • jquery+html5烂漫爱心表白动画特效

    jquery+html5烂漫爱心表白动画特效

    jquery+html5烂漫爱心表白动画特效
    20150416222707
    部分jQuery代码

    <script type="text/javascript"> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var together = new Date(); together.setFullYear(2013, 2, 28); together.setHours(20); together.setMinutes(0); together.setSeconds(0); together.setMilliseconds(0); if (!document.createElement('canvas').getContext) { var msg = document.createElement("div"); msg.id = "errorMsg"; msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; document.body.appendChild(msg); $("#code").css("display", "none") $("#copyright").css("position", "absolute"); $("#copyright").css("bottom", "10px"); document.execCommand("stop"); } else { setTimeout(function() { startHeartAnimation(); }, 5000); timeElapse(together); setInterval(function() { timeElapse(together); }, 500); adjustCodePosition(); $("#code").typewriter(); }</script>

    下载地址
    预览地址

  • HTML5学习教程六 HTML5 Canvas

    HTML5学习教程六 HTML5 Canvas

    HTML5学习教程HTML5 Canvas

    canvas 元素用于在网页上绘制图形。
    什么是 Canvas?
    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
    画布是一个矩形区域,您可以控制其每一像素。
    canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    下面jQuery吧创建 Canvas 元素
    向 HTML5 页面添加 canvas 元素。
    规定元素的 id、宽度和高度:

    <canvas id="myCanvas" width="200" height="100"></canvas>

    通过 JavaScript 来绘制
    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

    JavaScript 使用 id 来寻找 canvas 元素:

    var c=document.getElementById("myCanvas");

    然后,创建 context 对象:

    var cxt=c.getContext("2d"); getContext("2d")

    对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    下面的两行代码绘制一个红色的矩形:

    cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); 

    fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
    理解坐标
    上面的 fillRect 方法拥有参数 (0,0,150,75)。
    意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
    如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
    ct_html5_canvas_coordinates

    <!DOCTYPE HTML><html><head><style type="text/css"> body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;}</style><script type="text/javascript"> function cnvs_getCoordinates(e){x=e.clientX;y=e.clientY;document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";} function cnvs_clearCoordinates(){document.getElementById("xycoordinates").innerHTML="";}</script></head><body style="margin:0px;"><p>把鼠标悬停在下面的矩形上可以看到坐标:</p><div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div><br /><br /><br /><div id="xycoordinates"></div> </body></html>

    Canvas 实例:理解坐标
    实例:把鼠标悬停在矩形上可以看到坐标
    更多 Canvas 实例
    下面的在 canvas 元素上进行绘画的更多实例:
    实例 - 线条
    通过指定从何处开始,在何处结束,来绘制一条线:
    Canvas 实例:线条
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

    亲自试一试

    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script></body></html>

    实例 - 圆形
    通过规定尺寸、颜色和位置,来绘制一个圆:
    ct_html5_canvas_circle
    Canvas 实例:圆形
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script></body></html>

    亲自试一试

    实例 - 渐变
    使用您指定的颜色来绘制渐变背景:
    ct_html5_canvas_gradient
    Canvas 实例:渐变
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script></body></html>

    亲自试一试

    实例 - 图像
    把一幅图像放置到画布上:
    ct_html5_canvas_image
    Canvas 实例:图像
    JavaScript 代码:

    <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="flower.png"cxt.drawImage(img,0,0);</script>

    canvas 元素:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

    亲自试一试

    <!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script></body></html>
  • 移动前端制作之自适应制作

    移动前端制作之自适应制作

    随着移动前端的手机屏幕分辨率越来越多,自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况,而制作人员则需要考虑如何自适应布局等等。

    我先从设计的角度来阐述这个问题,首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定,如果制作人员采用响应式布局(稍后会介绍此布局)的制作方案的话,则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化(稍后会介绍此布局)来进行布局制作的话,则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。

    一、响应式布局

    相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      <link rel=”stylesheet” type=”text/css”media=”screen and (max-device-width: 400px)”href=”tinyScreen.css” />

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

     <link rel=”stylesheet” type=”text/css”media=”screen and (min-width: 400px) and (max-device-width: 600px)”href=”smallScreen.css” />

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

     @import url(“tinyScreen.css”) screen and (max-device-width: 400px);

    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

      @media screen and (max-device-width: 400px) {.column { float: none; width:auto;}#sidebar { display:none;}}

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    以上所述就是响应式布局,主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵活,一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是,设计成本和制作成本都较高,需要做不同的设计模版和页面模版,花费的时间较长。

    二、高宽最大化

    所谓的高宽最大化是我自定义的名称,其意思是说,只设计一个模版,这个模版无论是从宽度上还是高度上,都做成最大比例的设计图,例如:IOS的iphone系列它们的显示比例宽高之比为:2:3。iphone5显示比例约小些。而安卓系列品牌较杂,不同品牌不同的分辨率,即使同一品牌不同型号也有不同分辨率的。这个很纠结。

    但大体上可以分为。2:3、3:4、3:5这三种比值。所以,为了兼容所有的浏览器,在设计图的时候要采用比值最小的为基本蓝图。即3:5的比例,也就是说以高度最高的为基本蓝图。为什么要这么做?以下来解释:

    这里需要用到CSS3的几个重要属性即:

    -webkit-background-size:100% 100%;

    此属性为背景尺寸自动100%进行平铺和拉伸,我们可以使用这个尺寸来进行设置。第一个100%为X轴,第二个100%为Y轴。我们可以把Y轴的比例设置成auto。同时配合background-position属性来使用就可以达到自适应目的。如果我们想取图的上半部分则可以设置background-position:top;即可。这样当设计图做成3:5的分辨率时就会可以适应所有手机浏览器,3:5的手机自然是全屏。而2:3或是3:4的手机浏览器有了以上两种CSS样式控制就可以做到宽度全屏。而高度则根据background-position:top;取图的上半部分从而也是全屏(只是高度从上往下取到4,而未到5)。举个实际像素大家就明白了。比如一张效果图是320*516像素的。3:5高度的就是320*516,而2:3比例的则取图的320*480部分。下面的高度36像素就不取了。用这种方法达到全屏自动适应的目的。而内容部分高度和宽度都使用100%或是auto来进行设置即可。字体样式则采用em而非px。就可以了。

    此方法有些笨拙,但只需要做一版就可以了。相比较前者省时一些。但效果不如前者好。各有利弊需要根据实际项目而酌情选定方案。

  • HTML5布局教程

    HTML5布局教程

    html5基本布局
    1

    html5结构代码

    <!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header> <hgroup> <h1>html5结构代码</h1> <h2>HTML5布局教程</h2> </hgroup></header><nav> <ul> <li></li> <li></li> </ul> <</nav><section> <article></article> <aside></aside></section><section></section><footer></footer></body></head>

    html5详细页布局
    2
    html5结构代码

    <!DOCTYPE html><htmlang = "en"><head><meta charset = "utf-8"><title>HTML5 Demo</title><body><header> <hgroup> <h1>HTML5布局教程</h1> <h2>html5详细页布局</h2> </hgroup></header><nav> <ul> <li></li> <li></li> </ul> <</nav><article> <hgroup></hgroup> <section></section></article><aside></aside><footer></footer></body></head>

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!