تصف هذه المقالة طريقة تنفيذ عرض صورة استشعار الماوس بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<TITLE> MOUSE SESSING IMATE DOFERE EFFERT </TITLE>
<!-[إذا lte ie 6]>
<script language = "javaScript">
var w3cdom = (document.createElement () && document.getElementsByTagName ()) ؛
window.onload = pinballeffect ؛
وظيفة pinballeffect ()
{
إذا (! w3cdom) العودة ؛
var allelements = document.getElementSbyTagName ('*') ؛
var OriginalBackgrounds = new Array () ؛
لـ (var i = 0 ؛ i <allelems.length ؛ i ++)
{
if (allelements [i] .classname.indexof ('hovereffect')> = 0)
{
ألقاب [i] .onmouseover = mousegoesover ؛
ألقاب [i] .onmouseout = mousegoesout ؛
}
}
}
وظيفة mousegoesover ()
{
OriginalClassNamestring = this.className ؛
this.className += "lay-on" ؛
}
وظيفة mousegoesout ()
{
this.className = OriginalClassNameString ؛
}
pinballeffect () ؛
</script>
<! [endif]->
<type type = "text/css">
جسم {
الخلفية: #fff ؛
الخط: صغير/1.5 "安体" ، simsun ، serif ؛
_font-size: متوسطة ؛
}
img {
الحدود: لا شيء ؛
}
أول ،
لي ،
H5 {
على غرار القائمة: لا شيء في الداخل ؛
الهامش: 0 ؛
الحشو: 0 ؛
}
.Recomm {
الخلفية:#999 ؛
الحدود: 1 بكسل Solid #666 ؛
العرض: 600 بكسل ؛
الارتفاع: 170 بكسل ؛
الفائض: مخفي.
الحشو: 10 بكسل ؛
الهامش: 0 Auto ؛
الموقف: قريب
}
.recomm ul {
الحدود: 1px الصلبة #ffff ؛
اليسار الحدودي: لا شيء ؛
الارتفاع: 168 بكسل ؛
العرض: 599px ؛
الفائض: مخفي.
*الموقف: مطلق ؛ /* حل المشكلة التي تفيض: لا يمكن إخفاء العناصر بشكل صحيح في IE*/
}
.RECOMM LI {
تعويم: اليسار.
الموقف: قريب
يمين الهامش: -179px ؛
الارتفاع: 100 ٪
الفائض: مخفي.
الفضاء الأبيض: Nowrap ؛
محاذاة النص: المركز ؛
}
.recomm li img {
العرض: كتلة ؛
الحدود اليسرى: 1 بكسل Solid #ffff ؛
العرض: 248 بكسل ؛
الارتفاع: 168 بكسل ؛
}
.recomm li h5 {
الموقف: مطلق ؛
أسفل: 0 ؛
اليسار: 0 ؛
الارتفاع: 20 بكسل ؛
العرض: 239px ؛
رفع الخط: 20 بكسل ؛
الخلفية: url (../ images/1_211621.png) no-repeat ؛
العرض: لا شيء ؛
محاذاة النص: صحيح ؛
حشو اليمين: 10 بكسل ؛
حجم الخط: 1EM ؛
خط الوزن: طبيعي ؛
}
.Recomm Li: Hover ، .Recomm .lay-on {
العرض: 249px ؛
يمين الهامش: 0 ؛
}
.Recomm Li: Hover H5 ، .Recomm .lay-on H5 {
العرض: كتلة ؛
}
</style>
</head>
<body>
<viv>
<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 = "/"> Shanshan Film and Television Online </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 = "/"> code home </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 للجميع.