vue:不同环境配置不同打包命令 https://blog.csdn.net/zfangls/article/details/79990796通过vue-cli中的npm run build 打包,这个只能打包到一个环境,在实际工作中可能有生产环境,预发布环境甚至更多,每个环境的接口地址都不同,每次都需要手动修改接口地址,非常繁琐。那我们怎么才能做到执行不同的命令打不同的包呢?下面是我在实际工作中的一个解决方案:1.npm...
vue中元素高度auto的收起展开动画 <!-- **** 说明:**** 使用css3的transition动画来做**** 但是这个属性只能用于固定高度的元素,所有在进行动画之前就要手动的给这个元素设置一个高度值,这样就能正常使用动画了********--><template> <div> <button @click="fun_animate"...
解构 /** * * 解构 : 分解一个对象的结构 * 等号两边解构类似, 右边必须是一个真实的值。 */let [a,b,c] = [1,2,3];console.log(a)console.log(b)console.log(c)//*********** 编译成es5以后的代码 */// var a = 1,// b = 2,// c = 3;// ...
es6基础 var和let 在es5中的var有一些存在的问题,1:可以重复声明。2:不支持常量。3:没有块级作用域的概念"use strict"for(var i =0; i< 3; i++){ (function(tmp){ setTimeout(function(){ console.log(tmp) }) })(i)...
h5中的select下拉框在ios中样式兼容问题解决方案。 h5中的下拉框在ios中是长这样的。这样式显然不能满足我们的需要,解决办法。1:设置css : -webkit-appearance: none; 去掉默认的样式。2:右边的小三角使用一个图片定位在那里。...
h5手机端在输入框失去焦点后页面没有滑动到原来位置。 在手机端经常会写输入框提交信息,有的输入框位置比较靠底部,所以点击输入框的时候浏览器会自动把页面网上滑动,但是输入完成后,也就是这个输入框失去焦点的时候页面并没有滑下来。解决办法 1:可以用浏览器提供的这个方法来实现scrollIntoView这个方法可以绑定给任意元素,让他们滑动,具体使用方法查看旭哥的这篇文章吧,就算我费劲写一顿也不如旭哥写的更有深度。CSS scroll-behavi...
浏览器之间的兼容问题,要求兼容到ie9+ ie浏览器滑动时候页面抖动解决方案 一般的官网项目选择jQuery会比vue好一些。jQuery是多页应用,vue是单页应用对搜索引擎的支持不好。但是官网一般的要求是ie9+,国产浏览器,谷歌和火狐更不用说了。这样就出现了浏览器的兼容问题。主要有两个方面,1: 国产浏览器,2:ie浏览器。解决办法 1:对国产浏览器的兼容问题比较容易,因为一般国产浏览器都是同时具有ie内核和谷歌内核的。可以在head中添加一下几行,强制国...
js中不是所有对象都继承Object,也有特例 <!DOCTYPE html><html><body> <script> /** * 大部分对象都继承于Object对象。也有特例 */ var obj = Object.create(null) console.log(obj) </s...
js中不是所有对象都继承Object,也有特例 <!DOCTYPE html><html><body> <script> /** * 大部分对象都继承于Object对象。也有特例 */ var obj = Object.create(null) console.log(obj) </s...
js中继承关系 <!DOCTYPE html><html><body> <script> /** * yeye -> baba -> erzi -> sunzi */ function Yeye() { this.yeye = "yeye"..
js的构造函数和原型链 <!DOCTYPE html><html><body> <script> function Car() { this.name = "I am a car" } Car.prototype.height = 100; var car = new C...
js包装类 <!DOCTYPE html><html><body> <script> /** * 包装类 * */ var str = "123"; /** * 字符串没有length属性,在执行str.length的时候 系...
js生成对象,构造函数生成对象原理 <!DOCTYPE html><html><body> <script> /** * 1 通过定义并创建对象的实例 */ var person = {} var person = new Object(); /** *...
js预编译 <!DOCTYPE html><html><body> <script> /** * 1 通过定义并创建对象的实例 */ var person = {} var person = new Object(); /** *...
wepy根据不同打包命令配置不同的全局变量 功能需求:要求能够根据不同打包命令(测试环境,线上环境)配置出全局变量,根据这个全局变量来自动寻找对应环境的接口域名。如果仅仅做了1中的配置,仅能从配置文件中获取NODE_ENV的值,在业务代码上是获取不到的。1:在package.json文件中配置如下信息:"scripts": { "dev": "cross-env NODE_ENV=dev wepy build --wa...
微信小程序实现电商平台中的添加商品规格 在电商平台中肯定少不了添加商品规格的功能。如图:就是一个商品里边有很多给个好多个属性。之前用JQ的时候还是比较容易写出来的。因为在JQ中可以直接操作dom,直接对dom进行属性添加等处理,可以把每个元素的属性用自定义属性的方式记录在本元素上。现在用微信小程序写这个东西就开始头疼了。因为没有办法直接操作dom,也没办法获取一个元素的上下级dom,哎,每个元素都是孤立存在的,这就略显尴尬了。不过还是有...
微信小程序上拉多次加载问题(手指放在屏幕上一直向上拉就会不停的调用加载接口) 问题描述:我们经用到上拉加载功能。官方文档上写的lower-threshold="0",其实仅仅就是当上拉到底部的时候就调用接在接口,当滑到底部调用接口的时候我们继续上拉屏幕,结果就会出现一次上拉多次加载的问题。解决方法:我先说说思路,我就是利用bindtouchend事件,这个时间就是触摸结束时间,也就是触摸接触的时候会调用这个方法。所以我们在写完上拉加载功能后,在添加一个bindtouchen...
微信小程序-scroll-view上拉多次触发加载事件 之前那篇博客里边写了滑块的margin属性影响了滑动效果。这篇文章写一下上拉时多次触发上拉加载事件。(改好的代码如下)其实也比较简单,就是有可能没有意识到这个小细节。在官方文档中有这么一个属性(如图)。这个属性是设置距离底部多少距离是触发事件。我们吧这个属性设置成0就可以了。只有上拉到最底部才会触发。<scroll-view lower-threshold="0" class="scroll...
微信小程序-textarea获取输入值(在modal中获取值) 我的页面是这样的。我要点击微信自带的modal中按钮获取textare的输入值(下面的页面已经改好了)文档上的bindblur事件根本就满足不了使用,因为我在点击按钮后先调用了confirm方法,然后才会调用bindblur事件的方法获取textare值。所以就没办法进行了。网上有的博客中写的是用form表单触发的事件,这样就能先触发bindblur事件获取textare值,然后在触发点击按钮的事...
微信小程序坑-scroll-view滑动列表(就一行,没有填满屏幕就会触发上拉加载事件) 比方说如下图片中有一个滑动列表。我的这个页面只有一行数据,按理说我们滑动时候是不应该触发上拉加载的,因为滑动的scroll-view元素高度是设置的100%。结果我这里就触发了上拉加载事件。图中两个箭头,箭头1的地方是scroll-view的一个子元素的margin-top如下图代码。原因:就是<view wx:for="{{arr}}" class='item'>元素设置margin...
微信小程序滑动穿透事件处理方案 滑动穿透事件处理:亲测可行!在下面这个图中只有箭头值的地方是滑动的区域,但是当用手滑动上部红色区域的时候下面的滑动区域也跟着滑动,这个效果不是我们希望的。给上面红色区域添加这个事件catchtouchmove="move" 。然后在js中在实现这个方法 move: function(){},这样就可以了。其实这个现象的出现就是事件冒泡传递过去了。catchtouchmove属性就是去掉冒泡的事件绑...
java中.equals()方法和“==”的区别 1:当基本数据类型比较的时候,“==”(基本数据类型没有.equals()方法),比较的是数值是否相等。2:当引用数据类型的时候,.equals()和“==”比较的时候内存地址是否相同(是否是同一个东西)。并且“==”和.equals()功能一样。3:String类重写了.equals()方法,比较的是两个内容的值是否相等。...
java 单例模式 //单例模式class ArrayUtil{ // 1自己创建一个自己的对象 private static ArrayUtil instance = new ArrayUtil(); // 2 私有化自己的构造函数,防止外界创建新的对象 private ArrayUtil(){}; // 3 暴露一个静态方法,用于获取自身的对象 public static ArrayUtil g
java——引用类型参数传递 // 引用类型参数public class test1{int num = 1;public static void main(String[] args){ int[] arr = new int[]{19, 30};System.out.print("change_pre arr =");for (int i = 0; i System.out.pri
Java——值传递 //public class test1{int num = 1;public static void main(String[] args){ int x = 12;System.out.println("chage_pre X=" + x);change(x);System.out.println("chage_after X=" + x);}sta
JS中null和undefine的区别 数据类型 undefine null number string boolean Object1: undefine:引入这个值是为了区分空对象指针和未经初始化的变量。未经初始化的变量默认就取undefine。只有一个值空对象指针:未分配或者尚未指向任何地方的指针。可以确保不指向任何对象或者函数。未经初始化的变量:可能指向任何地方。2: null:null是一个不存在的对象,就是没
h5利用缓存优化性能 转载出处:http://www.cocoachina.com/webapp/20151217/14718.html1 H5 缓存机制介绍H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。H5 应用程序缓存为应用带来三
前端整站的性能优化 整站的性能优化可以从以下几个大的方面来做。 加载优化、一:加载优化:1:合并css,JavaScript代码,压缩代码。2:合并小图片,使用css精灵。3:利用缓存存储数据。4:使用长cache。5:使用外联样式引入css和JavaScript。6:启用GZip。7:使用首屏先加载8:使用按需加载。9:通过滚动加载。10:通过Media Query加
模块化加载的实现 原文链接:http://caibaojian.com/module-definition.html浅谈模块化加载的实现原理A-A+前端博客•2015-03-04•前端开发•AMD | CMD | JavaScript | RequireJS | SeaJS•1913View0文章目录一、模块化加载的技术原理1. 数据模
为什么h5移动端是单页面的应用 优点:1、具有桌面应用的即时性、网站的可移植性和可访问性。2、用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。3、基于上面一点,SPA相对对服务器压力小。4、良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。5、对前端人员javascript技能要求更
JS实现异步编程的几种方式 转载出处:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.htmlJavascript异步编程的4种方法作者: 阮一峰日期: 2012年12月21日你可能知道,Javascript语言的执行环境是"单线程"(single thre
JS连等赋值 转载出处:https://segmentfault.com/a/1190000004224719有这样一个热门问题:var a = {n: 1};var b = a;a.x = a = {n: 2};alert(a.x); // --> undefinedalert(b.x); // --> {n: 2}其实这个问题很好理解,关键要弄清下面两个知识点:J
前端性能优化 转载出处:http://www.cnblogs.com/lei2007/p/3262897.html除了自己总结:1. 减少http请求,2.压缩并优化js/css/image 3.尽量静态页面,从简原则 4.代码规范(详见:个人知识体系思维导图)从yahoo 新学到的: 网页内容减少http请求次数80%的响应时间花在下载网页内容(im
提高前端性能 梳理:提高前端性能方面的处理以及不足这篇文章发布于 2013年04月3日,星期三,13:52,归类于 css相关。 阅读 61301 次, 今日 17 次by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3152一、清明时节雨纷纷
前端性能优化五:CDN CDN--前端性能优化CDn http://www.bootcdn.cn/jq CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的
前端性能优化四: 我对网站优化总结了几点:网站结构优化,前端代码优化,网页设计优化,链接优化等四个方面。每个优化细节,都产生着交叉式的影响,而且对网站产生着不同的作用。然而前端代码是网站的基础语言,也是搜索引擎认知的语言,所以每个网站都要重视前端代码,今天分享一下,我是如何进行优化前端代码的。前端代码主要包括CSS语言和HTML语言。这里主要说一下CSS代码优化。Css代码优化对网站的好处是:
JS代码优化三:页面优化 影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这
JS代码优化一:谷歌浏览器的timeline工具的使用 谷歌浏览器Timeline用法详解:大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器。点击F12会弹出一个界面,顶部带有功能的选项卡,其中有几个功能强大,但是相对较为复杂,比如Timeline,console和network。(1).关于console的使用可以参阅谷歌控制台console相关命令介绍一章节。(2).关于network的使用可以参阅谷歌浏览器network用
JS代码优化的几种方式 如果你问我网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS。模板中引用的JS文件越多,打开速度越慢,这点我深有体会,不信你看看卢松松博客首页,使劲优化后依然有100K的文件。细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法。(网页总大小为155.k,而JS就占了100.3K)是时候优化下JS了关于JS优化的
ajax内存泄漏的解决方案以及长连接和短连接的详解 转载出处:http://bbs.csdn.net/topics/340234998楼上的情况,现在也出现了。我们在用jquery做一个长轮询的服务,使用ajax不断请求。后来功能没有问题,性能测试时发现IE开久了页面经常卡死,内存只增不减。每次jquery的Ajax请求都会创建一个xmlHttprequest对象,理论上讲,长连接的请求是一个无限递归,请求数量是非常大的,但是由于每
JS中表达式的理解 转载出处:作者:郑航链接:http://www.zhihu.com/question/39420977/answer/81250170来源:知乎著作权归作者所有,转载请联系作者获得授权。表达式:是由运算元和运算符(可选)构成,并产生运算结果的语法结构。以下在ES5中被称为基本表达式(Primary Expression)this、null、argum
JS闭包三:闭包的作用 转载出处:http://www.cnblogs.com/syf/archive/2012/10/04/2711653.htmlJAVASCRIPT----闭包的作用谈(转)note1|note2Javascript 闭包翻译:为之漫笔链接:http://www.cn-cuckoo.com/2007/08/01/understand-javascript-
css的border实现三角形 ‘.div {margin: 0px;height: 0px;width: 0px;border-left: solid 100px green;border-top: solid 200px rgba(0, 0, 0, 0); border-bottom: solid 100px rgba(0, 0, 0, 0);}
js闭包二:应用场景 原文地址:http://blog.csdn.net/yanghua_kobe/article/details/6780181场景一:采用函数引用方式的setTimeout调用闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数。例如,在web环境中,一个函数作为setTimeout函数调用的第一个参数,是一种很常见的应用。setTimeout将要执行
js闭包一:闭包详解 原文地址:http://www.jb51.net/article/24101.htmjavascript深入理解js闭包作者: 字体:[增加 减小] 类型:转载 时间:2010-07-03 我要评论闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域要理解
input标签的readonly属性和disabled属性的区别 原文地址:http://www.cnblogs.com/zcy_soft/archive/2011/09/19/2181211.htmlhtml input readonly 和 disable的区别Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对input
JS面向对象四:继承 原文地址:http://javapolo.iteye.com/blog/1996871js实现继承的5种方式博客分类: js js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可
JS面向对象一:js中的call()和apply() 原文地址:http://www.cnblogs.com/treasurelife/archive/2008/03/05/1092251.html关于JavaScript中apply与call的用法意义及区别(转)JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。先来看看JS手册中对call的解释:call 方法调
JS面向对象三:js的多态特性解析与代码实现 1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>Documenttitle> 6 7 head> 8 script> 9 /*多态的基本概念:一个引用类型(变量)在不同情况下的多种状态。10 js本身是无态的,天生就支持多态。*/11 12 //Master类
JS面向对象二:js对象的几种创建方式 原网页地址:http://www.jb51.net/article/25093.htmjs创建对象的几种常用方式小结(推荐)作者: 字体:[增加 减小] 类型:转载 时间:2010-10-24 我要评论最近在看javascript高级程序设计,其中对对象的创建做了具体的阐述,综合起来,总结了下(je知识库javascript专栏由这方面的教程,有兴趣的可以去知识
跨域请求之三:window.name解决跨域 文章出处:http://www.codesec.net/view/169705.html前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据。 首先我们要简单了解下window.name和iframe的相关知识。 iframe 是html的一个标签,可以在网页中创建内联框架,有个src属性(指向文件地址,html�php等)可以
跨域请求之四:html5中的postMessage()跨域解决方案 html5 postMessage解决跨域、跨窗口消息传递一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法,但
跨域请求之一:单双向跨域详解 文章目录: 跨域-知识 跨域-使用JSONP 跨域-使用js文件 跨域-使用window.name 跨域-使用Proxy page或Cross Frame 由于公司最近要做一个跨域的项目,所以研究了一个跨域,并实践了其中的几中方法。这理总结一下。 什么是跨域?
JQuery的each方法详解 each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc
跨域请求之二:jsonp详解 原文链接前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局
angular的http三种请求方式 就是get post json 三种请求方法 http var app = angular.module('app',[]); app.controller('fristController',['$scope','$http',function($scope,$http){ // get方式//
angular的http服务的常用方式 在实际中的http服务的使用方法,特别注意服务中返回的对象!!!!! http在service中使用 var app = angular.module('app',[]); app.service('mySerivce',function($http){ // 特别注意的是这里返回的对象!!!!
angular的location服务的使用 angular的http使用,就是get,post,jsonp的使用 http的使用 var myApp = angular.module('fristApp',[]); myApp.config(function(){ }) // l
angular路由模拟微信页面切换和页面之间的传值 angular模拟微信页面的切换,页面之间传值。用路由。 路由的使用 *{ padding: 0; margin: 0; } body,html{width: 100%;height: 100%;} .content{position: absolute; top: 0;left: 0;bottom:
angular自定义服务 在与服务有关的几个方法的执行顺序 只有provider可以进行config配置 var myApp = angular.module('fristApp',[],function($provide){ }); myApp.run(function(){
angular的service服务和factory服务 最好用app的属性方法定义服务。 自定义服务 // 可以用$provide service factory var myApp = angular.module('fristApp',[],function($provide){ /* $provide 是调
angular的provider服务 自定义服务其他的方式 var myApp = angular.module('fristApp',[]); // app的配置方法,在这里得到$provide // 这种定义服务方式经常用来进行页面之间的传值 // config函数中只使用p
angular过滤器的使用和自定义过滤器 过滤器的使用。一种是在html中的使用,一种是在js代码中的使用。 过滤器 {{money | currency}} {{money | currency:'¥'}} {{str | uppercase}} {{json | json}}
用angular把页面中的元素按照页面分离开 把一个子页面中大量的元素分离到另外一个页面中。 fffffffff var myApp = angular.module('fristApp',[]); myApp.controlle
angular用ng-repeat批量处理数据 一般用ul li 里面写一堆数据,如果数据是json数据就可以用ng-repeat处理。 {{p.age}} {{p.name}} var myApp = angular.module('fris
angular的切换页面 用绑定点击事件来相应页面之间的切换。 *{padding: 0; margin: 0;} html,body{ width: 100%; height: 100%; position: relative; } .wrapper{width: 100%; height: 100%; background:
angular的几种元素隐藏的方式 ng-show和ng-if 等几个隐藏显示元素的方法。 .box{ width: 100px; height: 100px; background: red; } <!--定义一个开关,只有当父div中子元素的相应变量值等于c
angular的自定义属性和ng-href属性 baidu baidu var myApp = angular.module('fristApp',[]); myApp.controller('fristController',function($scope){ console.log("fuji"); $scope.addr = "http://www.ba
angular中的ng-class的几种常用方式 ng-calss的几种使用方法。 .red{ width: 100px; height: 100px; background: red; } .green{ width: 100px; height: 100px;background: green; }
angular中创建多个app 在页面中还是只有一个ng-app,但是在js代码中创建多个app。 {{name}} {{name}} {{name}} var app1 = angular.module('frist',[]); var app2 = angular.mod
angular中字符串和对象的转换等常用方法 把字符串转化成json数据。json数据的遍历。 作用域 var myApp = angular.module('my-frist-app',[]) myApp.controller('fristController',function($scope,$rootScope){
angular的watch监听 watch比较消耗性能,所以用完后就要消除监听 作用域 商品数量: 商品单价: 商品总价:{{count*price}} 邮费:{{youFei}} 总计: var myApp = angular.module('my-frist-app',[]) // $watc
angular的脏检查 如果用js的方法改变了属性的值,就需要手动刷新页面。timeout,interval,scpe,都需要注入。其中前两者不需要手动刷新。 .box{ width: 100px; height: 100px; background: chartreuse; } <!-- ng-clic
angular的作用域 run()是在应用程序加载完成后直接调用的。$rootScope是全局的,是作用在ng-app上的,$scope是作用在局部controller的。 作用域 {{obj.name}} var myApp = angular.module('my-frist-app',[])
angularJS的控制器 angularJS控制器。因为ng-app是控制整个应用的,一般一个应用中只有一个ng-app。而一个应用中有好多个界面,这样就需要按照页面的需要划分作用域,每一个页面划分一个作用域,就是用controller划分的,每一个controller就是一个页面的作用范围,controller可以嵌套,他的作用域的规则和JS一样,子可以访问父,父不能访问子。每个contr和html元素之间通过$scop
angularjs的基本使用 编写一个简单的angularjs的程序。介绍了ng-app指令的作用和ng-model的作用ng-bind作用。 事件的双向绑定。事件的双向绑定的理解:angular是使用MVC模式的,就是model和view和controller,我们运行程序时会出现界面,我们改变输入框中的值就是改变了vew,view的改变就会引起model的改变,同事model的改变也是得model控制的view改变(一个m
用css3transform做出3D旋转的骰子 这个效果利用了3D旋转平移,主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做,他的xyz轴并不是开始时吧的xyz轴的方向,他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。 .wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto
把图片导入到canvas 把图片导入到canvas中,可以吧图片当做绘制图形的边框背景,也可以直接加载,注意点是进行的操作要在noload方法总进行,同时对她进行的变形操作都要在哪个方法外面进行。 #myCanvas{border: 1px solid black;} var oContent = document.getElementById("myCan
把canvas绘制的图形导出成图片 在canvas中绘制的图形可以导出成图片。是用canvas时要注意的是width和height要以属性的方式来下,不能放在style里面来写,否则canvas的大小就是按照把150*300扩大或者缩小了。Your browser does not support the HTML5 canvas tag.var c=document.getElementById("myCa
css3的3D图片旋转 在这个里面主要就是注意着几个属性的设置perspective: 1000px; transform-style: preserve-3d; 其中perspective: 1000px; 要设置在父元素上面, transform-style: preserve-3d; 是设置中心元素的属性。所有的图片的变形都是相对于中间div的。 .wrap{wi
css3transform动画 这个程序是写用transform的动画座位关键帧的形式做的动画。其中要注意的是,transform动画的原点,旋转的原点是以自己的左上角,平移的参照点一直都是屏幕的左上角,出非手动更改。 #box{width: 200px;height: 200px;background: red; animation: move 4s infinite e
css3D效果 css3D是实现也可以分为三步。1 在父元素上面设置视点 2 设置动画的方式 3 设置具体的动画这是一个最简单的动画。就是为了写一下动画的步骤。 #box{ width: 500px;height: 500px;border: 1px solid black; perspective: 1000px; transform
css3动画,一张背景图两行图片 这个css3动画的实现和上一篇的css3动画的实现原理是一样的。不同的是这个动画的背景图片是一张两行图片的背景图。不用过原理还是一样的。最终要的是对背景图片的位置坐标的计算,一定要设置正确。 .box{background: url(img/1.jpg) no-repeat; margin: 0 auto; background-position:
css3动画 先说一下css中的思路吧,下面有完整代码。因为这里不能上传项目。所以没有图片这段代码就不能直接运行了。不过也没事,都学到这里了,估计都有自学能了,我把思路说一下理解了就能很快写出来了。这里写的动画其实跟以前做的轮播图是类似的,不同的地方的这个动画用的是关键帧而不是过度效果的动画。这个关键帧听起来有点不是太好理解,说才了就像以前交卷电影一样,用很短的时间瞬间切换图片(这里是背景图片),所以给人的视觉
jQuery楼梯 用jQuery找到文档中的相应的div的top值,在赋值就可以实现楼梯效果了 #wra div{ width: 1028px; height: 726px; text-align: center; font-size: 100PX; line-height:726px; } #wra #div1{
jQuery动画 jQuery动画就是对各种动画进行封装和性能优化。jQuery的动画分为三种:非自定义动画,自定义动画,全局动画设置。一:非自定义动画:1:显示,隐藏show(),hide(),toggle()参数是number类型的,代表运动时间。还有三种字符串形式的的参数:fast,slow,空字符串。分别代表200,400,600.2:滑动sliddeUp()
css3新增属性设置图片特效 在这里主要用到了css3的选择器,还有transform属性,其中有平移,旋转,还有延时操作。 #content{width: 100%; height: auto;} .box{width: 32%; height: 300px;float: left;margin: 3px; border: 1px solid hotpink; position
jquery实现动态添加控件,删除控件,页面性能优化 DOCTYPE html>html>head>metacharset="UTF-8">title>title>scriptsrc="js/jquery.js">script>styletype="text/css">style>head>body>inputtype="text"placeholde
jQuery实现添加“成绩单” 搜索功能和清除功能 遇到的问题有: 最大的问题就是遇到了jQuery对象和DOM对象的转化。刚开始不知道有jQuery和dom之间的转化问题,就糊里糊涂的把jQuery对象转换成了DOM对象,然后在使用jQuery方法时就出问题了。 $('input[value=注册]').click(function
jQuery的bind()的三种使用方式事件监听 bind的三种使用方法1:直接的加方法名和 函数(可以是匿名函数也可以是一般函数)2:一次性的添加多个事件名,使用同一个处理函数3:添加对个函数,每个函数一个处理函数。移除事件监听 可以直接加事件名 alert($("input[value=按钮]")[0].value) $("input[value=按钮]").bind(
jQuery实现楼梯 用jQuery找到文档中的相应的div的top值,在赋值就可以实现楼梯效果了 #wra div{ width: 1028px; height: 726px; text-align: center; font-size: 100PX; line-height:726px; } #wra #div1{ ba
选项卡jQuery实现 思路:就是刚开始把所有的的div都设置成display none。只设置一个是block。没次点击就改变他们的display属性值。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js"></script>
query的DOM操作 jQuery对dom操作的方法进行了封装,简化了操作,而且也把大部分的兼容问题解决了。jQuery的遍历:祖先:parent()parents()parentsUntil()后代:children()find()兄弟:siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
jQuery选择器使用 jQuery是一个由john resig写js的类库。它就是把一些js的函数封装起来的框架,简化了js的使用,用最少的代码做更多的活。js还把前端最头痛的很多浏览器兼容问题解决了。jQuery的导入有两种方式:第一种就是用src导入,第二种就是用http://libs.baidu.com/jquery/2.0.0/jquery.js">导入。(线上的cdn方式:就是尽可能避开影响数据传输的稳定速率
jQuery选择器的基本使用 建立12个div,每次刷新的时候就随机的让其中一个div改变颜色。当点击屏幕是就把变色的div所在的那一行都变色。靈雲星火 .parent{ width: 850px; height: 220px; } .parent div{ float: left; width: 200px; height:
JS中工厂方法和构造函数创建的对象的关系 通过工厂方法和构造函数创建对象的方式和区别。 // 工厂模式创建对象 // 缺点是不能指出实例之间的关系。 function creatPerson (name,age){ var person = new Object(); person.name = name; person.age = age; return per
多个值存储到一个cookie中 首先存储在一块的数值应该是相关联的。就是把多个值用一个特殊字符连接起来,(特殊字符就是为了截取字符),然后用一个键来存储连接的字符串。用document.cookie直接获取cookie的内容 var textName = document.getElementById("textId"); var pass = docum
cookie的使用方法,截取字符串 cookie的使用方法。document.cookie = "name="+textName.value;直接就把数据存储到cookie中,如果继续存储数据的话就会当成字符串往后挨着存储。也就是说cookie就是一长串的字符串,所有的键值对多按照先后顺序存储在里面。取出来的时候就把这个字符串按照字符截取,把相应的值取出来。
把小人移动到鼠标点击的位置 让人移动到鼠标点击的位置。而且移动的速度是变化的。一开始让img的图片是图片1,鼠标点击后就立马变化图片2,清除时钟,根据(event.clientY - imgPre.offsetTop)/10计算速度产生时刻变化的速度。判断小人是否已经走到鼠标点击的位置(需要有X和Y的坐标都到达才行。)清除时钟。var imgPre = document.g