Heim > Artikel > Web-Frontend > JS implementiert die Spezialeffekte schwebender mobiler Fenster (ausgesetzte Werbung).
JS implementiert die Spezialeffekte schwebender mobiler Fenster (ausgesetzte Werbung).
- 高洛峰Original
- 2017-02-04 14:21:533228Durchsuche
js-Methode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
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<=0)
{
x=-x
}
if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
{
y=-y
}
tops+=y;
lefts+=x;
oneInner.style.top=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);
}
}
</script>
</head>
<body>
</body>
</html>jquery-Methode:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.jb51.net/workspace/js/jquery-1.7.min.js"></script>
<script>
$(function(){
//写入div
$("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
//写入关闭按钮
$("<div/>",{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<=0)
{
x=-x
}
if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)
{
y=-y
}
lefts+=x;
tops+=y;
$("#moveWindow").offset({top:tops,left:lefts});
}
//悬停停止运动
$("#moveWindow").mouseover(function(){
clearInterval(move);
});
//移开鼠标后继续运动
$("#moveWindow").mouseout(function(){
move = setInterval(moves,100);
});
//点击按钮关闭
$("#removeMW").click(function(){
$("#moveWindow").remove();
});
})
</script>
</head>
<body>
</body>
</html>Grundidee:
1. Nachdem die Seite geladen wurde, fügen Sie ein Fenster in die Seite ein , und fügen Sie dann das Fenster zur Seite hinzu. Fügen Sie die Schaltfläche „Schließen“ ein
2. Verwenden Sie die Funktion „setInterval()“, um die Funktion „moves()“ auszulösen, um die Animation zu starten
3. Ermitteln Sie zunächst die aktuelle Fensterposition und verschieben Sie dann das Fenster im Laufe der Zeit. Wenn Sie den Rand des Browsers erreichen, kehren Sie die Bewegung um
4. Stoppen Sie die Bewegung, wenn die Maus schwebt Wenn die Maus geht, klicken Sie auf die Schaltfläche, um das Fenster zu schließen
ps: Es wird nicht empfohlen, diesen Spezialeffekt zu verwenden, da er sich auf die Benutzererfahrung auswirkt
Ich hoffe, es ist hilfreich für Sie! ^_^!~~
Weitere JS-bezogene Artikel zu den Spezialeffekten schwebender mobiler Fenster (schwebende Werbung) finden Sie auf der chinesischen PHP-Website!