- 博客(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
6517
原创 css js html 实现滚动字幕
滚动字幕 字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~ #affiche { color: red; display: block; width: 96%;
2018-01-22 16:15:50
7595
1
转载 Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。这篇文章解决了这个问题,是一个不错的方法。Web移动端Fixed布局的解决方案
2017-01-02 22:41:42
684
原创 Javascript的伪数组
Javascript的伪数组 在Javascript中什么是伪数组? 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。 1.典型的是函数的 argument参数, 2.像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。
2016-10-06 15:11:39
2432
原创 webpack构建react项目和处理组件的依赖
webpack构建react项目和处理组件的依赖webpack的简介: 是facebook另一个神器,与react配合开发是目前web前端最主流的技术从诞生开始就是瞄准了目前的大型单页面app的开发1.能够实现管理模块依赖2.代码分割,资源压缩3.抽取公共模块的功能首先应该有nodejs的环境:1.通过npm安装webpack n
2016-09-29 22:01:24
3952
原创 angularjs路由实现导航栏
angularjs路由实现导航栏第一种: 路由 a{ text-decoration:none; } 首页 公司简介 关于 联系我们 var app = angular.module('myApp',["ngRoute"]); app.confi
2016-09-27 22:14:04
5400
原创 React属性传递
React属性传递 属性:属性是在一个组件被声明的时候就被(父组件)赋予的,并且不可以被修改.属性被传递的方式一般是在组件被调用的时候被传,除了可以传递字符串以外,还可以传,对象,数组. 属性的传递主要有两种方法:1. 属性的设置和传递(键值对设置):2.展开形式设置propsvarobj={name:"1",attr:"00
2016-09-27 22:03:06
2738
原创 React动态添加事件
react事件 React .lala{ color:red; } var event={ Click:function(){ alert("点我干嘛?") }, Touch:function
2016-09-26 22:25:12
7506
原创 React给添加元素增加样式
React给添加元素增加样式第一种方法: React .lala{ color:red; font-size: 40px; } var Hello=React.createClass({ render
2016-09-26 22:16:55
17147
原创 ionic 下拉刷新
ionic 下拉刷新 下拉刷新 body{ cursor: pointer; } var my = angular.module('starter', ['ionic']) my.run(function($ionicPlatform) { $ionicPl
2016-09-24 22:14:02
553
原创 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
3100
原创 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
9014
原创 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
2503
原创 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
1810
原创 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
7276
原创 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
7703
原创 angularjs的过滤器实现搜索与排序
angularjs的过滤器实现搜索与排序利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. Document 姓名 年龄 {{arr1.name}} {{arr1.age}} // var wei = document.getElementById("wei"
2016-09-19 22:14:48
8025
原创 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
410
原创 angularjs之购物金额计算
angularjs之购物金额计算当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下: angular 价格: 数量: 运费:{{cup.fee|currency:"¥"}} 总金额:{{all()|currency:"¥"}} // 购物金额计算 func
2016-09-18 21:55:57
1662
原创 实现页面之间的参数传递
实现页面之间的参数传递 当我们在本界面需要接受上一个界面传来的参数时,我们应该怎么做,比如我们做一些电商网站,对于商品详情页,我们需要从上一个界面传来参数,然后根据传来的参数,这是一般传来的是商品的id等,我们根据传来参数利用AJAX取对应的数据,完成数据的显示。下面是一个简单的例子,来实现简单的页面传参。当理解了之后,就可以与ajax结合实现从json数据中取进行判断显示了。下
2016-09-16 13:26:54
898
原创 CSS3实现动画-飞翔的小鸟
CSS3实现动画-飞翔的小鸟 以前的时候动画都是flash,flash存在着种种弊端,当c3动画出来后,就是这个问题有了新的解决方案,使一切变得简单可操作。 在这个例子中,动画中实现了鸟翅膀的煽动,以及云彩的移动,所以c3很强大,仅仅用了这点代码就能实现动态效果。直接上代码: birdfly body {
2016-09-16 13:09:40
2714
原创 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
2185
原创 javascript的同源策略以及jsonp请求百度天气接口
javascript的同源策略以及jsonp请求百度天气接口一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合协议 : http,ftp主机名 : localhost端口名:http协议的默认端口80: https:默认端口是8083同源策略带来的麻烦:ajax在不同域名下的请求无法实现,如果说想要
2016-09-15 02:54:30
1381
原创 外边距重叠
外边距重叠在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则:1.两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为
2016-09-15 01:45:19
2187
原创 不定高宽的块级元素居中的方法
二、不定高宽的元素居中的方法不定宽高情况下的居中方法1、水平居中方法一:父层:text-align:center;子层: display:inline-block;//将子元素转换为行内块元素即可,这样就可以使用text-align属性了注意:IE6、7不兼容inline-block,解决办法:*zoom:1;*display
2016-09-01 23:33:20
667
原创 定宽定高情况下块级元素居中的方法
定宽定高情况下元素居中的方法居中元素定宽定高情况.father{ width: 500px; height: 500px; border:1px solid #000;}.son{ width: 100px; height: 50px; background-color: red;} 1、水平局中:
2016-09-01 23:27:53
645
原创 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
1060
原创 js进阶学习之--面向对象(一)
js进阶学习之--面向对象(一)构建对象的方式一共有三种: 面向对象 //1.工厂方式构建对象 //弊端:通过工厂构建对象无法检测该示例来自于哪个对象类型 function Person(name,sex,age){ var obj = new Object(); obj.name = name; obj.sex = sex;
2016-08-05 23:16:35
436
原创 js进阶学习之--闭包的理解
js进阶学习之--闭包闭包概念:一个函数引用另一个函数中的变量的函数叫做闭包 //父函数中的变量不会被释放 function closure(){ var i = 0; return function(){ alert(i++); } }//将函数的返回值接回 var fn = closure(); var fn2 = closur
2016-08-05 22:43:06
536
原创 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
939
原创 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
3027
原创 Js基础学习之-- 利用正则表达式验证 模拟注册界面
注册界面要求:用户名只能是字母或者数字或者下划线,不能以数字开头,用户名长度在6到20之间密码两次验证必须一致,用户名密码不能为空。 模拟注册 *{margin:0; padding:0; font-size:14px; font-famliy:"微软雅黑"; font-style:normal; } body{backgr
2016-07-27 19:38:54
4331
原创 js基础学习之--DOM总结
DOM总结JavaScript组成部分以及关系图 DOM概念 : DOM是文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如HTML和XML)解析成一系列的节点(对象),再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口,以达到使用编程语言操作文档的目的(比如增删内容)。
2016-07-23 00:35:01
878
原创 js基础学习之--BOM基础知识总结
BOM总结 BOM 概念:BOM是浏览器对象模型,是Bowser Object Model 的简称,就是 浏览器 工具库 说明书! Window对象 Window 对象的角色:(a)javascript访问浏览器的窗口的一个接口(入口);(b)ECMAScript中的Global对象,全局对象。全局对象:就是顶层对象,顶层对象可以理解为CE
2016-07-23 00:14:37
619
原创 js基础学习之--关于 Cookie 的增删改查的封装函数
关于 Cookie 的增删改查的封装函数1. 设置(创建、修改) cookie 数据 参数1:键值 参数2:键名function setCookie(key,value){ document.cookie = key + "=" + encodeURIComponent(value); } 测试: setCo
2016-07-20 22:35:57
752
原创 js基础学习之--仿百度登录鼠标拖拽事件
仿百度登录鼠标拖拽事件 百度的登录窗口可以在可视的窗口内进行拖拽,当遇到边界时,进行边界的碰撞检测,当小于边界值时或者大于边界值时,会进行响应的判断。中间还用到了两个封装的函数,用于取窗口可视区宽度和高度。 拖拽 #container{ position: absolute; left: 0; top: 0; } .t
2016-07-20 00:50:25
678
原创 js 基础 ---实现放大镜的效果
js 基础 ---实现放大镜的效果能利用原生的js是非常重要的,所以对于仿照电商的商品放大图做出了这个放大镜的效果。在这个例子中,放大镜跟随着鼠标的移动而移动,大盒的图片移动方向与小盒子图片的移动方向是相反的,它们的放缩比例是相同的,具体的实现案例如下:第一种方法: 放大镜效果 body{position: relative;} *{ma
2016-07-19 00:08:08
9214
原创 Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装
Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装 1. 作用:所有类选择器名为cName的标签 参数:类选择器的名(class名) 返回值:所有类选择器名为cName的标签 function getClass(cName){ var arr = []; var all
2016-07-17 23:24:33
2839
原创 HTML基础学习之 --元素 定位
元素定位 一、 定位主要包括了以下四种方式: 1. static:默认值,无特殊定位,对象遵循HTML原则; 2. relative: 相对定位,对象不可层叠,将依据 right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置。(相对自身、不脱离文档流) 3. absolute:绝对定位,将对象从文档流
2016-07-17 00:23:29
517
原创 HTML基础学习之 --网页的宽度、高度自适应
宽高自适应 我们在网页布局中经常要定义元素的宽高。但是我们如果定义宽高是一个定数时,当在不同的分辨率的电脑上打开的时候,往往会出现与屏幕不适应的情况,所以我们希望元素大小能根据窗口或子元素自动调整,这就是自适应。 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。 1. 宽度自适
2016-07-17 00:12:00
14701
nodejs安装32位及64位
2016-09-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人