この記事では、画像フローティング効果を達成するためのJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
説明：Webページを開くと、常に浮かんでいる写真が表示されます。クリックして他のページに接続します。重要な効果があります！
次のようにコードをコピーします：<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title>テスト</title>
<style type = "text/css">
＃all {width：100％;高さ：3000px;}
</style>
</head>
<body>
<div id = "all">
<div id = "img" style = "position：absolute; z-index：99;">
<a href = "＃"ターゲット= "_ blank"> <img src = "images/opvti.jpg" style = "cursor：pointer;" style = "cursor：pointer;" /> </a>
<スクリプト言語= "javascript">
<！ - begin
var xpos = document.body.clientwidth -20;
var ypos = document.body.clientheight / 2;
var step = 1;
var遅延= 10;
var height = 0;
var hoffset = 0;
var woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var間隔;
img.style.top = ypos;
function changepos（）{
width = document.body.clientwidth;
height = document.body.clientheight;
hoffset = img.offsetheight;
woffset = img.offsetwidth;
img.style.left = xpos + document.body.scrollleft;
img.style.top = ypos + document.body.scrolltop;
if（yon）{
ypos = ypos + step;
} それ以外 {
ypos = ypos -step;
}
if（ypos <0）{
yon = 1;
ypos = 0;
}
if（ypos> =（height -hoffset））{
yon = 0;
ypos =（height -hoffset）;
}
if（xon）{
xpos = xpos + step;
} それ以外 {
xpos = xpos -step;
}
if（xpos <0）{
xon = 1;
xpos = 0;
}
if（xpos> =（width -woffset））{
xon = 0;
xpos =（width -woffset）;
}
}
function start（）{
img.visibility = "visible";
interval = setInterval（ 'changepos（）'、delay）;
}
function pause_resume（）{
if（一時停止）{
ClearInterval（間隔）;
一時停止= false;
} それ以外 {
interval = setInterval（ 'changepos（）'、delay）;
一時停止= true;
}
}
始める（）;
//終了 - >
</script>
</div>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。