- 博客(70)
- 收藏
- 关注
RSS订阅原创 git
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000http://blog.youkuaiyun.com/hustpzb/article/details/8230454/
2016-12-03 16:29:25
444
原创 CSS 的overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 这是一个常用的div写法，下面我们来书写样式。大家可以
2016-06-14 19:47:18
948
原创 jquery-尺寸
jquery-尺寸$(document).ready(function(){// width和height// $("button").click(function(){// var txt="";// txt+="the width of div:"+$("div").width()+" ";// txt+="the height of div:"+$("di
2016-05-21 14:18:51
375
原创 jquery-设内容和属性的回调函数
//设置内容的回调函数 // $(document).ready(function(){// $("#btn1").click(function(){// $("#test1").html(function(i,text){// return("the old text:"+text+" "+"the new text:hello world!(index:"+i+")"
2016-05-20 15:26:02
905
原创 jquery动画-animate()
1.jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫
2016-05-19 20:44:18
474
原创 jquery滑动
1.jQuery slideDown() 方法jQuery slideDown() 方法用于向下滑动元素。语法：$(selector).slideDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。实例：
2016-05-19 20:21:01
476
原创 jquery效果-淡入与淡出效果
1.jQuery fadeIn() 用于淡入已隐藏的元素。语法：$(selector).fadeIn(speed,callback);实例：$(document).ready(function(){$("input").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("sl
2016-05-19 18:47:23
495
原创 jquery效果-隐藏与显示
1.语法：$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。2.jQuery toggle()通过 j
2016-05-19 12:03:24
284
原创 jquery事件
1.jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 在上面的例子中，当按钮的点击事件被触发时会调
2016-05-19 10:47:10
341
原创 jquery选择器
jquery选择器1.jquery元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有 class="intro" 的 元素。 $("p#demo") 选取所有 id="demo" 的 元素。 2.jquery属性选择器 jQuery 使用 XPa
2016-05-19 10:03:21
273
原创 jquery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作隐藏所有的元素实例//隐藏当前的html元素// $(document).re
2016-05-18 21:19:47
342
原创 jqueryclick事件-隐藏与显示
jquery的隐藏与显示$(function(){$("document").ready(function(){$("input").click(function(){$("p").hide();});});});This is a heading This is a paragraph. This is an
2016-05-18 20:46:57
962
原创 jquery-实现div层逐渐显现出来
实现层逐渐显现出来$(function(){$("#btn").click(function(){//按钮的单击事件$("#div1").show(1000);//将层逐渐放大出来，显示过程的时间为1000毫秒});});hello world!
2016-05-18 20:35:27
2614
原创 html5-向服务器端发送数据
服务器发送事件获得服务区器的更新if(typeof(EventSource)!=="undefined"){var source=new EventSource("123.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=even
2016-05-18 17:56:57
2094
原创 html5-在网页中来回拖放图片
在网页中来回拖放图片 #div1,#div2{ float:left; width:200px; height:400px; margin:10px; padding:10px; border:1px solid #aaaaaa; }
2016-05-18 17:00:19
1252
原创 html5-在网页中拖放文字
在网页中拖放文字body{font-family: "微软雅黑";}div.drag{background-color: #acf;border:1px solid #666;cursor:move; cursor:pointer;height:100px;width:100px;margin:10px;float:left;}div
2016-05-18 16:42:41
858
原创 html5实现拖放图片
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元
2016-05-18 14:24:31
674
原创 html5-创建web wroker计时器
创建web worker计数器var w;function startWorker(){if(typeof(Worker)!=="undefined"){if(typeof(w)=="undefined")w=new Worker("js/worker.js");w.onmessage=function(event){document.getElementById(
2016-05-17 17:45:01
995
原创 html5线程嵌套-子进程中的数据交互
单线程嵌套var worker=new Worker("14-3.js");//调用主线程worker.postMessage("");//从线程中取得计算结果worker.onmessage=function(event){ if(event.data!=""){ var h;//行号 var l;//列号 var tr; v
2016-05-17 17:23:51
493
原创 html5线程嵌套-单线程嵌套
单线程嵌套var worker=new Worker("14-1.js");worker.postMessage("");//从线程中取得计算结果worker.onmessage=function(event){ if(event.data!=""){ var h;//行号 var l;//列号 var tr; var td;
2016-05-17 16:56:36
537
原创 html5-web workers-前后台线程交互
实现前台和后台的线程数据交互var intArray=new Array();//产生一个随机数组var intStr="";//将随机数组用字符串进行连接 //生成200个随机数 for(var i=0;i intArray[i]=parseInt(Math.random()*200); if(i!=0){ intStr+=";";//用
2016-05-17 15:38:37
1260
原创 html5本地数据库-web留言本
var datatable=null;var db=openDatabase("myData","1.0","my database",2*1024*1024);//创建一个数据库function init(){datatable=document.getElementById('datatable');showAllData();}function removeAllDa
2016-05-16 20:50:56
522
原创 html5本地存储-遍历以及清空数据
//新建对象 localStorage.name="学习html5新技术-本地存储："; document.write(localStorage.name); //访问网站计数 if(localStorage.count) localStorage.count=Number(localStorage.count)+1; else localStorage.
2016-05-12 21:10:11
938
原创 html5web存储
1.sessionStorage()针对session进行数据存储，关闭浏览器窗口后，数据会自动删除sessionStorage.abc="";2.localStorage()存储的数据没有时间限制，关闭网页再次打开网页，数据仍然可用。localStorage.abc="";//创建对象以及访问网站记录方面的区别1.sessionStorages
2016-05-12 19:24:39
287
原创 html5web通信-跨文档消息传输
//1.htmlwindow.onload=function(){document.getElementById('title').innerHTML='页面在'+document.location.host+'域中，且每过1秒向跨文档消息传输2.html发送一个消息！';//定时向另外一个不确定域的文件发送消息setInterval(function(){
2016-05-12 19:15:15
774
原创 html5在网页中调用百度地图
在网页中调用百度地图 --> function init(){if(navigator.geolocation){//获取当前地理位置navigator.geolocation.getCurrentPosition(showposition,showerror);}else{alert("您的浏览器不支持获取地
2016-05-12 14:32:55
2023
原创 html5获取地理位置
获取地理位置坐标:var geo=document.getElementById('geolocation');function getlocation(){if(navigator.geolocation){navigator.geolocation.getCurrentPosition(showposition,showerror);}else{geo.in
2016-05-11 21:24:55
413
原创 html5绘制火柴棒人物
function draw(id){var c=document.getElementById('canvas');var cxt=c.getContext("2d");cxt.beginPath();//开始绘图路径cxt.arc(100,50,30,0,Math.PI*2,true);//绘制一个圆形cxt.fillStyle="black";cxt.fill();
2016-05-11 17:45:29
1331
原创 html5-Adidas图标绘制
绘制图形function draw(id){var c=document.getElementById('canvas');var cxt=c.getContext("2d");//保存当前绘图状态cxt.save();//开始绘制打钩的轮廓cxt.beginPath();//创建开始绘图路径cxt.moveTo(53,0);//绘制上半部分曲线cxt.
2016-05-11 12:55:18
1226
原创 html5保存文件
保存文件function draw(id){var c=document.getElementById(id);if(c==null)return false;var cxt=c.getContext("2d");cxt.fillStyle="aqua";cxt.fillRect(0,0,c.width,c.height);cxt.fillStyle="yell
2016-05-11 12:30:08
696
原创 html5图形的保存与huif
图形的保存与恢复function draw(id){var c=document.getElementById(id);if(c==null)return false;var cxt=c.getContext("2d"); cxt.fillStyle="yellow"; cxt.save(); cxt.fillRect(50,50,100,100);
2016-05-10 21:16:39
440
原创 html5绘制文字
绘制文字function draw(id){var c=document.getElementById(id);if(c==null)return false;var cxt=c.getContext("2d"); cxt.fillStyle="blue"; cxt.font="bold 60px 黑体"; cxt.textAlign="center
2016-05-10 20:55:01
435
原创 html5处理图像-像素处理
像素处理function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");var img=new Image();img.src="img/1.jpg";img.onload=function(){cxt.d
2016-05-10 20:28:28
650
原创 html5使用图像-图像裁剪
图像裁剪function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");cxt.fillStyle="aqua";cxt.fillRect(0,0,600,600);var img=new Im
2016-05-09 21:23:36
853
原创 html5使用图像-图像平铺
使用图像-图像平铺function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");var img=new Image();img.src="img/11.jpg"; img.onl
2016-05-09 20:37:05
2911
原创 html5使用图像-绘制图像
使用图像function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");var img=new Image();img.src="img/11.jpg";// cxt.drawImage(img,0,0);//
2016-05-09 20:27:41
511
原创 html5创建变换图形-阴影图形
绘制带阴影的图形function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");cxt.shadowOffsetX=15;cxt.shadowOffsetY=15;cxt.shadowColor="aqua";
2016-05-09 20:09:17
320
原创 html5图形组合
图形的组合 function draw(id){ var c=document.getElementById(id); var cxt=c.getContext("2d"); var oprtns=new Array( "source-atop", "source-in", "source-out", "source-over", "des
2016-05-08 21:51:25
971
原创 html5绘制变换图形-旋转图形
图形的旋转function draw(id){var c=document.getElementById('canvas');if(c==null)return false;var cxt=c.getContext("2d");cxt.fillStyle="aquamarine";cxt.fillRect(0,0,400,300);cxt.translate(2
2016-05-08 21:17:19
1546
原创 html5绘制渐变图形-图形缩放
图形的缩放 function draw(id){ var c=document.getElementById(id); var cxt=c.getContext("2d"); cxt.fillStyle="aqua";//绘制大的矩形的颜色 cxt.fillRect(0,0,400,300); cxt.translate(200,50); cxt.fi
2016-05-08 20:55:14
436
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人