この記事では、JS+CSSの方法について説明して、マウスを誘導するDIV層の勾配表示を実現します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>マウスの勾配ディスプレイを感知するためにJS+CSSによって実装されたDivレイヤー</title>
<style>
＃ヒント{
位置：絶対;
左：90px;
幅：0px;
高さ：0px;
色：#fff;
フォントサイズ：12px;
バックグラウンドカラー：＃000;
ボーダー：1px solid #def;
フィルター：アルファ（不透明度= 0）;
不透明：0;
Z-Index：999;
}
</style>
<script type = "text/javascript">
<！ -
//再利用率が高いために「指定されたDOMノードを取得する」関数を定義します
function $（d）{return document.getElementById（d）;}
//徐々に表示するためにDivを制御します
var i = 0;
function change_show（）{
var obj = $（ "tip"）;
i = i+5; //徐々に速度を表示します
obj.style.filter = "alpha（opacity =" + i + "）"; //透明性は徐々に低下します
obj.style.opacity = i/100; // firefoxと互換性があります
if（i> = 100）{
ClearInterval（s）;
i = 0;
}
}
//コントロールDivは徐々に消えます
var j = 100;
function change_hidden（）{
var obj = $（ "tip"）;
j = j-5; //徐々に速度が消えます
obj.style.filter = "alpha（opacity =" + j + "）"; //透明性が徐々に増加します
obj.style.opacity = j/100; // firefoxと互換性があります
if（j <= 0）{
ClearInterval（h）;
//obj.style.display="none ";
j = 100;
}
}
// Control change_show（）動作
var s;
関数show（x）{
if（s）{clearinterval（s）;}
$（ "tip"）。style.display = "block";
s = setInterval（change_show、1）;
}
// Control change_hidden（）動作
function hidden（x）{
$（ "tip"）。innerhtml = "";
h = setInterval（change_hidden、1）;
}
//->
</script>
</head>
<body>
<div id = "tip" style = "background-color：blue; width：48％; height：48％;" onmouseover = "show（this）;" onmouseout = "hidden（this）;">
</div>
<br />
<br>ここにマウスがスライドすると、Div Layer Gradientディスプレイが表示されます<br> <hr>インターネット上で収集されます。 </font> </p>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。