この記事では、画像フローティング効果を達成するための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プログラミングに役立つことを願っています。