js相册特效 什么是JS特效
大家好,今天小编来为大家解答以下的问题，关于js相册特效，什么是JS特效这个很多人还不知道，现在让我们一起来看看吧！
什么是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的特点是无穷无尽的，只要你有创意。
前端开发中常用到的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='http://www.w3.org/2000/svg'; 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仓库地址：https://github.com/matthewhudson/device.js
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
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是 https://github.com/VincentGarreau/particles.js/
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
<scriptsrc="particles.min.js"></script>
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>
第三步，设置窗口样式
<styletype="text/css">
#particles-js{
z-index:-1;
position:absolute;
top:0;
width:100%;
background:#aaa;
}</style>
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
}
},"color":{"value":"#ffffff"
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"polygon":{"nb_sides":5
},"image":{"src":"img/github.svg","width":100,"height":100
}
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
}
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
}
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
}
}
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"resize":true
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
}
},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"duration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});
文章到此结束，如果本次分享的js相册特效和什么是JS特效的问题解决了您的问题，那么我们由衷的感到高兴！