여기에 작은 JavaScript 구애 특수 효과가 만들어졌습니다.
아래 그림의 효과가 나타날 수 있을 뿐만 아니라 그림이 마우스 회전을 따르도록 할 수도 있습니다. 이 예를 바탕으로 수정되지 않은 작은 예는 구애를 더 재미있게 만들 수 있습니다. 남자들이여, 여러분의 작은 로리에게 이런 웹페이지를 보내주실 수 있나요? 엄청난.
코드 붙여넣기:
여기에 제목 삽입 ;/title> ; <br><style type="text/css"> <br>테두리:1px 빨간색 단색 <br>높이:1000px; margin: 0px auto; <br>padding:0px; <br>color:green; <br>} <br>/* <br>왼쪽, 오른쪽, 위쪽, 아래쪽 등을 사용하여 개체를 드래그합니다. <br>에 상대적인 속성은 가장 많은 위치 지정 설정을 사용하여 가장 가까운 상위 개체를 절대적으로 배치합니다. 그러한 상위 개체가 없으면 <br>는 body 개체를 기반으로 합니다. 그리고 해당 계단식은 z-index 속성 <br>*/ <br>div{ <br>position:absolute <br>} <br></style> <br><script type="text; /javascript "> <br>//onload를 사용하는 이유는 자바스크립트 코드에서 시계 div를 초기화했을 때 디버깅 페이지에서 구현되지 않은 것으로 나타났기 때문입니다. <br>//나중에 이유를 알아보니 html 코드는 앞에서 뒤로 구문 분석됩니다. JavaScript 코드를 먼저 파싱할 때 <br>// 본문에 하위 노드를 추가하면 파싱되지 않은 본문을 찾을 수 없습니다. 따라서 먼저 본문을 구문 분석해야 합니다. 두 가지 방법이 있는데, 하나는 <br>//라고 쓰는 것이고, 다른 하나는 body 태그에 onload 메소드를 추가하는 것입니다. <br>window.onload=function(){ <br>init(); <br>}; <br>//12개의 div를 저장할 div 배열 정의 <br>//12개의 div 위치 관계가 있으므로 먼저 점과 반경을 결정하여 div의 위치를 계산합니다. <br>var divs=[] <br>var loveBaby=["I","爱","你","!","宝","贝","你","爱","我","我","Mian","Mian"] <br>var CX=300; <br>var CY=300;//-- ---- ----------------웹페이지에는 위치좌표 단위가 없나요? <br>var R=150; <br>var divCenterNode;//중심점 위치를 제어하려면 전역 변수를 설정합니다. <br>//초기화 함수 정의 <br>function init(){ <br>/ / 중심점에 div를 만듭니다(구애 개체를 작성할 수 있음) <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>// 12 생성 금지된 시계를 형성하여 본문에 배치하는 div <br>for(var x=1;x<=12;x ){ <BR>//Create div <BR>var divNode=document.createElement(" div" ); <BR>divNode.innerHTML=loveBaby[x-1]; <BR>//body 객체는 다른 객체처럼 얻을 필요가 없으며 js 라이브러리에 캡슐화되어 있습니다. <BR>document.body.appendChild(divNode); <BR>divs.push(divNode); <BR>} <BR>//startClock()이 시작될 때마다 div 요소의 위치를 변경합니다. <BR>/* <BR> 실제로 회전 효과를 얻으려면 계속해서 오프셋을 주거나 <BR> 위치를 변경해야 합니다. 그러나 루프를 수행하면 간격으로 함수가 시작되는 시간을 제어할 수 없으므로 <BR> 창 객체가 제공됩니다. 이때 방법. <BR>*/ <BR>startClock(); <BR><BR>} <BR>//div 오프셋<BR>var offset=0;//도 오프셋<BR>//위치 변경 위치 지정 및 회전을 위한 별도의 함수 <br>function startClock(){ <br>for(var x=1;x<=12;x ){ <BR>var div = divs[x-1] <BR> // 각 숫자의 각도<BR>var dushu=30*x offset; <BR>//각도 값* Math.PI /180 = 라디안 값<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>top= divTop "px"; <BR>} <BR>offset =50; <BR>//특정 간격으로 이 함수를 호출합니다. <BR>//지정된 밀리초 값 이후의 표현식을 계산합니다. 첫 번째 매개변수는 표현식, 두 번째 매개변수는 time <BR>setTimeout(startClock,80);//창 객체 메서드 <BR>} <BR>//마우스가 움직일 때마다 다른 위치로 이동하도록 이 시계를 정의합니다. <BR>function clockMove(event){ <BR>CX=event.clientX;//마우스 위치의 x 좌표<BR>CY=event.clientY;//마우스 위치의 y 좌표<BR>divCenterNode.style. left=(CX-50) "px"; <BR>divCenterNode.style.top=(CY-30) "px" <BR><BR>} <BR></script> head> <br><body onmousemove="clockMove(event)"> <br><!-- <br>1. 12개의 숫자를 원으로 표시합니다. <br>1 12개의 DIV를 각각 생성합니다. 1--12 <BR>2를 사용하면 12개의 DIV를 원 안에 배치할 수 있습니다. <BR>--> <br></body > <br></html> <br><br> <br>원래는 회전하며 움직이는 시계 디스플레이를 만들고 싶었습니다. 따라서 코드의 이름은 시계와 관련이 있으므로 걱정하지 마십시오. 저는 자바스크립트를 처음 접하는데 자바스크립트가 매우 강력하다고 생각합니다.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="JavaScript 배열 객체는 indexOf() method_javascript 팁을 확장합니다." href="http://m.php.cn/ko/faq/13064.html">JavaScript 배열 객체는 indexOf() method_javascript 팁을 확장합니다.</a></span><span>다음 기사：<a class="dBlack" title="JavaScript 배열 객체는 indexOf() method_javascript 팁을 확장합니다." href="http://m.php.cn/ko/faq/13066.html">JavaScript 배열 객체는 indexOf() method_javascript 팁을 확장합니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><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>