am50506-CSDN博客

转载 React阻止事件冒泡的正确打开方式

需求：点击导航list按钮出现侧弹框，点击空白处弹框消失问题：绑定空白处的点击事件到document上，但是非空白处的点击也会触发这个点击事件，在react中如何阻止事件冒泡？解决方法：e.stopPropagation()并不奏效，react有专属的阻止事件冒泡方法，e.nativeEvent.stopImmediatePropagation()示例：/** *...

2017-03-08 15:13:00 588

转载在react中使用intro.js的的一些经验

　　react逐渐热了起来，但是新的东西毕竟前辈的经验少一些，前段时间自己在react中用到intro.js时，得到的资料甚少，摸索后便将一些心得记录下来了~1 intro.js的引入，这一点请看上一篇博文关于如何在react中引入文件2 在需要的页面引入文件后，可以给intro.js的出发点绑定函数showIntrojs(){ introJs().start...

2016-03-08 19:56:00 847

转载 react如何引入外部文件的整理

1 引入组件　首先就应该是安装了，安装在环境中后通过import { Select, Button, Icon, QueueAnim } from 'antd';就可以把需要的组件引用进来了~2 引入CSS引入css的格式是import './SideBar.less'这个当然也是要看具体的路径的~但是习惯上大家都喜欢把组件和相关的样式表写在一个文...

2016-03-08 15:30:00 801

转载由用户的感知谈交互设计

人不仅会思考，还会感知。除了了解目标人群的基本信息外，很有必要了解他们的心理状况。1 面部表情普遍存在，而身体姿态不具有普遍性。找出能够感染目标用户的情感，除了用户的基本信息，还要明确和记录他们的心理情况，例如哪些情感最有感染力或最能激发目标用户的多种心理活动。2 你可能需要思考当用户使用产品时所产生的感情，因为这会影响他们接下来的行为。3 观察那些不经意的，可能影响人们对你...

2016-02-02 20:40:00 206

转载从社交的角度思考如何更好的做产品

1 根据“邓巴数字”，人类社交圈的上限是150人。这个限制是指你能与其维持稳定社交关系的人数，这样的团体中每个人都能相互了解~也就是强关系圈。2 如果感觉自己并未身处此圈子之中，可能就会感觉得被人疏远，孤立，感到紧张。3 在社交网络中很多关系都是弱关系。4 在设计一个注重社区关系的产品时，请考虑其中的交互是为强关系还是弱关系设计的还是为弱关系设计的。1 人天生会模仿...

2016-02-01 21:33:00 105

转载前端设计中要用到的一些心理学常识—— 用户的动机来源

1.1 人越接近目标越容易被激励，比起已经做了什么，用户更关注还剩下什么没做1.2 人们喜欢参加回馈活动，但是在回馈达成时失去客户的风险最高1.3 变动的奖励更能激发用户的参与性和积极性1.4 人们受多巴胺驱动而不断寻求信息，并且找到信息的过程越容易，用户就越投入其中1.5 不可预知性驱动人不断找寻，信息来的越是不可预期，人们越容易沉溺于发掘信息1.6...

2016-01-28 22:03:00 179

转载常用npm 命令

npm 官方网站：npm的使用说明安装模块npm install安装当前目录package.json文件中配置的dependencies模块安装本地的模块文件npm install <tarball file>Example:npm install ./package.tgz安装指定URL的模块npm install ...

2015-12-02 10:39:00 108

转载关于react的一点工作总结

首先，react是Facebook开发的一套前端框架，仅仅是MVC中的V。核心思想是“封装组件”，组件封装后可以作为一个独立的实体被引入到新的组件中，这样新的组件就又是一个实体了，由于组件的实现了可复用，所以是大大减小了开发的工作量。*react的值可以分为私有和公有，私有的值一般就用this.state来表示了比如：<Input type="password"...

2015-12-01 19:24:00 152

转载前端琐记·浮动

　　世事洞达皆学问，人情练达即文章。浮动从何而来？浮动的应用要注意些什么？　　1. 浮动从何而来？　　这个问题要追溯到盒子的定位了，盒子的定位由position，float来决定。position有static,relative,absolute,fixed，inherit五个值，具体请查阅前几天的博客“回头看看盒子模型”，float的取值一共也是四个：left,right,no...

2015-09-20 18:15:00 90

转载仿淘宝点击小图出现大图效果

<div class="bigger"> <img src="images/bigger.png" alt="" id="pro_img" class="bigger" /> <script type="text/javas...

2015-09-17 13:49:00 332

转载回头看看盒模型

盒模型的二次理解。1. 定义所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。1.1排布这些盒子们都要按照可见版式模型在页面上排布，版式模型由position,display,float这三个属性来控制，position属性控制页面上元素间的位置关系，用于定位；display属性控制元素显示的本质（inline:默认值，显示为内联元素；block：块级...

2015-09-13 20:46:00 91

转载 CSS选择器及优先级

转自CSS优先级的计算公式：http://wyz.67ge.com/css-selector-priority/通常我们可以将CSS的优先级由高到低分为六组：无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。第二高位的优先属性是在ht...

2015-08-27 21:06:00 84

转载关于设置网页自适应不同浏览器的问题解决

在制作一个登录界面时遇到了这样一个问题，背景图片是一张大的图片，登录内容设计师设计的比较大，当我把图切出来之后，发现由于我的浏览器屏幕比较小，背景图片出现了滚动条，登录内容在小的屏幕下显得异常的大，这样我们就需要解决两个问题：1如何让背景图片完整的铺满整个屏幕，并且随着浏览器屏幕的不同自适应 2如何让登录内容始终居中，这样就是登录内容到屏幕顶端的距离的自适应。解决方法：问题1 将...

2015-07-31 13:04:00 633

转载设置input(radio,checkbox)和lable对齐的问题

在做页面的时候几次遇到label和前面的小图标无法对齐的情况，后来发现解决方法不过是label { display:inline-block; vertical-align:top;line-height:22px;//根据具体情况调节line-height }　　转载于:https://www.cnblogs.com/s-z...

2015-07-31 12:43:00 565

转载蒙板进入离开效果的制作

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-2.0.1.min.js">...

2015-06-18 14:55:00 92

转载 css3简易实现图标动画由小到大逐个显现

在制作网站时避免图片太平淡经常会用到动画效果：由小到大跳跃出现。这种效果很有视觉冲击力，显著提高关注度~原理：利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧，并将动画添加到图片上，需要注意的是需要给图片相当于初始化的一个处理transform...

2015-06-12 17:28:00 1159

转载下拉图标呼吸效果制作

下拉图标呼吸效果在手机网站中用的比较多，可以很形象的提示用户往下有更多内容。下面是几行简单的代码~//下拉图标呼吸效果var setTime;function setTimeFun() { $(".mdmobile-first-bottom-bottom").animate({ 'opacity': 0.2 },800,functio...

2015-06-11 17:35:00 290

转载设置图片从页面四周渐入效果的锚点方法

原理：利用锚点定位方法设置图片运动期间各个时期的坐标位置。在不同时刻对各锚点坐标调用。相比传统方法的优点：可以更灵活的变动图片的位置。各个运动时期的运动时间更好控制。 1 <script> 2 $(function(){ 3 $('#mdmobile').fullpage({ 4 ...

2015-06-11 16:13:00 161

转载关于导航宽度高度自适应的小栗子

1 /* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the edit...

2015-06-01 17:28:00 163

转载对上周建站的经验总结

虽说建个站没什么难的，但第一次建站感觉还是遇到了点小困难继而让我学到了很多东西，掌握一些小技巧还是会有事半功倍的惊喜。 1关于工具这一块，如果是仿站或者部分借鉴的话建议使用火狐的scrapbook插件，它可以从DOM结构上清除我们不需要的东西，而完整的保留其他。关于这个工具的使用网上的教程不是很多，在这多啰嗦几句：在目标页面上右击出现下图所示内容然后就可以根据自己的要求...

2015-05-24 15:04:00 88

转载刚更新的css hack技巧

一一般Hack1概念：不同的浏览器对CSS的解析效果不同，为了达到相同的效果，就得根据不同浏览器写不同的css2规则：　CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。　类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但...

2015-05-17 10:51:00 106

转载前端很有用的检测工具及框架

1 Platform.js是一个用Javascript编写的平台检测程序库，它被jsperf.com用于userAgent检测。2 MobileESP是一个开源框架，用于检测服务器端userAgent.3 最常用的两个HTTP压缩方案是DEFLATE和GZIP,其中GZIP的支持性更好。在每个请求上开启压缩之前，必须正确配置Web服务器，将压缩的内容发给具有压缩能力的客户端。...

2015-05-16 14:14:00 280

转载 HTML5和Web Apps框架和方法

单页：1jQuery Mobile该框架以其基于AJAX的导航系统和可使用主题的ThemeRoller设计而闻名。支持Android,ios,Windows Phone,webOs等。编程模式为CSS和JS,在DOM上声明，用CSS和data-*属性标记。2jQTouch它是一个Zepto/jQuery插件，也是一个很容易上手的简单框架，它提供一组基本的小部件和动画，但是...

2015-05-15 13:47:00 94

转载《HTML5 and Javascript Web Apps》读书笔记要点摘录

　　必须要承认的是这本由Wesley Hales编写的书对要进军web apps 的程序员（媛）来说绝对是福音，很薄的一本书简明扼要的说明了web apps的实现原理，实现工具以及优缺点。拾人牙慧，作此摘录：1原理：浏览器（即平台）已经称为应用程序的另一个平台，我们的前端代码现在打包为HTML5驱动的原生应用，扩展和操作系统。h5，Open Web和移动设备已经进一步推动了浏览器...

2015-05-11 21:26:00 105

转载 JS中的原型继承和多重继承

概念：1原型继承是创建新类型对象----子类型，子类型基于父类型，子类型拥有父类型所有的属性和方法（从父类型继承得到），然后修改其中的部分内容或者添加新的内容。继承最好在子类型模型可以被视为父类型对象的时候使用。　　 2从多个父类型中派生出一个对象类型称为多重继承。原型继承：使用new关键字和构造函数的prototype属性都是定义类型的特定方式，这些是我们到目前为止一直使...

2015-05-09 21:26:00 89

转载 this及其作用域（函数外部this变量的调用）

　　众所周知的一件麻烦事是函数外部的this变量都不可见，但是我们在编写使用局部函数的方法时，却又很可能需要在某一时刻从内部函数访问this变量。　　这种情况下可以通过在this变量中存储一个需要的信息(例如在内部函数中可见的endOfLine)，如果需要访问整个this对象，也可以将它保存到一个变量上，这种变量通常采用名称self(或者that).但是那么多的变量又会使代码看起来很...

2015-05-09 15:46:00 312

转载 JS中的嵌套作用域

　　在JS中仅仅区分全局变量和局部变量还不够，实际上，变量作用域可以有任意层级（嵌套）。其他函数内部定义的函数可以调用父函数的局部变量，而内部函数里定义的函数则不仅可以调用父函数的局部变量，还可以调用祖父函数的局部变量。//定义一个函数接收正数number,然后将其和参数factor相乘function multiplyAbsolute(number,factor){ ...

2015-05-08 21:28:00 274

转载 CSS3动画中的位置设定问题

水平居中的不同方法实现： position: absolute; margin:0 auto; left:0; right:0;position: absolute; left:50%; -webkit-transform:translateX(-50%);垂直居中的几种实现方法： position: absolute; ...

2015-05-07 20:30:00 719

转载 CSS3如何实现2D转换和3D转换，他们有何区别

CSS3中2D3D技术的发展，带来了更丰富的视觉效果~他们的实现机理是怎样的呢？1定义2D:能够对元素进行移动，缩放，转动，拉长或拉伸。3D：允许对元素进行格式化，在三维空间进行操作。元素改变形状，尺寸和位置。2D方法：matrix()方法把所有2D转换方法组合在一起，该方法需要六个参数，包含数学函数，可以实现旋转（angle）,缩放（n）,移动（x,...

2015-05-06 21:28:00 271

转载表格列布局系列如何灵活把握列宽

问题如何使列宽收缩适应到内容宽度解决方法：在表格上设置table-layout:auto和width:auto.然后在单元格上设置width:auto.问题设定尺寸列解决方法：在表格上设置table-layout:auto和width:auto.然后在单元格上设置width:value.就可以设置列宽。如果所有列宽总和大于上级容器宽度，其布局方式会变成按宽度比例...

2015-05-04 20:39:00 135

转载如何将多行数据以分组的形式对齐到单元格的上，中或下位置

将多行数据显示在一个单元格中，然后使用vertical-align，将他们自动对齐到单元格的上边，中间或下边。 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></titl...

2015-05-04 12:26:00 147

转载媒体查询的应用以及在css3中的变革

　　CSS一直都支持设置与媒体相关联的样式表。它们可以适应不同媒体类型的显示。例如，文档在屏幕显示时使用sans-serif字体，在打印时则使用serif字体。screen和print是两种预定义的媒体类型。　　在html4中，媒体样式表的写法是<link rel="stylesheet" type="text/css" media="screen" href="san...

2015-05-01 18:23:00 87

转载样式表优先级顺序

1 最高优先级的位置是HTML文档头部的<style>元素。2第二优先级的位置是<style>元素中@import语句所导入的样式表。3第三优先级的位置是<link>元素附加的样式表4第四优先级的位置是<link>元素附加的样式表中的@import语句所导入的样式表5第5优先级的位置是最终用户附加的样式表　　有一种例外情...

2015-05-01 16:21:00 759

转载创建热点区域

　　创建热点区域可以在一张图片上创建不同的链接内容。热点区域有三种类型：矩形（rect），圆形（circle）和多边形（poly）。1 <img src="图片地址" usemap="#名称">2 <map id="#名称">3 <area shape="rect" coords="10,10,100,100" href="#">4...

2015-04-29 20:53:00 152

转载利用jQuery实现选项卡

/*Tab 选项卡标签*/$(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(this).addClass("selected") //当前<li>元素高亮 ...

2015-04-29 15:48:00 88

转载 js中substring和substr的用法

substring 方法用于提取字符串中介于两个指定下标之间的字符substring(start,end)开始和结束的位置，从零开始的索引参数描述 start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多...

2015-04-29 15:12:00 73

转载 live(),bind(),delegate()等事件绑定方法的区别及应用解析

　　1 首先bind()方法是最直观的，但是也是弊端最大的。 $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系，当我们点击了<a></a>标签时，会立马执行alert,但与此同时，click()事件会接着向DOM树的根方向传播，广播到父元素，由父元素向上到每个...

2015-04-29 11:54:00 106

转载在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。具体代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...

2015-04-29 09:32:00 108

转载自定义超链接文字提示效果

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快，更加美观的优点~ 1 /* 超链接文字提示 */ 2 $(function(){ 3 var x = 10; 4 var y = 20; 5 $("a.tooltip").mouseover(function(e){ 6 this.myTitle = ...

2015-04-27 20:25:00 248

转载 stop()方法的精准应用

　　stop()方法在动画中扮演了很精彩的角色，他能够阻止连续动画或连续事件出现累积的状况，令动画有条不紊的进行。1语法结构stop([clearQueue],[gotoEnd]);这两个参数都是可选的，并且都是布尔值（true/false）。这样一来，stop()方法就有了4种组合。stop(true,true) ,stop(true,false) ,stop(false,...

2015-04-27 14:16:00 276

空空如也

空空如也