A small JavaScript courtship special effect is made here. The effect is as follows:
Not only can the effect of the picture below appear, but it can also make the figure follow the mouse rotation. This is just a simple small unmodified Example, based on this example can make courtship more fun. Men and men, can you send your little loli a web page like this? Awesome.
Paste the code:
Insert title here</title> ; <BR><style type="text/css"> <br>body{ <br>border:1px red solid; <br>width:1000px; <br>height:1000px; <br>margin: 0px auto; <br>padding:0px; <br>color:green; <br>} <br>/* <br>Drag the object out of the document flow, using left, right, top, bottom and other properties relative to <br>Absolutely position its closest parent object with the most positioning settings. If no such parent object exists, <br> is based on the body object. And its cascading is defined through the z-index attribute <br>*/ <br>div{ <br>position:absolute; <br>} <br></style> <br><script type="text/javascript "> <br>//Why onload is used, because when I initialized the clock div in the javascript code, the debugging page found that it was not implemented <br>//Later I found out the reason, the html code is parsed from front to back. When the JavaScript code is parsed first, when adding child nodes to the body <br>//, the unparsed body cannot be found. So you should parse the body first. There are two methods. One is to write <br>//, and the other is to add the onload method in the body tag. <br>window.onload=function(){ <br>init(); <br>}; <br>//Define a div array to store 12 divs <br>//Because the 12 div positions relationship, so first determine the point and radius to calculate the position of the div <br>var divs=[]; <br>var loveBaby=["I","爱","你","!","宝","贝","你","爱","我","我","Mian","Mian"] <br>var CX=300; <br>var CY=300;//-- --------------------Are there no units for the location coordinates in the web page? <br>var R=150; <br>var divCenterNode;//To control the position of the center point, set the global variable <br>//Define an initialization function <br>function init(){ <br>// Create a div at the center point (you can write your courtship object) <br>divCenterNode=document.createElement("div"); <br>divCenterNode.innerHTML="Tingting, marry me!"; <br> document.body.appendChild(divCenterNode); <br>divCenterNode.style.left=(CX-50) "px"; <br>divCenterNode.style.top=(CY-30) "px"; <br>// Create 12 divs to form a forbidden clock and place them in the body <br>for(var x=1;x<=12;x ){ <BR>//Create div <BR>var divNode=document.createElement(" div"); <BR>divNode.innerHTML=loveBaby[x-1]; <BR>//The body object does not need to be obtained like other objects, it has been encapsulated in the js library. <BR>document.body.appendChild(divNode); <BR>divs.push(divNode); <BR>} <BR>//Reposition the div element every time startClock() is started <BR>/* <BR>In fact, in order to achieve the effect of rotation, you need to continuously offset, or <BR> reposition. However, if you loop, you cannot control how long the function is started at intervals, so <BR> the window object provides a method at this time. <BR>*/ <BR>startClock(); <br><br>} <BR>//Offset of div<BR>var offset=0;//Offset of degree<BR>//Change the position Define a separate function for positioning and rotation <BR>function startClock(){ <BR>for(var x=1;x<=12;x ){ <BR>var div = divs[x-1]; <BR> //The degree of each number<BR>var dushu=30*x offset; <BR>//Angle value* Math.PI /180 = Radian value<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.style. top=divTop "px"; <BR>} <BR>offset =50; <BR>//Call back this function at a certain interval <BR>//Calculate an expression after the specified millisecond value. The first parameter is an expression, and the second parameter is time <BR>setTimeout(startClock,80);//Method of window object <BR>} <BR>//Define this clock to move to different positions as the mouse moves <BR>function clockMove(event){ <BR>CX=event.clientX;//x coordinate of the mouse position<BR>CY=event.clientY;//y coordinate of the mouse position<BR>divCenterNode.style. left=(CX-50) "px"; <BR>divCenterNode.style.top=(CY-30) "px"; <br><br>} <BR></script> <br></ head> <br><body onmousemove="clockMove(event)"> <br><!-- <BR>1. Display the 12 numbers in a circle <BR>1 Create 12 DIVs, respectively Assign values 1--12 <BR>2 to position 12 DIVs in a circle. <BR>--> <br></body > <br></html> <br>
</div> <br>Originally I wanted to make a rotating and running clock display. So the naming in the code is related to the clock, so don’t worry about it, dear. I am new to javascript and feel that javascript is very powerful.</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="JavaScript Array object extends indexOf() method_javascript tips" href="http://m.php.cn/faq/13064.html">JavaScript Array object extends indexOf() method_javascript tips</a></span><span>Next article：<a class="dBlack" title="JavaScript Array object extends indexOf() method_javascript tips" href="http://m.php.cn/faq/13066.html">JavaScript Array object extends indexOf() method_javascript tips</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/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>
