javascript实现dom元素可拖动

2017年02月06日 11 阅读

摘要： 最近在项目中要做一个图片预览的功能，这时候会遇到用户上传很大的图片，已经超出视图界面。最终决定做一个在固定宽和高的位置，用户可以拖动图片查看。所以自己就写了一个支持ie5+，chrome，Firefox，opera等浏览器的可拖动dom元素的插件。实现这个功能所需要的知识点不多，如下：1、js中element.style.leftstyle.left返回的变量是个字符串，是个可改变量 js中element.offsetLeftoffsetLeft...

javascript单页面手势滑屏切换原理详解

2017年02月06日 12 阅读

H5单页面手势滑屏切换是采用HTML5 触摸事件（Touch） 和 CSS3动画（Transform,Transition）来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。1、实现原理假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度（width） 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一...

实践中学习AngularJS表单

2017年02月06日 12 阅读

表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。1.根据输入域数据实时更新输出数据下面代吗实现了一个简易的计算表单，它能将用户输入的数据进行处理，并且实时显示在表单输出域中：<div ng-app="" ng-init="quantity=1;price=5"> 数量： <...

JS DOM实现鼠标滑动图片效果

2017年02月06日 11 阅读

经常，我们在浏览各种网页的时候，都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，详情便会展现在用户面前，而这一动画，就是利用了DOM+JS结合来实现的，今天的小练习就是要实现这个效果。首先，先将页面基本的框架用html实现，将四张图封装在了一个名为“container”的div块中<！doctype ...

快速掌握Node.js之Window下配置NodeJs环境

2017年02月06日 11 阅读

在window下也动手试了下，完美安装，测试通过！1.下载node在https://nodejs.org/en/中下载node，我选的是左侧稳定版本2.安装node将下载的node进行安装如下图一步一步的安装3.安装后检测是否安装node成功安装后会在window开始按钮有一个命令窗口打开之后检测node版本4.安装全局Express5.检测Express是否安装成功6.demo测试1）.创建helloWorld.jsvar http = require（...

快速掌握Node.js模块封装及使用

2017年02月06日 14 阅读

Node.js中也有一些功能的封装，类似C#的类库,封装成模块这样方便使用,安装之后用require（）就能引入调用.一、Node.js模块封装1.创建一个名为censorify的文件夹2.在censorify下创建3个文件censortext.js、package.json、README.md文件1）、在censortext.js下输入一个过滤特定单词并用星号代替的函数。var censoredWorlds=["sad","bad","mad"];var...

快速掌握Node.js事件驱动模型

2017年02月06日 11 阅读

一、传统线程网络模型在了解Node.js事件驱动模型之前,我们先了解一下传统的线程网络模型,请求进入web服务器（IIS、Apache）之后,会在线程池中分配一个线程来线性同步完成请求处理，直到请求处理完成并发出响应,结束之后线程池回收。这就会就会带来以下几个问题 :1.由于线程池中线程个数有限,对于频繁请求时,就会出现等待,严重的甚至会把服务器挂掉2.对于高并发的时候,为了防止出现脏数据就会使用锁来解决,一些I/O事务可能消耗很长得时间,这样就会出现一些...

快速掌握Node.js中setTimeout和setInterval的使用方法

2017年02月06日 11 阅读

Node.js和js一样也有计时器,超时计时器、间隔计时器、及时计时器，它们以及process.nextTick（callback）函数来实现事件调度。今天先学下setTimeout和setInterval的使用。一、setTimeout超时计时器（和GCD中的after类似）在node.js中可以使用node.js内置的setTimeout（callback,delayMillSeconds,[args]）方法。当调用setTime（）时回调函数会在de...

关于JS中match（） 和 exec（） 返回值和属性的测试

2017年02月06日 12 阅读

语法：exec（） ：RegExpObject.exec（string） match（） ：stringObject.match（string）stringObject.match（regexp） 知识点：exec（） 是RegExp对象的方法，而 match（） 是String对象的方法。都会返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回null。返回的数组虽然是Array 的实例，但包含两个额外的属性：index 和 input。其中，i...

使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

2017年02月06日 11 阅读

sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作。在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件，并将演示效果应用到了自己的博客。有了类似sticky的这种简单组件，我们就可以在利用它开发更丰富的效果，比如本文要介绍的tab导航和滚动导航。实现简单，演示效果如下：tab导航（对应tab-sticky.html）：滚动导航（对应n...

浅谈Sticky组件的改进实现

2017年02月06日 12 阅读

