この記事では、JSによるマウスセンシング画像表示を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>マウスセンシング画像表示効果</title>
<！ - [LTE IE 6]>
<スクリプト言語= "javascript">
var w3cdom =（document.createelement（）&& document.getElementsByTagname（））;
window.onload = pinballeffect;
関数pinballeffect（）
{
if（！w3cdom）return;
var relements = document.getElementsByTagname（ '*'）;
var originalbackgrounds = new Array（）;
for（var i = 0; i <lelements.length; i ++）
{
if（allelements [i] .classname.indexof（ 'hovereffect'）> = 0）
{
ALLELEMENTS [i] .OnMouseOver = MouseGoesOver;
Alelements [i] .onmouseout = mousegoesout;
}
}
}
function mousegoesover（）
{
OriginalClassNameString = this.className;
this.classname += "lay-on";
}
function mousegoesout（）
{
this.classname = originalclassnamestring;
}
pinballeffect（）;
</script>
<！[endif] - >
<style type = "text/css">
体 {
背景：#fff;
フォント：Small/1.5 "安体"、Simsun、Serif;
_font-size：medium;
}
IMG {
国境：なし;
}
ul、
li、
H5 {
リストスタイル：内部はありません。
マージン：0;
パディング：0;
}
.recomm {
背景：＃999;
国境：1pxソリッド＃666;
幅：600px;
高さ：170px;
オーバーフロー：隠し;
パディング：10px;
マージン：0 Auto;
位置：相対;
}
.recomm ul {
ボーダー：1pxソリッド#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）no-repeat;
表示：なし;
テキストアライグ：右;
パディング右：10px;
font-size：1em;
font-weight：正常;
}
.recomm li：hover、.recomm .lay-on {
幅：249px;
マージン右：0;
}
.recomm li：Hover H5、.Recomm .lay-on H5 {
表示：ブロック;
}
</style>
</head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<h5>赤い葉は、<a href = "/"> code home </a> 2010.09.23 </h5>による愛を追い越します
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<h5>野生の花が咲く<a href = "/">シャンシャン映画とテレビオンライン</a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/mages/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 = "/mages/m05.jpg"/> </a>
<h5>ローズラブ<a href = "/">コードホーム</a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m09.jpg"/> </a>
<h5> <a href = "/"> shanshanフィルムとテレビ</a> 2010.09.23 </h5> by <a href = "/">
</li>
</ul>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。