ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS+DIVで写真の動的な表示を実現(完全版)_html/css_WEB-ITnose
function ImageDivMouseOver(obj)
{
document.getElementById(obj).style.left=window.event.x+15+document.documentElement.scrollLeft;
document.getElementById(obj).style.top=window.event.y+15+document.documentElement。スクロールトップ;
}
.showImage a{
display:block;/**//* リンク テキストをクリックせずにリンクに応答できるように、リンクをブロック内に表示します。*/
}
.showImage a img{
display: none;可視性:hidden;/**//*初期化情報パネルは表示されません*/
}
.showImage a:hover{_border:none;text-decoration:none;}/**//*IE7 以下のバージョン ステータス疑似クラスのバグ*/
.showImage a:hover img {
display:block;
visibility:visible;
position:Absolute;
display:block;
width: 139px;/**//*幅を指定するだけで、高さはコンテンツに応じて自動的に調整されます。*/
border: 1px Solid rgb(91,185,233);
背景色: rgb(228,246,255);
z-index:999;/**//*リンクテキストが長すぎる場合にパネルに重ならないように情報パネルを高い位置に上げますが、これはFFのみ有効です*/
}
.showImage a img{
border:none;/**//*画像の境界線を削除します。デフォルトでは、標準ブラウザではリンク内の画像に境界線が表示されます。* /
display:block;
position:絶対;/**//*通常のテキスト フローを分離するには絶対位置を使用します。そうしないと、設計時にさまざまなブラウザの通常の表示を考慮することがさらに面倒になります。*/
left:80px;
top:30px;
}
.imgStyle{z-index:10px;位置:絶対}
优化内容:
1.跟鼠标
2.增加考虑滚動条因素
3.写真の最新位置表示