这是很少用到的一种文字抖动特效,当用户单击鼠标后,文字跟随漂浮并抖动显示效果,根据自己的需求自定义文字。
<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>单击鼠标文字漂浮抖动特效_武鸣人</title> <style type="text/css"> *{margin:0;padding:0;} html,body{width:100%;height:100%;border:1px solid green;} div{width:100;height:20;overflow:hidden;margin:10px;} </style> <script type="text/javascript"> function ani(obj,what,value,callback){ var tid; var ctrVal = getStyle(obj,what)||0; var stp = (value-ctrVal)/7; var _what = what.replace(/-/,""); if(Math.abs(stp)>=1){ obj.style[_what] = ctrVal + stp + "px"; tid = setTimeout(function(){ ani(obj,what,value,callback); } ,40); } else{ if(Math.abs(stp)>0.2){ obj.style[_what]=ctrVal + (stp>0?1:-1) + "px"; tid=setTimeout(function(){ ani(obj,what,value,callback); } ,40); } else{ obj.style[_what]=value+"px"; if((typeof callback).toLowerCase() =="function") callback(); } } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function getStyle(obj,styleName) { var o = (typeof obj).toLowerCase()=='object'?obj:document.getElementById(obj); if(o.currentStyle){ styleName = styleName.replace(/-/g,""); var y = o.currentStyle[styleName]; } else if(window.getComputedStyle) var y = document.defaultView.getComputedStyle(o,null).getPropertyValue(styleName); return parseInt(y); }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function cb(){} window.onload=function() { var dv = document.getElementById('wuming_ren'); ani(dv,'width',317,function(){ ani(dv,'height',104,cb); }); document.body.onclick=function(e){ if(!e)e=window.event; ani(dv,'margin-Left',e.clientX); ani(dv,'margin-Top',e.clientY); } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div id="wuming_ren">点击鼠标左键试试!</div> </body> </html>
本文来自武鸣人网站,转载请注明出处