В этой статье описывается метод реализации отображения изображения мыши с помощью JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Tilt> эффект отображения изображения мыши </title>
<!-[если LTE IE 6]>>
<script language = "javascript">
var w3cdom = (document.createElement () && document.getElementsbytagname ());
window.onload = pinballeffect;
функция pinballeffect ()
{
if (! w3cdom) вернуть;
var allelements = document.getElementsbytagname ('*');
var OriginalBackgrounds = new Array ();
для (var i = 0; i <allelements.length; i ++)
{
if (alllements [i] .classname.indexof ('hoverefcect')> = 0)
{
Alllements [i] .onmouseover = MouseSoEsover;
Alllements [i] .onmouseout = MouseSoeSout;
}
}
}
Функция MouseSoeSover ()
{
OriginalClassNamesting = this.className;
this.classname += "lay-on";
}
Функция MouseSoeSout ()
{
this.classname = OriginalClassnameString;
}
pinballeffect ();
</script>
<! [endif]->
<стиль типа = "text/css">
тело {
Фон: #fff;
Шрифт: маленький/1,5 "安体", Simsun, Serif;
_font-размер: средний;
}
a img {
граница: нет;
}
UL,
Ли,
H5 {
Список стиля: нет внутри;
поля: 0;
Заполнение: 0;
}
.recomm {
Фон:#999;
Граница: 1PX SOLID #666;
Ширина: 600px;
Высота: 170px;
переполнение: скрыто;
Заполнение: 10px;
Поле: 0 Авто;
позиция: относительно;
}
.recomm ul {
Граница: 1px solid #ffff;
Лябочка границы: нет;
Высота: 168px;
Ширина: 599px;
переполнение: скрыто;
*позиция: абсолютно; /* Решить проблему, которая переполнена: скрытые не могут правильно скрывать элементы в IE*/
}
.recomm li {
Плавание: осталось;
позиция: относительно;
Право маржи: -179PX;
высота: 100%;
переполнение: скрыто;
Белое пространство: Nowrap;
Текст-альбом: Центр;
}
.recomm li img {
дисплей: блок;
РЕДУРНАЯ ЛЕРФ: 1PX SOLID #FFFF;
Ширина: 248px;
Высота: 168px;
}
.recomm li h5 {
позиция: абсолютно;
Внизу: 0;
слева: 0;
Высота: 20px;
Ширина: 239px;
высота линии: 20px;
Фон: URL (../ Images/1_211621.png) без повторного замены;
дисплей: нет;
Текст-альбом: верно;
Право накладки: 10px;
размер шрифта: 1ем;
шрифт-вес: нормальный;
}
.recomm li: Hover, .recomm .lay-on {
Ширина: 249px;
Право маржи: 0;
}
.recomm li: Hover H5, .Recomm .lay-on h5 {
дисплей: блок;
}
</style>
</head>
<тело>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<h5> Красные листья проезжают любовь по <a href = "/"> код домой </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<h5> Цветные цветы Wild Flowers By <a href = "/"> Шаншанские фильмы и телевидение онлайн </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m03.jpg"/> </a>
<h5> Прошлое похоже на чай от <a href = "/"> код дома </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m04.jpg"/> </a>
<h5> Поднимите цветы цветения по <a href = "/"> красочный фильм и телевидение </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m05.jpg"/> </a>
<h5> rose love by <a href = "/"> код дома </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m09.jpg"/> </a>
<h5> Little Daisy by <a href = "/"> Shanshan Film and Television </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.