在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现，经过这两天的思考，发现上次提供的实现还有较多不足的地方，另外跟别的网站上实现的效果在取消固定的时候也有一些不同，上次提供的取消固定的处理方式不好，本文在上文的基础上，提供一个改进版的sticky组件，功能更加完善，希望您有兴趣阅读。1. 旧版本的问题上一个sticky组件的实现中，有多个问题存在：第一，从sticky的效果上来...

Node.js文件操作方法汇总

2017年02月06日 11 阅读

Node.js和其他语言一样,也有文件操作。先不说node.js中的文件操作,其他语言的文件操作一般也都是有打开、关闭、读、写、文件信息、新建删除目录、删除文件、检测文件路径等。在node.js中也是一样,也都是这些功能,可能就是api与其他语言不太一样。一、同步、异步打开关闭/** * Created by Administrator on 2016/3/21. */var fs=require（"fs"）;//同步读 fs.openSync = fun...

使用getBoundingClientRect方法实现简洁的sticky组件的方法

2017年02月06日 12 阅读

sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底部，方便用户快速进行这类元素提供的操作。本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出来。固定在顶部的demo效果（对应sticky-top.html）：固定在底部的demo效果（对应sti...

使用struts2+Ajax+jquery验证用户名是否已被注册

2017年02月06日 11 阅读

推荐阅读：JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面的例子,我们只希望返回一个1和0有助于进行后续判断即可,没必要返回json类型,返回一个text字符串就可以了.regist.jsp（这里只提供<script&...

浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号

2017年02月06日 12 阅读

1 C,C++,Java,PHP都能容忍末尾的逗号C，C++，Java中对数组赋值时，最后一个元素末尾的逗号可有可无。下面两行代码对这些语言来说是等效的。int a[] = {1,2,3}; /* 正确 */int a[] = {1,2,3,}; /* 正确 */PHP这一点也继承了C的特点，下面的两行代码等效。$a = array（1,2,3）; /* 正确 */$a = array（1,2,3,）; /* 正确 */2 JavaScript视末尾逗号为...

酷炫jQuery全屏3D焦点图动画效果

2017年02月06日 13 阅读

这又是一款很不错的jQuery焦点图动画，它的特点是整个焦点图基本是全屏显示的，非常大气，而且图片的倾斜也给整个焦点图3D立体的视觉效果，而且焦点图的图片切换非常流畅，相当实用。HTML代码：<div class="wrapper"></div><div id="pxs_container" class="pxs_container"> <div class="pxs_bg"> <div class="...

一款简单的jQuery图片标注效果附源码下载

2017年02月06日 12 阅读

为了提高用户体验度，在一些电商网站和家居网站上我们会看到，一张图片中显示多种商品，点击每个商品可以弹出对应商品的简单介绍，包括价格等等，设计非常的人性化，今天我们通过实例给大家分享使用jQuery插件来实现这一效果。先给大家展示下效果图：效果演示 源码下载HTML首先，我们加载jQuery库和easypin插件。<script src="jquery.min.js"></script> <script src="jquery....

jQuery toggle 代替方法

2017年02月06日 12 阅读

具体内容如下所示：$（".back_left dt"）.toggle（function（）{$（this）.addClass（"selected"）;$（this）.siblings（"dd"）.slideUp（）;},function（）{$（this）.removeClass（"selected"）;$（this）.siblings（"dd"）.slideDown（）;}）; 今天在做一个项目，抄了别人网站上的一代码，发现怎么都无法实现，在我急得不想再...

详述JavaScript实现继承的几种方式（推荐）

2017年02月06日 11 阅读

ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现的。原型链原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的指针。如果：我们让原型对象A等于另一个类型B的实例，那么原型对象A就会有一个指针指向B的原型对象，相应的B的原型对象中保存着指向其构造函数的指针。假如B的原型对象又是另一个类型的实例，那么上述的关系依旧成立...

jquery仿QQ登录账号选择下拉框效果

2017年02月06日 12 阅读

QQ登录的时候，可以选择以前登录过的账户，这个东西也可以在网站登录的时候用到，所以我就想做一个这样的插件；在网上查了很多，没有找到合适自己的，所以决定自动制作一个。原理就是一个textbox加一个ul模拟下拉框，用font模拟一个下拉按钮。一、制作静态效果先用css和html，做出一个应该有的样子。这里这两个我使用的是字体，可以在icomoon网站上面自己制作。用字体的好处是和输入框定位很方便，而且还可以控制大小颜色等，唯一的不足是IE6和IE7由于不支持...