この記事では、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プログラミングに役立つことを願っています。