js菜单特效代码（炫酷的js特效代码）

本篇文章给大家谈谈js菜单特效代码，以及炫酷的js特效代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、前端开发中常用到的js特效有哪些
• 2、谁内给我讲一将如下 下拉菜单的js代码
• 3、浏览器怎么设置启用显示javascript代码JS效果
• 4、用js做网页下拉菜单缓慢向下的特效代码

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

第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。

第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样

第三 触发这个函数时 把子菜单的显示属性设置为显示 如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性 这里可以改成menu.style.display="";

第四 document.onclick = hidmenu；是给网页单击事件指定处理函数

这是例子，如果是放到实际网页里就不能这么写了

最好是给每个a标签指定 onclick事件

像下边一样 a href="javascript:showmenu()"下拉菜单/a

浏览器怎么设置启用显示javascript代码JS效果

浏览器设置启用显示javascript代码JS效果方法步骤如下：

1点击打开浏览器的菜单【工具】，然后选择【选项】-【internet选项】；如果是IE用户，可以直接在IE图标上点击右键，选择属性进入。

2打开Internet选项设置窗口后，点击【安全】选项卡，点击【自定义级别】。

3在弹出的【自定义级别】窗口中，找到【脚本】选项一栏。

4然后点击下面的【Java小程序脚本】和【活动脚本】下的【启用】。

5或者也可以将脚本栏目下的所有项都选择到【启用】

6设置完成后，点击窗口右下角的【确定】按钮，弹出询问是否更改时，点击【是】。

7最后，在Internet属性窗口中，点击【应用】-【确定】关闭退出即可在浏览器中启用Javascript代码并显示特效了。

用js做网页下拉菜单缓慢向下的特效代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

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

title下拉菜单/title

style type="text/css"

*{margin:0; padding:0}

#nav{width:200px; margin:50px}

#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}

#nav a{display:block; line-height:24px;color:#666666}

#nav a:hover{background-color:#eee; color:#000;}

#nav div{display:none; border:1px solid #000; border-top:none}

/style

script type="text/javascript"

function $(id){return document.getElementById(id)}

window.onload = function(){

$("nav").onclick = function(e){

var src = e?e.target:event.srcElement;

if(src.tagName == "H3"){

var next = src.nextElementSibling || src.nextSibling;

next.style.display = (next.style.display =="block")?"none":"block";

}

}

}

/script

/head

body

div id="nav"

h3管理区/h3

div

a href="#"建议/a

a href="#"链接/a

a href="#"联系/a

/div

h3交流区/h3

div

a href="#"JavaScript/a

a href="#"Delphi/a

a href="#"VC++/a

/div

/div

/body

/html

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