javascript特效库,js特效网站有哪些

javascript框架有哪些

目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛 应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。

优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持

缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。

Prototype （JS OO library）：

是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样 的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。

优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。

缺点：如果说缺点，可能就是功能是他的弱项

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般

优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果

缺点：刚刚兴起，需要时间的磨练

yui-ext (JS UI component)：

基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件 能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。

缺点：太过复杂，整个界面的构造过于复杂。

Jquery ：

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，

优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数

缺点：据说太嫩，历史不悠久。

Mochikit ：

MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器

优点：MochiKit.DOM这部分很实用，简介也是很突出的

缺点：轻量级的缺点

mootools ：

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。

缺点：不大不小，具体应用具体分析

moo.fx ：

moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。

优点：小块头有大能耐

缺点：这么小了，已经不错了

相关问答

Q1: 什么是JS特效

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料：

能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。

Q2: 前端开发中常用到的js特效有哪些

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567

阻止默认行为

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默认行为

event.preventDefault();

} else{ // ie 阻止默认行为

event.returnValue = false;

}

}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();

});1234567891011121314151617

阻止冒泡

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡

event.stopPropagation();

} else{ // ie 阻止冒泡

event.cancelBubble = true;

}

}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();

});1234567891011121314151617

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) {

// chrome ie || // firefox

var delta = (event.originalEvent.wheelDelta (event.originalEvent.wheelDelta 0 ? 1 : -1)) || (event.originalEvent.detail (event.originalEvent.detail 0 ? -1 : 1));

if (delta 0) {

// 向上滚动

console.log('mousewheel top');

} else if (delta 0) { // 向下滚动

console.log('mousewheel bottom');

}

});123456789101112

检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = ''; return !!document.createElementNS !!document.createElementNS(SVG_NS, 'svg').createSVGRect;

}

// 测试console.log(isSupportSVG());1234567

检测浏览器是否支持canvas

function isSupportCanvas() {

if(document.createElement('canvas').getContext){ return true;

}else{ return false;

}

}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910

检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}// 测试alert(isWeiXinClient());1234567891011

jQuery 获取鼠标在图片上的坐标

$('#myImage').click(function(event){

//获取鼠标在图片上的坐标

console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);

//获取元素相对于页面的坐标

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);

});1234567

验证码倒计时代码

!-- dom --input id="send" type="button" value="发送验证码"12

// 原生js版本var times = 60, // 临时设为60秒

timer = null;

document.getElementById('send').onclick = function () {

// 计时开始

timer = setInterval(function () {

times--; if (times = 0) {

send.value = '发送验证码';

clearInterval(timer);

send.disabled = false;

times = 60;

} else {

send.value = times + '秒后重试';

send.disabled = true;

}

}, 1000);

}1234567891011121314151617181920

// jQuery版本var times = 60,

timer = null;

$('#send').on('click', function () {

var $this = $(this); // 计时开始

timer = setInterval(function () {

times--; if (times = 0) {

$this.val('发送验证码');

clearInterval(timer);

$this.attr('disabled', false);

times = 60;

} else {

$this.val(times + '秒后重试');

$this.attr('disabled', true);

}

}, 1000);

});12345678910111213141516171819202122

常用的一些正则表达式

//匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号

/^1[3|5|8|7]\d{9}$/

//验证URL

/^http:\/\/.+\./

//验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式

/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

js时间戳、毫秒格式化

function formatDate(now) {

var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1

var d = now.getDate(); var h = now.getHours();

var m = now.getMinutes();

var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;

}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415

js限定字符数（注意：一个汉字算2个字符）

input id="txt" type="text"//字符串截取function getByteVal(val, max) {

var returnValue = ''; var byteValLen = 0; for (var i = 0; i val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen max) break;

returnValue += val[i];

} return returnValue;

}

$('#txt').on('keyup', function () {

var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length 14) { this.value = getByteVal(val, 14);

}

});12345678910111213141516171819

js判断是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigator.userAgent;

return {

trident: u.indexOf('Trident') -1, //IE内核

presto: u.indexOf('Presto') -1, //opera内核

webKit: u.indexOf('AppleWebKit') -1, //苹果、谷歌内核

gecko: u.indexOf('Firefox') -1, //火狐内核Gecko

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios

android: u.indexOf('Android') -1 || u.indexOf('Linux') -1, //android

iPhone: u.indexOf('iPhone') -1 , //iPhone

iPad: u.indexOf('iPad') -1, //iPad

webApp: u.indexOf('Safari') -1 //Safari

};

}

}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {

alert('移动端');

}123456789101112131415161718192021

之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 百度

GItHub仓库地址：

getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;

var y = myDiv.getBoundingClientRect().top;

// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456

HTML5全屏

function fullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen();

}}

fullscreen(document.documentElement);12345678910111213

Q3: 求助！JS特效！！

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" /

link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" /

link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" /

script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"

/script

script type="text/javascript"

ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")

function nTabs(thisObj,Num){

if(thisObj.className == "active")return;

var tabObj = thisObj.parentNode.id;

var tabList = document.getElementById(tabObj).getElementsByTagName("li");

for(i=0; i tabList.length; i++)

{

if (i == Num)

{

thisObj.className = "active";

document.getElementById(tabObj+"_Content"+i).style.display = "block";

}else{

tabList[i].className = "normal";

document.getElementById(tabObj+"_Content"+i).style.display = "none";

}

}

}

