Hier wird ein kleiner JavaScript-Balz-Spezialeffekt erstellt:
Es kann nicht nur der Effekt des Bildes unten angezeigt werden, sondern auch die Figur dazu gebracht werden, der Mausdrehung zu folgen Ein kleines, unverändertes Beispiel, das auf diesem Beispiel basiert, kann das Werben unterhaltsamer machen. Männer und Männer, können Sie Ihrer kleinen Loli eine solche Webseite schicken? Eindrucksvoll.
Fügen Sie den Code ein:
;/title> ; <br><style type="text/css"> <br>border:1px red solid; margin: 0px auto; <br>padding:0px; <br>color:green; Eigenschaften relativ zu <br>Positionieren Sie absolut das nächstgelegene übergeordnete Objekt mit den meisten Positionierungseinstellungen. Wenn kein solches übergeordnetes Objekt vorhanden ist, basiert <br> auf dem Körperobjekt. Und seine Kaskadierung wird durch das Z-Index-Attribut <br>*/ <br>div{ <br>position:absolute>} <br></style> definiert /javascript "> <br>//Warum Onload verwendet wird, denn als ich das Clock-Div im Javascript-Code initialisierte, stellte die Debugging-Seite fest, dass es nicht implementiert war <br>//Später fand ich den Grund heraus, das HTML Der Code wird von vorne nach hinten analysiert. Wenn der JavaScript-Code zuerst analysiert wird und dem Körper <br>// untergeordnete Knoten hinzugefügt werden, kann der nicht analysierte Körper nicht gefunden werden. Sie sollten also zuerst den Körper analysieren. Es gibt zwei Methoden: Eine besteht darin, <br>// zu schreiben, und die andere besteht darin, die Onload-Methode in das Body-Tag einzufügen. <br>window.onload=function(){ <br>init(); <br>//Definieren Sie ein Div-Array zum Speichern von 12 Divs <br>//Weil die 12-Div-Positionsbeziehung, also zuerst Bestimmen Sie den Punkt und den Radius, um die Position des Div zu berechnen. <br>var divs=[]; ","你","爱","我","我","Mian","Mian"] <br>var CX=300; <br>var CY=300;//-- ---- ----------------Gibt es auf der Webseite keine Einheiten für die Standortkoordinaten? <br>var R=150; <br>var divCenterNode;//Um die Position des Mittelpunkts zu steuern, legen Sie die globale Variable fest <br>//Definieren Sie eine Initialisierungsfunktion <br>function init(){ <br>/ / Erstellen Sie ein Div im Mittelpunkt (Sie können Ihr Werbeobjekt schreiben) <br>divCenterNode=document.createElement("div"); <br>divCenterNode.innerHTML="Tingting, marry me!"; body.appendChild(divCenterNode); <br>divCenterNode.style.left=(CX-50) "px" <br>divCenterNode.style.top=(CY-30) "px"; divs, um eine verbotene Uhr zu bilden und sie im Körper zu platzieren <br>for(var x=1;x<=12;x ){ <BR>//Create div <BR>var divNode=document.createElement(" div" ); <BR>divNode.innerHTML=loveBaby[x-1]; <BR>//Das Körperobjekt muss nicht wie andere Objekte abgerufen werden, es wurde in der js-Bibliothek gekapselt. <BR>document.body.appendChild(divNode); <BR>divs.push(divNode); <BR>} // Das div-Element jedes Mal neu positionieren, wenn startClock() gestartet wird <BR>/* <BR> Um den Rotationseffekt zu erzielen, müssen Sie tatsächlich einen kontinuierlichen Versatz oder eine <BR> Neupositionierung durchführen. Wenn Sie jedoch eine Schleife ausführen, können Sie nicht steuern, wie lange die Funktion in Intervallen gestartet wird, weshalb <BR> das Fensterobjekt bereitstellt eine Methode zu diesem Zeitpunkt. <BR>*/ <BR>startClock(); <BR><BR>} <BR>//Offset von div<BR>var offset=0;//Offset von Grad<BR>//Ändern Sie die Position. Definieren Sie a separate Funktion für Positionierung und Drehung <BR>function startClock(){ <BR>for(var x=1;x<=12;x ){ <BR>var div = divs[x-1]; Der Grad jeder Zahl<BR>var dushu=30*x offset; <BR>//Winkelwert* Math.PI /180 = Bogenmaßwert<BR>var divLeft = CX R*Math.sin(dushu*Math .PI /180); <BR>div.style.left=divLeft "px"; <BR>var divTop = CY-R*Math.cos(dushu*Math.PI/180); <BR>div.top= divTop "px"; <BR>} <BR>offset =50; <BR>//Rufen Sie diese Funktion in einem bestimmten Intervall zurück <br>//Berechnen Sie einen Ausdruck nach dem angegebenen Millisekundenwert. Der erste Parameter ist ein Ausdruck und der zweite Parameter ist die Zeit <br>setTimeout(startClock,80);//Methode des Fensterobjekts <BR>} <BR>//Definieren Sie diese Uhr so, dass sie sich mit der Mausbewegung an verschiedene Positionen bewegt <BR>function clockMove(event){ <BR>CX=event.clientX;//x-Koordinate der Mausposition<BR>CY=event.clientY;//y-Koordinate der Mausposition<BR>divCenterNode.style. left=(CX-50) "px"; <BR>divCenterNode.style.top=(CY-30) "px"; <BR></script> head> <br><body onmousemove="clockMove(event)"> 1--12 <br>2, um 12 DIVs in einem Kreis zu positionieren. <br>--> <br></html> <br><br> <br>Ursprünglich wollte ich eine Uhranzeige erstellen, die sich drehen und laufen lässt. Die Benennung im Code bezieht sich also auf die Uhr, also machen Sie sich darüber keine Sorgen, mein Lieber. Ich bin Javascript-Neuling und finde, dass Javascript sehr leistungsfähig ist.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="JavaScript-Array-Objekt erweitert indexOf() method_javascript-Tipps" href="http://m.php.cn/de/faq/13064.html">JavaScript-Array-Objekt erweitert indexOf() method_javascript-Tipps</a></span><span>Nächster Artikel：<a class="dBlack" title="JavaScript-Array-Objekt erweitert indexOf() method_javascript-Tipps" href="http://m.php.cn/de/faq/13066.html">JavaScript-Array-Objekt erweitert indexOf() method_javascript-Tipps</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
