diaoshifei4492-优快云博客

转载 WEB前端开发学习----12. JavaScript 选项卡效果

选项卡无处不在，记录一个简单的JS实现方法, 仿网易效果。当两个边框紧挨时，会变粗, 颜色也会变深，解决办法就是：margin-left:-1px, 按需修改top,left,right,bottom.[html]view plaincopy<!doctypehtml><html><h...

2014-12-22 23:19:00 141

转载 WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见。实现起来也不难。记录一下今天实现的简单效果。拖拽演示快速拖动时，会出现问题，以后修改.说白了，就是3个点击事件。1. 按下鼠标左键，触发点击事件，此时记录下可以得到鼠标相对于拖动控件的位置（当前鼠标位置-控件位置）；2. 拖动鼠标，触发移动事件，可以计算出鼠标移动的距离（当前鼠标位置-之前算出的相对位置），也就是拖拽控件所移动的距离；3....

2014-12-22 23:10:00 201

转载 WEB前端开发学习----10. canvas实现画板的两个方法

方法1：查看演示点击鼠标作画此方法就是鼠标移动的时候不停的画小圆点，然后用等粗的线将小圆点串起来（有点类似于珍珠项链）。因为是小圆点，所以效果要比方法2好，比较平滑。方法2：查看演示点击鼠标作画这个方法很容易理解，就是不断的将鼠标所在的位置用线段连起来。缺点是不够平滑，尤其是粗线条的时候。方法1：[html]view plaincopy...

2014-12-22 23:04:00 246

转载 WEB前端开发学习----9. 使用canvas来画个时钟

canvas元素在html5中的重要性非同一般。配合JS让我们实现了在浏览器页面中作画的强大功能。不再单单依靠图片，flash等外部文件，减少http请求，从而网页加载速度更加快捷。简单的线段：看个小演示 canvas小房子不用函数累死人。。。。旋转：使用提供的rotate()方法。需要注意的是，在旋转前，应该重新定位原点。一般来说将要旋转的图像的端点重...

2014-12-22 22:56:00 158

转载 WEB前端开发学习----8. Html5一些新增标签

先看一张图明显看出Html5的页面布局方式要比html4.0 div+css传统布局模式简洁许多，同时对搜索引擎更加友好。语义化标签的好处就不多说了。说几个有意思的新增标签：<meter></meter> 显示一个测量计，可用于温度，气压等meter演示<progress><progress/> 显示一个进度条，配...

2014-12-22 22:49:00 128

转载 WEB前端开发学习----7.JavaScript 中 var 的重要性

javascript 是弱数据型语言，也就是说声明变量时不需要指定数据类型。而是在执行时由浏览器中的js引擎来决定。一般来说，我们需要用var来声明变量，但是写不写有什么区别呢？先看一段代码：[html]view plaincopy<scripttype="text/javascript">vara=3;f...

2014-12-22 22:47:00 159

转载 WEB前端开发学习----6.CSS 和 JS 在html的使用方法

CSS的导入总共有四大方法：1. 行内式：直接在html标签元素内嵌入css样式（不推荐）2.嵌入式：在html头部head部分内插入style声明3.导入式：使用@import引用外部CSS文件方法：<style type="text/css">@import "mystyle.css";</style>4.链接式：使用link来调用外部的css...

2014-12-21 23:23:00 146

转载 WEB前端开发学习----5.理解 CSS 浮动float

首先需要明白两个概念：内联元素，块元素。内联元素：也叫做行内元素，可以容纳文字或其他内联元素。内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度，不会进行换行。常见的内联元素：<span></span>, <a></a>, <img></img>, <font></f...

2014-12-21 22:41:00 135

转载 WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果

想必大家都玩过网页游戏吧。随着HTML5的普及，浏览器+云端的web app成为了未来的趋势。很多效果都离不开JavaScript。所以说要想进行web开发，JavaScript一定得学好。那网页游戏中是怎么实现人物的移动效果呢，今天分享一个很基础的简单方法。效果图如下：点击上边的按钮，暴走小人开始向右移动。HTML+CSS部分非常简单。就不多说了。...

2014-12-21 22:22:00 189

转载 WEB前端开发学习----3.HTML表单form标签

什么是表单？表单就是用来搜集不同类型的用户输入。比如我们登录时输入的登录名，密码。再比如我们点击登录按钮，删除按钮等等都算是表单。表单是一个包含表单元素的区域，包括文本域，下拉菜单，复选框，单选框等等。在html文档中，我们使用<form></form>标签来包含表单元素。form标签有两个属性需要注意下，一个是action，另一个是met...

2014-12-21 22:17:00 235

转载 WEB前端开发学习----2.HTML表格table标签

[html]view plaincopycss没用流行之前，网页都是用表格，也就是table标签制作的。虽然现在不用table做网页了，但是我们还是应该掌握这个标签。</span>先给出最表格的基本格式：[html]view plaincopy<table><tr&...

2014-12-21 22:14:00 193

转载 WEB前端开发学习----1.HTML基础

1.HelloWorld!首先说一下html的基本格式，是必须要有的。[html]view plaincopy<html><head></head><body></body></html></span&g...

2014-12-21 22:06:00 151

转载 WEB前端开发学习----简介

放暑假没事，看到网上关于HTML5 和 CSS3的讨论很多。所以想要趁暑假学习一下web前端。由于HTML与CSS入门比较轻松，所以我认为可以同时进行HTML, CSS和JavaScript 的学习。今天是第一天的学习记录。全是大白话方便理解。 1 什么是web前段？我们看到的网站一般分为两部分，第一部分是浏览器和用户之间的交流，也称为前端（front...

2014-12-21 21:53:00 108

转载 Json-lib使用——JSONObject与JSONArray

1.从Object到String要先用Object对象构造一个JSONObject或者JSONArray对象，然后调用它的toString()方法即可（1）示例一1 Book book=new Book();2 book.setName("Java");3 book.setPrice(52.3f);4 JSONObject object=JSONObject.fromObj...

2014-12-19 17:11:00 122

转载 jquery操作select(取值，设置选中）

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。比如<select class="selector"></select>1、设置value为pxx的项选中 $(".selector").val("pxx");2、设置text为pxx的项选中 $(".selector").find("optio...

2014-12-19 15:26:00 111