/script

style type="text/css"

body{font-size:12px; font-family:Verdana,"宋体";}

p,ul{margin:0px; padding:0px;}

td,div{font-size:12px}

.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}

.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}

.test{text-decoration:underline;}

#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}

#b1 div.s strong{color:#0066FF;}

/* */

.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}

.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}

.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}

#ddtopmenubar,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}

#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}

#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}

#b8 div a{margin-right:20px;}

.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}

.nTab{

float: left;

width: 100%;

margin: 0 auto;

border-bottom:1px #AACCEE solid;

background:#d5d5d5;

background-position:left;

background-repeat:repeat-y;

margin-bottom:2px;

}

.nTab .TabTitle{

clear: both;

height: 22px;

overflow: hidden;

}

.nTab .TabTitle ul{

border:0;

margin:0;

padding:0;

}

.nTab .TabTitle li{

float: left;

width: 70px;

cursor: pointer;

padding-top: 4px;

padding-right: 0px;

padding-left: 0px;

padding-bottom: 2px;

list-style-type: none;

font-size: 12px;

text-align: center;

margin: 0;

}

.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}

.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}

.nTab .TabContent{

width:auto;background:#fff;

margin: 0px auto;

padding:10px 0 0 0;

border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;

}

.none {display:none;}

/style

/head

body

!-- 选项卡开始 --

div class="s"

div id="ddtopmenubar" class="mattblackmenu"

ul

li class="active" onclick="nTabs(this,0);"a href="#"规划报告/a/li

li class="normal" rel="ddsubmenu3"a href="#"规划工程库/a/li

li class="normal" onclick="nTabs(this,5);"a href="#" 工程专题/a/li

/ul

/div

!--Top Drop Down Menu 3 HTML--

ul id="ddsubmenu3" class="ddsubmenustyle"

a href="#" class="normal" onclick="nTabs(this,1);"工程属性汇总表/a

a href="#" class="normal" onclick="nTabs(this,2);"开竣工时间表/a

a href="#" class="normal" onclick="nTabs(this,3);"投资汇总表/a

a href="#" class="normal" onclick="nTabs(this,4);"工程特性汇总表/a

/ul

!-- 内容开始 --

div class="TabContent"

div id="myTab1_Content0" 000 /div

div id="myTab1_Content1" class="none" 111 /div

div id="myTab1_Content2" class="none" 222 /div

div id="myTab1_Content3" class="none" 333 /div

div id="myTab1_Content4" class="none" 444 /div

div id="myTab1_Content5" class="none" 555 /div

div id="myTab1_Content6" class="none" 666 /div

/div

/div

!-- 选项卡结束 --

/div

/body

/html

Q4: 关于Javascript 特效代码

script language="JavaScript"

!-- Hide the script from old browsers --

function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj

{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同

var one = '1' //定义一个字符型的1

var two = '2' //定义一个字符型的2

var three = '3' //定义一个字符型的3

var four = '4' //定义一个字符型的4

var five = '5' //定义一个字符型的5

var six = '6' //定义一个字符型的6

var seven = '7' //定义一个字符型的7

var eight = '8' //定义一个字符型的8

var nine = '9' //定义一个字符型的9

var zero = '0' //定义一个字符型的0

var plus = '+' //定义一个字符型的+

var minus = '-' //定义一个字符型的*

var multiply = '*' //定义一个字符型的*

var divide = '/' //定义一个字符型的/

var decimal = '.' //定义一个字符型的.

function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj

{obj.expr.value += string} //让 obj的值加上 '+'后面的值

function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj

{obj.expr.value = ''} //让obj的值等于空

// --End Hiding Here --

/script

form name="calc"

table border=1

td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr

!--提交表单--

tdinput type="button" value=" 7 " onClick="enter(this.form, seven)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 8 " onClick="enter(this.form, eight)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 9 " onClick="enter(this.form, nine)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" / " onClick="enter(this.form, divide)"!--当鼠标点

击按钮的时候提交给函数按钮中的值--

trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"!--当鼠标

点击按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 5 " onClick="enter(this.form, five)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 6 " onClick="enter(this.form, six)"!--当鼠标点击按

钮的时候提交给函数按钮中的值--

tdinput type="button" value=" * " onClick="enter(this.form, multiply)"!--当鼠标

点击按钮的时候提交给函数按钮中的值--

trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"!--当鼠标点

击按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 2 " onClick="enter(this.form, two)"!--当鼠标点击按

钮的时候提交给函数按钮中的值--

tdinput type="button" value=" 3 " onClick="enter(this.form, three)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" - " onClick="enter(this.form, minus)"!--当鼠标点

击按钮的时候提交给函数按钮中的值--

trtd colspan=2input type="button" value=" 0 " onClick="enter

(this.form, zero)"!--当鼠标点击按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" . " onClick="enter(this.form, decimal)"!--当鼠标

点击按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" + " onClick="enter(this.form, plus)"!--当鼠标点击

按钮的时候提交给函数按钮中的值--

trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"!

--提交表单在javascript中进行运算--

td colspan=2input type="button" value="AC" size= 3 onClick="clear(this.form)" !--

点击此按钮调用此函数--

/table

/form