jQuery Code:
$(document).ready(function(){
var canvas = $('#myCanvas');
var context =
canvas.get(0).getContext('2d');
$(window).resize(resizeCanvas);
function resizeCanvas(){
canvas.attr('width',$(window).get(0).innerWidth);//设置canvas宽度
canvas.attr('height',$(window).get(0).innerHeight);//设置canvas高度
context.fillRect(0,0,canvas.width(),canvas.height());//绘制与canvas相同尺寸的矩形
}
resizeCanvas();//调用resizeCanvas函数，页面首次加载时执行一次初始化
});
Css Code:
*{margin:0;padding:0;}
html,body{height:100%;width:100%;}
canvas{display:block;}
Html Code:
<canvas id='myCanvas'></canvas>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>content</title>
<style>
.string
p:after{margin-left:-16px;background:#fff;content:'是';color:#f00;}
.attr p:after{content:attr(title);}
.url p:before{content:url(star.gif); }
.test ol{margin:16px 0;padding:0;list-style:none;}
.counter1 li{counter-increment:testname;}
.counter1
li:before{content:counter(testname);color:#f00;font-family:georgia,serif,sans-serif;}
.counter2 li{counter-increment:testname2;}
.counter2
li:before{content:counter(testname2,lower-roman);color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 ol ol{margin:0 0 0 28px;}
.counter3 li{padding:2px 0;counter-increment:testname3;}
.counter3
li:before{content:counter(testname3,decimal)'.';color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 li li{counter-increment:testname4;}
.counter3 li li:befo
为了我们的页面结构不被这一“先进”功能所破坏，有时我们需要关闭它，以下两种方法都可以：
1. 通过 resize 属性禁止对元素进行缩放。
textarea{ resize:none;}
2. 限制文本框的最大以及最小宽、高。
textarea{ max-height:100px; min-height:100px; height:100px;
max-width:200px; min-width:200px; width:200px;}
注：此法不能去掉右下脚可拖动样式。
=========================================可爱的分隔线=======================================
有关闭就有允许这一属性存在的情况，那么如何对其它元素应用它呢？
.divresize{ border:1px solid #eee; height:100px; overflow:auto;
resize:both; width:200px;}
注：缩放功能适用于任意获得'overflow'条件的容器。也就是要配合overflow属性，才起作用。
Firefox、Safari、Chrome允许元素的缩放,但尚未完全支持，目前只允许双向调整。CSS3允许你将这个属性应用到任意元素，这将使缩放这个功能拥有跨浏览器的支持。
var $divpf = $('#divperformance');
var $divpfli = $('#divperformance ul li');
var $divpfdiv = $('#divperformance div');
$divpfli.eq(0).addClass('on');
$divpfli.eq(0).css('marginLeft','0');
$divpfdiv.eq(0).addClass('on');
$divpfli.click(function(){
var index =
$divpfli.index(this);
$(this).addClass('on').siblings().removeAttr('class');
var imgSrc =
$(this).find('img').attr('src');
$divpfli.find('img').each(function(){
var
imgSrc2 = $(this).attr('src');
var i2 =
imgSrc2.lastIndexOf('.');
(2012-03-23 15:58)
已婚主妇是不是都有吝啬的本能
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html;
charset=utf-8' />
<title>气泡提示</title>
<style type='text/css'>
<!--
.box{ background:#ccc; height:200px; left:100px; position:relative;
top:100px; width:200px;}
.box em{ display:block; height:0; overflow:hidden;
position:absolute; width:0;}
.sstop{ border:6px solid #ccc; border-color:#ccc #fff;
border-width:0px 6px 6px 6px; margin-top:-6px; right:20px;
top:0;}
.ssright{ border:6px solid #ccc; border-color:#fff #ccc;
border-width:6px 0px 6px 6px; bottom:20px; margin-right:-6px;
right:0;}
.ssbottom{ border:6px solid #ccc; border-color:#ccc #fff;
border-width:6px 6px 0px 6px; bottom:0; left:20px;
margin-bottom:-6px;}
.ssleft{ border:6px solid #ccc;
(2012-03-23 11:23)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Canvas Primer - Example: drawImage</title>
<script type='text/javascript'>
function dd(){
var elem = document.getElementByIdx_x_x('myCanvas');
if (!elem || !elem.getContext) {
return;
}
var context = elem.getContext('2d');
if (!context || !context.drawImage) {
return;
}
var img = new Image();
function drawImage(){
// Original resolution: x, y.
context.drawImage(this, 0, 0);
// Now resize the image: x, y, w, h.
context.drawImage(this, 160, 0, 120, 70);
// Crop and resize the image: sx, sy, sw, sh,
dx, dy, dw, dh.
context.drawImage(this, 8, 20,
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'
width='1280' height='800' id='main' align='middle'>
<param name='movie' value='main.swf'
/>
<param name='quality' value='high'
/>
<param name='bgcolor' value='#ffffff'
/>
<param name='play' value='true' />
<param name='loop' value='true' />
<param name='wmode' value='window'
/>
<param name='scale' value='showall'
/>
<param name='menu' value='true' />
<param name='devicefont' value='false'
/>
<param name='salign' value='' />
<param name='allowScriptAccess'
value='sameDomain' />
<!--[if !IE]>-->
<object type='application/x-sho
本文是基于Opera开发团队的
一篇文章翻译修改而成的，建议第一次接触WebGL概念的朋友阅读本文，可以对WebGL技术有一个整体的了解。这不是一个WebGL教程，只相当于WebGL的百科条目（实际上目前中文维基百科和百度百科对WebGL的介绍都不够好）。
http://www.hiwebgl.com/?p=628#WebGL-4
添加到我的博客
加载中…
