js特效惊艳（js特效如下图）

本文目录

• js特效如下图
• 前端开发中常用到的js特效有哪些
• js特效是啥子东东
• 求一段精美的JS特效，就是鼠标放到导航上面去就能显示该导航所对应出现的内容
• JS特效模版是什么意思
• HTML5 有哪些让你惊艳的 demo

js特效如下图

你好，

使用jQuery来个简洁版的代码：

完整的代码有点多，不列了，在codepen上看吧：

但是看楼主对别人问题的追问应该是不太会JS，CSS方面的兼容性问题应该没什么问题哇！

希望能解决你的问题，如有疑问可追问！

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

HTML5 DOM 选择器// querySelector() 返回匹配到的第一个元素var item = document.querySelector(’.item’);console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll(’.item’);console.log(items);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 || // firefoxvar 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检测浏览器是否支持svgfunction isSupportSVG() {var SVG_NS = ’http://www.w3.org/2000/svg’; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, ’svg’).createSVGRect; } // 测试console.log(isSupportSVG());1234567检测浏览器是否支持canvasfunction 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());1234567891011jQuery 获取鼠标在图片上的坐标$(’#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常用的一些正则表达式//匹配字母、数字、中文字符 /^(+;( U;)? CPU.+Mac OS X/), //iosandroid: u.indexOf(’Android’) 》 -1 || u.indexOf(’Linux’) 》 -1, //androidiPhone: u.indexOf(’iPhone’) 》 -1 , //iPhoneiPad: u.indexOf(’iPad’) 》 -1, //iPadwebApp: 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.offsetTop123456HTML5全屏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特效是啥子东东

字面来解释说javascript,vbscript代码形成的网页特殊效果简单的说网页那些个性酷的效果都需要js来完成的，像我们最常见的网页上器，使用过html器的吧这些功能就算是js特效的。

求一段精美的JS特效，就是鼠标放到导航上面去就能显示该导航所对应出现的内容

是书签效果吧？ 《div id=“part3“ class=“marginauto“》 《DIV id=con》 《UL id=tags》 《LI class=“selectTag“》《A onmouseover=“selectTag(’tagContent0’,this)“ href=“javascript:void(0)“》颌面整形《/A》 《/LI》 《LI》《A onmouseover=“selectTag(’tagContent1’,this)“ href=“javascript:void(0)“》鼻部整形《/A》 《/LI》 《LI》《A onmouseover=“selectTag(’tagContent2’,this)“ href=“javascript:void(0)“》其它整形《/A》 《/LI》 《/UL》 《DIV id=tagContent》 《DIV class=“tagContent selectTag“ id=tagContent0》 《div class=“products“》 ewqe 《/div》 《/DIV》 《DIV class=“tagContent“ id=tagContent1》 《div class=“products“》 543534534534 《/div》 《/DIV》 《DIV class=“tagContent“ id=tagContent2》 《div class=“products“》 tretretertret 《/div》 《/DIV》 《/DIV》 《/DIV》 《SCRIPT type=text/javascript》function selectTag(showContent,selfObj){ // 操作标签 var tag = document.getElementById(“tags“).getElementsByTagName(“li“); var taglength = tag.length; for(i=0; i《taglength; i++){ tag.className = ““; } selfObj.parentNode.className = “selectTag“; // 操作内容 for(i=0; j=document.getElementById(“tagContent“+i); i++){ j.style.display = “none“; } document.getElementById(showContent).style.display = “block“;}《/SCRIPT》 《!--part3标签结束--》 《/div》

JS特效模版是什么意思

就是使用javascript做的一些非常漂亮的特效，比如导航条，一些炫酷的动画，这些模板的好处就是只需修改对应的html元素的id 或者class，就可以将这些效果应用到属于你自己的网页上。百度知道上也有很多JS特效，比如抽奖和商城页面的特效就非常炫酷。

HTML5 有哪些让你惊艳的 demo

说起特效来，HTML5还是很值得称道的：

1、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

2、jQuery球状放大镜特效插件

今天我们要来分享一款基于jQuery的放大镜特效插件，和其他放大镜不同的是，这款jQuery放大镜插件是球状的，看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。

3、HTML5 Canvas粒子模拟效果

这是一款利用Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。

4、HTML5/CSS3带区域地图的联系表单

之前我们分享很多样式和功能各异的CSS3联系表单，比如HTML5/CSS3简易联系表单等等，都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。

5、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效，他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的，9个小立方体上下浮动，呈现波浪的效果，并且，这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

希望你也可以学起来呀~