В этой статье описывается метод JS+CSS для реализации градиентного отображения слоя Div, вызывающего мышь. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<Title> Div Layer, реализованный JS+CSS, чтобы ощутить градиент отображение мыши </title>
<style>
#кончик{
позиция: абсолютно;
Слева: 90px;
Ширина: 0px;
высота: 0px;
Цвет: #fff;
размер шрифта: 12px;
фоновый цвет:#000;
Граница: 1px solid #def;
Фильтр: альфа (непрозрачность = 0);
непрозрачность: 0;
Z-Index: 999;
}
</style>
<script type = "text/javascript">
<!-
// Определите функцию, чтобы «получить указанный узел DOM», потому что его скорость повторного использования высока
Функция $ (d) {return document.getElementByid (d);}
// управление div для постепенного отображения
var i = 0;
function change_show () {
var obj = $ ("tip");
i = i+5; // постепенно отображать скорость
obj.style.filter = "alpha (непрозрачность =" + i + ")"; // прозрачность постепенно уменьшается
obj.style.opacity = i/100; // Совместим с Firefox
if (i> = 100) {
ClearInterval (ы);
i = 0;
}
}
// управление дивиалом постепенно исчезает
var j = 100;
function change_hidden () {
var obj = $ ("tip");
J = J-5; // Постепенно исчезать скорость
obj.style.filter = "alpha (непрозрачность =" + j + ")"; // прозрачность постепенно увеличивается
obj.style.opacity = j/100; // Совместим с Firefox
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
J = 100;
}
}
// управление изменением_show () поведение
var s;
функция Show (x) {
if (s) {clearInterval (s);}
$ ("tip"). style.display = "block";
s = setInterval (change_show, 1);
}
// управление изменением_hidden () поведение
функция скрыта (x) {
$ ("TIP"). innerHtml = "";
h = setInterval (change_hidden, 1);
}
//->
</script>
</head>
<тело>
<div id = "tip" style = "фоновый цвет: синий; ширина: 48%; высота: 48%;" onmouseover = "show (this);" onmouseout = "hidden (это);">
</div>
<br />
<br> Здесь слайды мыши, отображается градиент -дисплей div <br> <br> <hr>, собирается в Интернете, только для интереса и обучения общения, а не для коммерческих целей. </font> </p>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.