ホームページ > 記事 > ウェブフロントエンド > Web ページ上で画像が自由に浮かんでいるように見せるにはどうすればよいでしょうか? (jsコード例)
Web ページ上で画像が自由に浮かんでいるように見せるにはどうすればよいでしょうか? (jsコード例)
- 藏色散人オリジナル
- 2018-08-10 14:55:222860ブラウズ
ウェブサイトを開くと、広告風の画像がすぐに表示されることがあります。これは、ウェブマスターにとっては、ユーザーが広告や重要な情報をできるだけ早く確認できるようにするためです。当然のことながら、これらの画像情報を選択的に表示できることがより重要です。そこで、今日の記事では、Web ページのフローティング コード (画像のフローティングを選択的にオフにできる) の具体的なデモを主に紹介します。興味のある方のお役に立てれば幸いです。
jsフローティング広告コードの具体例は以下のとおりです:
<body>
<div id="img1" onmouseover="pause_resume()" onmouseout="pause_resume()">
<div><a href="javascript:void(0);" onclick="closediv()" title="点击关闭">关闭</a></div>
<a href=" " target="_blank"><img src="2.png" alt="可关闭的自由漂浮的图片广告特效代码"></a>
</div>
<p>网站漂浮代码测试</p>
<script type="text/javascript">
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var divid = img1; //浮动DIV的ID.
divid.style.top = yPos;
function changePos(){
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = divid.offsetHeight;
Woffset = divid.offsetWidth;
divid.style.left = xPos + document.body.scrollLeft;
divid.style.top = yPos + document.body.scrollTop;
if(yon){yPos = yPos + step;}else{yPos = yPos - step;}
if(yPos < 0){yon = 1;yPos = 0;}
if(yPos >= (height - Hoffset)){yon = 0; yPos = (height - Hoffset);}
if(xon){xPos = xPos + step;}else{xPos = xPos - step;}
if(xPos < 0){xon = 1;xPos = 0;}
if(xPos >= (width - Woffset)){xon = 0; xPos = (width - Woffset);}
}
function start(){
divid.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pause_resume(){
if(pause){
clearInterval(interval);
pause = false;}
else{
interval = setInterval('changePos()',delay);
pause = true;
}
}
function closediv(){
clearInterval(interval);
divid.style.display = "none";
}
start();
</script>
</body>スタイルコードは次のとおりです:
<style type="text/css">
#img1{width:59px;height:61px;position:absolute;top:43px;left:2px;z-index:10;}
#img1 div{width:80px;text-align:right;font-size:12px;}
#img1 div a:link{text-decoration:none;}
#img1 div a:hover{color:red;text-decoration:none;}
#img1 img{width:80px;height:80px;border:1px solid black;}
p{margin-top:50px;text-align:center;}
</style>上記のコードテストは次のスクリーンショットです:
上記の記事では主に紹介していますこの例では、js を使用して画像の浮遊効果を実現する手法を分析しています。必要な場合は、このような特殊効果を参照してください。
【おすすめ関連記事】
実用的で美しいWebページのフローティングQRコード特集5選エフェクトコード
画像のセンタリングとフローティングエフェクトのJS実装例共有
以上がWeb ページ上で画像が自由に浮かんでいるように見せるにはどうすればよいでしょうか? (jsコード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。