原生JS實現特效留言框
阿新 • • 發佈:2021-08-24
本文給大家分享一個用原生實現的特效留言框,效果如下:
實現程式碼如下,歡迎大家複製貼上。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實現特效留言框</title> <style> * { margin: 0; padding: 0 } textarea { overflow: auto; resize: none; } li { list-style: none; } html { height: 100%; } body { background: #570226; height: 100%; font: Arial,Helvetica,sans-serif; } h2 { font-family: Arial,sans-serif } .wrap { width: 740px; height: 498px; background-color: #a72244; border-radius: 30px; position: absolute; top: 50%; left: 50%; margin-left: -370px; margin-top: -249px; overflow: hidden; } #head { position: absolute; left: 50px; top: 20px; font-size: 20px; color: #fff; line-height: 28px; text-shadow: 2px 2px 0 #a72244; } #head .title { position: absolute; width: 340px; top: -100px; } #head .url { font-size: 14px; position: absolute; top: 28px; opacity: 0; filter: alpha(opacity=0); left: 700px; width: 340px; } #list { position: absolute; left: 164px; top: -100px; } #list li { position: absolute; top: 0; left: 0; } .list-left { width: 80px; height: 80px; background-color: red; border-radius: 40px; position: relative; text-align: center; line-height: 80px; font-size: 20px; color: #f8f8f8; z-index: 5; } .text { width: 0; height: 0; border: 1px solid #4C4042; line-height: 26px; font-size: 12px; font-family: Arial,sans-serif; color: #000; position: absolute; left: 30px; top: 20px; z-index: 2; border-radius: 19px; outline: none; } #btn { width: 50px; height: 50px; background-color: red; border-radius: 40px; position: absolute; text-align: center; font-size: 12px; color: #fff; padding: 15px; line-height: 20px; text-decoration: none; z-index: 20; left: 335px; top: -240px; } </style> <script src="js/public.js"></script> <script> window.onload = function () { toHead(); }; // 歡樂的留言框 文字特效,很經典 function toHead() { var oHead = id("head"); var oUrl = oHead.children[1]; var oTitle = oHead.children[0] var aTitle = oTitle.innerHTML.split(""); var iNow = 0; var oTimer = null; var i = 0; // 將 "歡樂的留言框" 進行拆分 for (i = 0; i < aTitle.length; i++) { aTitle[i] = "<span>" + aTitle[i] + "</span>"; } oTitle.innerHTML = aTitle.join(""); aTitle = oTitle.children; for (i = 0; i < aTitle.length; i++) { aTitle[i].style.left = aTitle[i].offsetLeft + "px"; aTitle[i].style.top = aTitle[i].offsetTop + "px"; } for (i = 0; i < aTitle.length; i++) { aTitle[i].style.position = "absolute"; } oTimer = setInterval( function () { if (iNow == aTitle.length) { clearInterval(oTimer); // www.baidu.com 運動 starMove(oUrl,{ left: 0,opacity: 100 },function () { // 標題 QQ 內容 親,請完成此處 開始運動 toList(); }); } else { // 歡樂的留言 運動 starMove(aTitle[iNow],{ top: 100 },1); iNow++; } },50); }; function toList() { var oList = id("list"); var oBtn = id("btn"); var aLi = oList.getElementsByTagName("li"); var aText = getClass('text',oList); var aStyle = [ { height: 26,width: 246,paddingBottom: 5,paddingTop: 5,paddingLeft: 50,paddingRight: 50 },{ height: 26,www.cppcns.comwidth: 246,{ height: 140,paddingRight: 50 } ]; var i = 0; for (i = 0; i < aLi.length; i++) { aLi[i].style.zIndex = aLi.length - i; } starMove(oList,{ top: 94 },1,function () { starMove(aText[0],aStyle[0eOTjOC],1); starMove(aLi[2],{ top: 85 },1); starMove(aLi[1],function () { starMove(aText[1],aStyle[1],1); starMove(aLi[2],{ top: 170 },function () { starMove(aText[2],aStyle[2],function () { starMove(oBtn,{ top: 0 },1); }); }); }); }); }; </script> </head> <body> <div class="wrap"> <form method="get" id="form"> <h2 id="head"> <strong class="title">歡樂的留言框</strong> <span class="url">www.baidu.com</span> </h2> <div id="list"> <ul> <li> <h3 class="list-left">標題</h3> <input type="text" value="" class="text" name="title" disabled="disabled" /> </li> <li> <h3 class="list-left">QQ</h3> <input type="text" vhttp://www.cppcns.comalue="" class="text" name="QQ" disabled="disabled" /> </li> <li> <h3 class="list-left">內容</h3> <textarea class="text text1" name="content" disabled="disabled"></textarea> </li> </ul> <a href=":;" id="btn">親,請<br />完成此處</a> </div> </form> </div> </body> </html>
以下是上面引入的最重要的public.js程式碼,裡面封裝了很多有用的方法。
function id(id) { return document.getElementById(id); } function toBrowser() { var browser = navigator.appName; var b_version = navigator.appVersion; if (browser == "Netscape") { return true; } var version = b_version.split(";"); var trim_Version = version[1].replace(/[ ]/g,""); if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) { return false; } else { return true; } } function starMove(obj,target,iType,fnEnd,iDate) { if (obj.timer) { clearInterval(obj.timer); } if (iType == 1) { var sAttr = ""; obj.iSpeed = {}; for (sAttr in target) { obj.iSpeed[sAttr] = 0; } } if (target["transform"]) { if (obj["transform"]) { target["transform"] += obj["transform"]; } else { (obj,sAttr,0); } } switch (iType) { case 0: obj.timer = setInterval(function () { doMoveBuffer(obj,fnEnd); },24); break; case 1: obj.timer = setInterval(function () { domoveFlexible(obj,24); break; } } function doMoveBuffer(obj,fnEnd) { var sAttr = ""; var iEnd = 1; for (sAttr in target) { if (toBrowser() == false && target["transform"]) { continue; } var iNow = parseFloat(css(obj,sAttr)); if (iNow == target[sAttr]) { continue; } else { var iSpeed = (target[sAttr] - iNow) / 5; iSpeed *= 0.75; if (iSpeed > 0) { iSpeed = Math.ceil(iSpeed); } else { iSpeed = Math.floor(iSpeed); } css(obj,iNow += iSpeed); iEnd = 0; } } if (iEnd) { clearInterval(obj.timer); if (fnEnd) { fnEnd.call(obj); } } } function domoveFlexible(obj,fnEnd) { var sAttr = ""; var iEnd = 1; for (sAttr in target) { if (toBrowser() == false && target["transform"]) { continue; } var iNow = parseFloat(css(obj,sAttr)); obj.iSpeed[sAttr] += (target[sAttr] - iNow) / 5; obj.iSpeed[sAttr] *= 0.75; if (Math.round(iNow) == target[sAttr] && Math.abs(obj.iSpeed[sAttr]) < 1) { continue; } else { iNow = Math.round(iNow + obj.iSpeed[sAttr]); css(obj,iNow); iEnd = 0; } } if (iEnd) { clearInterval(obj.timer); if (fnEnd) { fnEnd.call(obj); } } } function css(obj,attr,value) { if (arguments.length == 2) { if (attr == "transform") { return obj.transform; } var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj,false)[attr]); var val = i ? i : 0; if (attr == "opacity") { val *= 100; } return val; } else if (arguments.length == 3) { switch (attr) { case 'width': case 'height': case 'paddingLeft': case 'paddingTop': case 'paddingRight': case 'paddingBottom': value = Math.max(value,0); case 'left': case 'top': case 'marginLeft': case 'marginTop': case 'marginRight': case 'marginBottom': obj.style[attr] = value + 'px'; break; case 'opacity': if (value < 0) { value = 0; } eOTjOC obj.style.filter = "alpha(opacity:" + value + ")"; obj.style.opacity = value / 100; break; case 'transform': obj.transform = value; obj.style["transform"] = "rotate(" + value + "deg)"; obj.style["MsTransform"] = "rotate(" + value + "deg)"; obj.style["MozTransform"] = "rotate(" + value + "deg)"; obj.style["WebkitTransform"] = "rotate(" + value + "deg)"; obj.style["OTransform"] = "rotate(" + value + "deg)"; break; default: obj.style[attr] = value; } return function (attr_in,value_in) { css(obj,attr_in,value_in) }; } } function getClass(sClass,obj) { var aRr = []; if (obj) { var aTag = obj.getElementsByTagName('*'); } else { var aTag = document.getElementsByTagName('*'); } for (var i = 0; i < aTag.length; i++) { var aClass = aTag[i].className.split(" "); for (var j = 0; j < aClass.length; j++) { if (aClass[j] == sClass) { aRr.push(aTag[i]); } } } return aRr; } function byClient(obj,attr) { if (attr == "width") { return css(obj,"borderLeft") + css(obj,"borderRight") + css(obj,"paddingLeft") + css(obj,"paddingWidth") + css(obj,"paddingWidth"); } else if (attr == "height") { return css(obj,"borderTop") + css(obj,"borderBottom") + css(obj,"paddingTop") + css(obj,"paddingBottom") + css(obj,"paddingHeight"); } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。