js原生特效代码（js原生特效代码是多少）

今天给各位分享js原生特效代码的知识，其中也会对js原生特效代码是多少进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、JS图片特效代码怎么修改？？
• 2、寻找js/jquery特效代码？？
• 3、前端开发中常用到的js特效有哪些
• 4、能帮我逐句翻译一下js特效的代码吗，靴靴

JS图片特效代码怎么修改？？

打开那个特效网站，然后 单击 查看→源代码，找到下面这一段代码：div id="imageFlow"

div class="top"

/div

div class="bank"然后把rel=" "里面的地址改为你图片的地址，可以在百度里面找一些你喜欢的图片，改了就可以了哈

寻找js/jquery特效代码？？

script src=""/script

script src=""/script

你直接看你上面的网站，右键，源代码，就知道他是如何使用了

前端开发中常用到的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

能帮我逐句翻译一下js特效的代码吗，靴靴

这个函数是求如图蓝线的长度  黑色是当前窗口   绿色是hover的元素

function move( ev , bool) {

var top = $(this).offset().top;

var bottom = top + $(this).height();

var left = $(this).offset().left;

var right = left + $(this).width();

这个函数是求相对于当前页面  hover元素的四条边的距离

然后计算

var sT = Math.abs(y - top),   //鼠标位置到hover元素顶部的距离

sB = Math.abs(y - bottom),   //底部

sL = Math.abs(x - left),    //左边

sR = Math.abs(x - right);  //右边

var a = Math.min( sT , sB , sL , sR );   //然后在这4个距离里面选出最小值    变量a 就是距离最短的值

js原生特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js原生特效代码是多少、js原生特效代码的信息别忘了在本站进行查找喔。