JS는 플로팅 모바일 윈도우의 특수 효과를 구현합니다(플로팅 광고)_javascript 기술

js 메서드:

코드 복사 코드는 다음과 같습니다. New Document window.onload=function(){ //写入 var oneInner = document.createElement("div"); oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;"); var oneButton = document.createElement("input"); oneButton.setAttribute("type","button"); oneButton.setAttribute("value","x"); if (oneButton.style.cssFloat) { oneButton.style.cssFloat="right" } else {oneButton.style.styleFloat="right"} oneInner.appendChild(oneButton); document.body.appendChild(oneInner);

//定时器 var a1a = setInterval(moves,100); //函数 var x = 10; var y = 10;

function moves(){ var tops = oneInner.offsetTop var lefts = oneInner.offsetLeft

if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts { x=-x }

if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops { y =-y }

탑 =y; 왼쪽 =x;

oneInner.style.tops "px" oneInner.style.left=lefts "px" }

//悬停停止 oneInner.onmouseover=function(){ clearInterval(a1a); } //放手继续运动 oneInner.onmouseout=function(){ a1a =setInterval(moves,100); } //删除 oneButton.onclick=function() { document.body.removeChild(oneInner); } }

jquery 방법:

复主代码 代码如下: $(function(){ //写入div $(" ",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body"); //写入关闭按钮 $(" ",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow"); //定时器 var move = setInterval(moves,100); var x= 10; var y= 10;

function moves (){ var mw = $("#moveWindow").offset(); var lefts =mw.left; var tops = mw.top; if (lefts>=$(window).width()-$("#moveWindow").width()||lefts { x=-x }

if (tops>=$(window).height()-$("#moveWindow").height()||tops > 🎜> } > //마우스를 제거하고 계속 이동 ").click(function(){ >

기본 아이디어:

1. 페이지가 로드된 후 페이지에 창을 삽입한 다음 창에 닫기 버튼을 삽입합니다

2. setInterval() 함수를 사용하여 애니메이션을 시작하는 move() 함수를 트리거합니다

3.이동 기능: 먼저 현재 창 위치를 얻은 후 시간이 지남에 따라 창을 이동하고 변위가 브라우저 가장자리에 도달할 때마다 반대 방향으로 이동합니다.

4. 다른 이벤트 추가: 마우스가 움직일 때 움직임을 멈추고, 마우스가 떠날 때 움직임을 계속하고, 창을 닫으려면 버튼을 클릭하세요.

ps: 이 특수 효과는 사용하지 않는 것이 좋습니다. 사용자 경험에 영향을 미치기 때문입니다

도움이 되었기를 바랍니다! ^_^!~~