本文目录一览：
jq特效和js特效区别
从用户的角度来看特效之间的区别是没有的因为他直观的展示的是效果。可以这么放心的告诉你。jquery所有做出的效果都是基于js的。属于另类的js。就像现在其他编程语言无法脱离汇编语言机器语言一样。“他的底层实现必须依靠他。”
jquery只是一个js的函数框架集。他封装了很多js实现起来比较繁琐的事情。让编写脚本提供了很大的方便。而且很多的方法写的比自己写的高效。而且这个框架很全很强大。基本上可以满足目前所有coding对于web开发的需要。但是尽管如此jquery还是有他不住的地方。毕竟jquery只是一个框架集。他真正的实现还是靠javascrpit。所以javascript才是基础，才是根基。如果你想的明白其实有些效果用js实现比jquery的代码不一定少。而且你如果要使用jquery就必须至少要加载一次jquery。如果你的项目里面仅仅只写有几行很简单并且js可以轻松解决的代码。那加载一次是不是有点太得不尝失呢。并且如果一旦jquery库你调用出现问题。你要跟踪到里面去调试希望找出答案是不是又很麻烦因为一般到手的jquery库都是经过混淆代码压缩的N个函数在一行。因此如果要学习客户端的脚本语言建议至少学一些基本的javascript对他做个基本了解。然后再去学习jquery。这样会让你学起来事半功倍的。
(ps:学习我推荐一个网站吧！ 当时我学习jquery自学了2天，就基本上能应付我工作上所有的需要了。那2天就是在那个网站看资料。写demo。)
本来准备作为评论来发的。但是那里放不下。因为我觉得上面那哥们已经在追问中回答得很好了。
JS特效代码，让网页打开时候最小化，6秒后最大化。追加100分
object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″
param name=”Command” value=”Minimize”/object
input type=button value=最小化 onclick=hh1.Click()
这个你可以试试。但只针对ie，其他的多标签浏览器似乎不能实现
前端开发中常用到的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
网页特效代码
在HTML文件中添加网页特效代码，一般有三种情况。
第一，只加在HTML文件头部，即HTML文件中head……/head之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。
第二，只加在HTML文件体部。即HTML文件中body……/body之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。如在你题目中提到的就属于这一类。
除上述情况外，多数代码需要先在头部（head……/head之间）在上一些属性性质的代码，但是特效的主代码需要添加在体部（body……/body之间），否则，特效不能正常显示，有时还会出现错误，影响整个页面的正常显示。
添加特效代码的方法：
先要用HTML编辑软件，如常见的文本编辑器“记事本”，打开需要编辑的文件，根据特效代码的要求，在文件中找到相应位置，复制，粘贴特效代码，保存即可。修改完毕后，即可在浏览器中看到相应的效果。
在添加的时候一定要注意，一定要按照特效源码的要求添加，此外，还要保证源码的完整性，一个标点符号都不能少，也不能多。
另外要说的是，根据我的经验，直接从网上复制来的代码，不一定都能直接粘贴了用，一部分必须通过一个软件来中转。比如，先把网上的代码复制后，粘贴到“记事本”中，然后再复制、粘贴到相应的文件位置上。
最后，介绍你几个经典网页特效站。
1、网页特效集锦：
2、javascript网页特效：
3、万旭网页特效：
4、网页特效梦工厂：
5、网页制作大宝库网页特效大全：
什么是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 的特点是无穷无尽的，只要你有创意。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/157365.html
微信扫一扫 
支付宝扫一扫 