自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

freesky的专栏

共同学习,共同进步。

  • 博客(64)
  • 资源 (3)
  • 收藏
  • 关注

原创 css实现对号小图标

.h {    position: relative;    width: 80rpx;    height: 80rpx;    background-color: rgba(0, 0, 0, 0.4);    z-index: 5;}.h::before {    content: '';    position: absolute;    wi

2018-01-25 15:15:20 6462

原创 css js html 实现滚动字幕

滚动字幕        字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~ #affiche {    color: red;    display: block;    width: 96%;   

2018-01-22 16:15:50 7485 1

转载 Web移动端Fixed布局的解决方案

Web移动端Fixed布局的解决方案    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。这篇文章解决了这个问题,是一个不错的方法。Web移动端Fixed布局的解决方案

2017-01-02 22:41:42 637

原创 Javascript的伪数组

Javascript的伪数组  在Javascript中什么是伪数组? 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。 1.典型的是函数的 argument参数, 2.像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。 

2016-10-06 15:11:39 2397

原创 webpack构建react项目和处理组件的依赖

webpack构建react项目和处理组件的依赖webpack的简介:  是facebook另一个神器,与react配合开发是目前web前端最主流的技术从诞生开始就是瞄准了目前的大型单页面app的开发1.能够实现管理模块依赖2.代码分割,资源压缩3.抽取公共模块的功能首先应该有nodejs的环境:1.通过npm安装webpack  n

2016-09-29 22:01:24 3885

原创 angularjs路由实现导航栏

angularjs路由实现导航栏第一种: 路由 a{ text-decoration:none; } 首页 公司简介 关于 联系我们 var app = angular.module('myApp',["ngRoute"]); app.confi

2016-09-27 22:14:04 5358

原创 React属性传递

React属性传递    属性:属性是在一个组件被声明的时候就被(父组件)赋予的,并且不可以被修改.属性被传递的方式一般是在组件被调用的时候被传,除了可以传递字符串以外,还可以传,对象,数组.  属性的传递主要有两种方法:1. 属性的设置和传递(键值对设置):2.展开形式设置propsvarobj={name:"1",attr:"00

2016-09-27 22:03:06 2677

原创 React动态添加事件

react事件 React .lala{ color:red; } var event={ Click:function(){ alert("点我干嘛?") }, Touch:function

2016-09-26 22:25:12 7386

原创 React给添加元素增加样式

React给添加元素增加样式第一种方法: React .lala{ color:red; font-size: 40px; } var Hello=React.createClass({ render

2016-09-26 22:16:55 17074

原创 ionic 下拉刷新

ionic 下拉刷新 下拉刷新 body{ cursor: pointer; } var my = angular.module('starter', ['ionic']) my.run(function($ionicPlatform) { $ionicPl

2016-09-24 22:14:02 525

原创 ionic 的 Drg拖动事件

ionic 的 Drg拖动事件 Drg拖动事件 body{ cursor: pointer; } var my=angular.module('starter', ['ionic']) my.run(function($ionicPlatform) { $ionicPlatform

2016-09-24 22:09:27 3060

原创 js实现百度搜索接口及链接功能

js实现百度搜索接口及链接功能 anchor *{ margin:0; padding:0; } #wei{ width:500px; height:600px; margin:0 auto; border:0px solid gray; } #wei input{ width:476

2016-09-22 21:55:33 8931

原创 angularjs实现百度的搜索接口及链接的实现

angularjs实现百度的搜索接口及链接功能 搜索 *{ margin:0; padding:0; } #wei{ width:500px; height:600px; margin:0 auto; border:0px solid gray; } #wei input{ width

2016-09-22 21:50:45 2462

原创 angullarjs实现锚点楼层跳转

angullarjs实现锚点楼层跳转 anchor #wei div{ width:100%; height:720px; background: red; color:#fff; text-align:center; line-height: 720px; margin:20px; font-size

2016-09-22 21:44:02 1753

原创 angularjs实现拖拽

angularjs实现拖拽 drag *{ padding:0; margin:0; } .wei{ width:100px; height:100px; background: red; position:absolute; cursor: pointer; /*left:0;top:0;*/

2016-09-21 21:59:40 7198

原创 angularjs实现tab切换

angularjs实现tab切换 *{ margin: 0; padding: 0; } .box{ width:300px; margin:20px auto; height:200px; } #tab1 .first{ background: #f40; color:#fff;

2016-09-21 21:56:48 7653

原创 angularjs的过滤器实现搜索与排序

angularjs的过滤器实现搜索与排序利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. Document 姓名 年龄 {{arr1.name}} {{arr1.age}} // var wei = document.getElementById("wei"

2016-09-19 22:14:48 7946 1

原创 Angularjs的工具方法

Angularjs的工具方法废话不说,直接上代码: function A(){ this.name="小虎"; } function B(){ this.sex="man"; this.age=18; } var a = new A(); var b = new B(); //继承,a继承b angu

2016-09-18 22:20:09 376

原创 angularjs之购物金额计算

angularjs之购物金额计算当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下: angular 价格: 数量: 运费:{{cup.fee|currency:"¥"}} 总金额:{{all()|currency:"¥"}} // 购物金额计算 func

2016-09-18 21:55:57 1626

原创 实现页面之间的参数传递

实现页面之间的参数传递      当我们在本界面需要接受上一个界面传来的参数时,我们应该怎么做,比如我们做一些电商网站,对于商品详情页,我们需要从上一个界面传来参数,然后根据传来的参数,这是一般传来的是商品的id等,我们根据传来参数利用AJAX取对应的数据,完成数据的显示。下面是一个简单的例子,来实现简单的页面传参。当理解了之后,就可以与ajax结合实现从json数据中取进行判断显示了。下

2016-09-16 13:26:54 853

原创 CSS3实现动画-飞翔的小鸟

CSS3实现动画-飞翔的小鸟    以前的时候动画都是flash,flash存在着种种弊端,当c3动画出来后,就是这个问题有了新的解决方案,使一切变得简单可操作。   在这个例子中,动画中实现了鸟翅膀的煽动,以及云彩的移动,所以c3很强大,仅仅用了这点代码就能实现动态效果。直接上代码: birdfly body {

2016-09-16 13:09:40 2588

原创 CSS-3D之制作3D骰子

CSS-3D之制作3D骰子css3 3d其实还是转换的一种,css3提供了2D转换,里面有位移、缩放、旋转、斜拉,这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度,也就是多了个坐标轴。页面中想做3d效果就需要一个东西,就是盛放3d变换的元素的容器,咱们把它叫做舞台,在stage的css加上transform-style: preserve-3d      可以不写哦(默认会判

2016-09-16 12:36:52 2120

原创 javascript的同源策略以及jsonp请求百度天气接口

javascript的同源策略以及jsonp请求百度天气接口一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合协议 : http,ftp主机名 : localhost端口名:http协议的默认端口80:              https:默认端口是8083同源策略带来的麻烦:ajax在不同域名下的请求无法实现,如果说想要

2016-09-15 02:54:30 1333

原创 外边距重叠

外边距重叠在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则:1.两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为

2016-09-15 01:45:19 2159

原创 不定高宽的块级元素居中的方法

二、不定高宽的元素居中的方法不定宽高情况下的居中方法1、水平居中方法一:父层:text-align:center;子层: display:inline-block;//将子元素转换为行内块元素即可,这样就可以使用text-align属性了注意:IE6、7不兼容inline-block,解决办法:*zoom:1;*display

2016-09-01 23:33:20 623 1

原创 定宽定高情况下块级元素居中的方法

定宽定高情况下元素居中的方法居中元素定宽定高情况.father{ width: 500px; height: 500px; border:1px solid #000;}.son{ width: 100px; height: 50px; background-color: red;} 1、水平局中:

2016-09-01 23:27:53 610

原创 js进阶学习之--面向对象继承

js进阶学习之--面向对象继承JS中一共有三种继承方式:1、prototype2、call3、apply1.实现一个例子:1) 创建三个对象 对象A  对象B  对象C 2) A中有三个属性  a属性,b属性,c方法3) B中有个2个属性  d方法,e方法4) 使B继承A5) C中有个1个属性   f属性6) 使C继承B 并调用c方法

2016-08-05 23:42:43 986

原创 js进阶学习之--面向对象(一)

js进阶学习之--面向对象(一)构建对象的方式一共有三种: 面向对象 //1.工厂方式构建对象 //弊端:通过工厂构建对象无法检测该示例来自于哪个对象类型 function Person(name,sex,age){ var obj = new Object(); obj.name = name; obj.sex = sex;

2016-08-05 23:16:35 405

原创 js进阶学习之--闭包的理解

js进阶学习之--闭包闭包概念:一个函数引用另一个函数中的变量的函数叫做闭包 //父函数中的变量不会被释放 function closure(){ var i = 0; return function(){ alert(i++); } }//将函数的返回值接回 var fn = closure(); var fn2 = closur

2016-08-05 22:43:06 505

原创 Js 基础学习之--模拟加入购物车

Js 基础学习之--模拟加入购物车 购物车 *{margin:0; padding: 0; font-size: 14px; font-family: 微软雅黑;} ul li{list-style:none;} .clear{clear: left;} #products{ width: 1100px; margin: 10px auto; }

2016-07-27 20:47:47 901

原创 Js基础学习之-- 利用GET方法实现ajax请求

Js基础学习之-- 利用GET方法实现ajax请求 1.创建XMLHttpRequset对象,兼容IE6 function createXHR(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else{ return new ActiveXObject("Microsoft.X

2016-07-27 20:21:32 2966

原创 Js基础学习之-- 利用正则表达式验证 模拟注册界面

注册界面要求:用户名只能是字母或者数字或者下划线,不能以数字开头,用户名长度在6到20之间密码两次验证必须一致,用户名密码不能为空。 模拟注册 *{margin:0; padding:0; font-size:14px; font-famliy:"微软雅黑"; font-style:normal; } body{backgr

2016-07-27 19:38:54 4280

原创 js基础学习之--DOM总结

DOM总结JavaScript组成部分以及关系图    DOM概念 : DOM是文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如HTML和XML)解析成一系列的节点(对象),再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口,以达到使用编程语言操作文档的目的(比如增删内容)。

2016-07-23 00:35:01 836

原创 js基础学习之--BOM基础知识总结

BOM总结    BOM    概念:BOM是浏览器对象模型,是Bowser Object Model 的简称,就是 浏览器 工具库 说明书!     Window对象    Window 对象的角色:(a)javascript访问浏览器的窗口的一个接口(入口);(b)ECMAScript中的Global对象,全局对象。全局对象:就是顶层对象,顶层对象可以理解为CE

2016-07-23 00:14:37 556

原创 js基础学习之--关于 Cookie 的增删改查的封装函数

关于 Cookie 的增删改查的封装函数1. 设置(创建、修改) cookie 数据        参数1:键值        参数2:键名function setCookie(key,value){ document.cookie = key + "=" + encodeURIComponent(value); }     测试:       setCo

2016-07-20 22:35:57 723

原创 js基础学习之--仿百度登录鼠标拖拽事件

仿百度登录鼠标拖拽事件       百度的登录窗口可以在可视的窗口内进行拖拽,当遇到边界时,进行边界的碰撞检测,当小于边界值时或者大于边界值时,会进行响应的判断。中间还用到了两个封装的函数,用于取窗口可视区宽度和高度。 拖拽 #container{ position: absolute; left: 0; top: 0; } .t

2016-07-20 00:50:25 650

原创 js 基础 ---实现放大镜的效果

js 基础 ---实现放大镜的效果能利用原生的js是非常重要的,所以对于仿照电商的商品放大图做出了这个放大镜的效果。在这个例子中,放大镜跟随着鼠标的移动而移动,大盒的图片移动方向与小盒子图片的移动方向是相反的,它们的放缩比例是相同的,具体的实现案例如下:第一种方法: 放大镜效果 body{position: relative;} *{ma

2016-07-19 00:08:08 9108

原创 Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装

Js基础学习之 --  DOM兼容 根据标签、类名获取节点函数封装                 1.    作用:所有类选择器名为cName的标签      参数:类选择器的名(class名)  返回值:所有类选择器名为cName的标签  function getClass(cName){ var arr = []; var all

2016-07-17 23:24:33 2785

原创 HTML基础学习之 --元素 定位

元素定位    一、 定位主要包括了以下四种方式:    1. static:默认值,无特殊定位,对象遵循HTML原则;     2.  relative: 相对定位,对象不可层叠,将依据 right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置。(相对自身、不脱离文档流)    3. absolute:绝对定位,将对象从文档流

2016-07-17 00:23:29 456

原创 HTML基础学习之 --网页的宽度、高度自适应

宽高自适应              我们在网页布局中经常要定义元素的宽高。但是我们如果定义宽高是一个定数时,当在不同的分辨率的电脑上打开的时候,往往会出现与屏幕不适应的情况,所以我们希望元素大小能根据窗口或子元素自动调整,这就是自适应。      元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。      1. 宽度自适

2016-07-17 00:12:00 14557

面向对象js开发钟表

面向对象js开发钟表,这相当于一个插件,可以进行自己的设计,传入相应的参数,就可以设置属于自己的钟表,前提是引入js文件

2016-09-03

面向对象js开发扫雷小游戏

面向对象,js,开发扫雷小游戏已封装,只需要创建一个对象就可以。

2016-09-03

nodejs安装32位及64位

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。 [1] Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

2016-09-03

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除