本文记录了自己利用原生javascript构建自己的动画库的过程，在不断改进的过程中，实现以下动画效果：针对同一个dom元素上相继发生的动画，针对以下功能，尝试实现方案，（从一个元素向多个元素的拓展并不难，这里不做深入探究）：功能1.知道动画A和动画B的发生顺序（如A先发生，B后发生），能够按照代码撰写顺序实现动画A结束时，动画B调用功能2.在满足功能1的基础上更进一步，当不知道动画A和动画B的发生顺序（如点击按钮1触发动画...
具体代码如下：~function(){var myEffect = {Linear:function(t,b,c,d){return c*t/d+b },Quad: {//二次方的缓动（t^2）；easeIn: function(t,b,c,d){return c*(t/=d)*t + b; },easeOut: function(t,b,c,d){return -c *(t/=d)*(t-2) + b; },easeInOut: function(t,b,c,d){if ((t/=d/2) < 1) return c/2*t*t + b;return -c/2 * ((--t)*(t-2) - 1) + b; }},Cubic: {//三次方的缓动（t^3）ea...
1、批量设置样式setGroupCssfunction setGroupCss(curEle,options){//通过检测options的数据类型，如果不是一个对象，则不能进行批量操作if(Object.prototype.toString.call(options)!=="[object Object]"){return;}//遍历对象中的每一项，调取setCss方法一个个进行设置即可for(var key in options){if(options.hasOwnProperty(key)){setCss(curEle,key,options[key])} }}2、封装css方法//此方法实现了获取、单独设置、批量...
页面中的输入框默认的提示文字一般使用placeholder属性就可以了，即：<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>最多加点样式控制下默认文字的颜色input::-webkit-input-placeholder{color:#AAAAAA;}但是在低版本的浏览器却不支持这个placeholder属性，那么真的要在低版本浏览器也要实现跟placeholder一样的效果，就需要写个插件来兼容下，下面就细讲一下怎样用jquery来实现这个模拟...
js首先需要的函 window.onload = function() { function $(id) { return document.getElementById(id); } function $arr(array) { return document.getElementsByTagName(array); } function hide(id) { $(id).style.display = "none"; } function show(id) { $(id).style.display = "block"; } }scr...
前言：由于项目需要实现分页效果，上jQuery插件库找了下，但是木有找到自己想要的效果，于是自己封装了个分页组件。思路：主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。1.page.init.css 1 @charset "utf=8"; 2 *{ 3 box-sizing: border-box; 4 padding: 0; 5 margin: 0; 6 } 7 .page{ 8 font-size: 13px; 9 text-align: right;10 }11 .page .page_to{12 display: inlin...
相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解；我阐述一下我自己对于$.fn.custom和$.custom的理解、有理解错误或是有更好的建议直接喷我就好！下面咱们进行简单插件的封装；Jquery为开发插件提供了两个方法，分别是：$.fn.INFOplug= $.INF_Oplug=function(){}先简单的阐述下这两种方法：这两个分别是:$.INFplug;是为了扩展jquery本身，为类添加新的工具方法;$.fn.INFOplug;给jquery对象添加方法...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> td { text-align: center; } </style></head><body><p> <select id="yearSelect"></select> <select id="monthSelect"></select><strong></strong></p><table id="tab" width="100%" border="1"> <thead> <tr> <th>日</th> <th>一</th> <th>二...
/*** @overview A minimalistic wrapper around React Natives AsyncStorage.* @license MIT*/ import { AsyncStorage } from react-native; import merge from lodash;const store = {/*** Get a one or more value for a key or array of keys from AsyncStorage* @param {String|Array} key A key or array of keys* @return {Promise}*/get(key) {if(!Array.isArray(key)) {return AsyncStorage.getItem(key).then(value => {r...
GET方式的在线：DEMO POST方式在线：DEMO// 1、封裝AJAX函數function nativeAjax(option,success,error){// 定义domain,方便环境切换var domain=https:// + window.location.host + /;var url=domain+option.urlStr;var type=option.ajaxType;var data=option.ajaxData;var xhrRequest=null;if(window.XMLHttpRequest){xhrRequest = new XMLHttpRequest();} else {xhrRequest = new ActiveXObject(Microsoft.XMLHTTP)}var str=null...
模块化就是通过每一个js里封装一个方法：用exports将他输出， 在下一个js用require的方法加载js时就会将方法输出。然后在主页面引入require.js; 模块化基本写法：define(function(require,exports,module){}) require:加载一个模块，后面跟的是一个js文件名 exports:输出 module:模块举一个例子： 第一个js文件 ,get.js: define(function(require,exports,module){ //将封装的这个函数，作为要输出的一个方法...
给大家出一道题，从起点A走到目的地B，一共用了1000毫秒，每一次是30毫秒，请问你在这里面得到了哪些信息？ 信息有哪些呢？ 第一个，总时长是:1000毫秒 第二个，多久时间走一次？30毫秒 第三个，走的总次数:1000/30 第四个，距离:B-A 第五个，步长：距离/总次数运动框架的实现思路：就是在一定的时间段里面改变left、top、width、height，到达目的地之后停止。可以先思考一下，在页面里如何让div动起来？ 思考如下：...
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name];//不兼容IE } } function move(obj,json,complete) {// 用计时器前先清除...
这篇文章主要介绍了使用Require.js封装原生js轮播图的实现代码,需要的朋友可以参考下index.html页面:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css">*{margin: 0;padding: 0;list-style: none;}#banner{width: 830px;height: 440px;border: solid 1px;margin: 50px auto;position: relative;overflow: hidden;}#banner ul{position: absolute;left: 0;top: 0;...
经过前两部分的讲解，我们大概知道内容滑动切换的基本开发思路和技巧，现在我们在第三部分将前面两部分的代码进行优化，封装成一个jQuery插件：jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。查看演示 下载源码hwSlider具有以下特性：多个参数定制，满足不同项目需求。 支持移动端触控滑动。 支持图文混排，支持各种html元素。 响应式自适应屏幕尺寸。 同一页面支持多个滑动...