لقد قمت مؤخرًا بتحريك الماوس داخل وخارج حدث الصورة. هناك عدة طرق يمكنك تجربتها.
أولاً، هناك طريقتان لتغيير الدقة. تختلف دقة تحريك الماوس داخل الصورة والانتقال خارجها.
الطريقة الأولى
انسخ رمز الكود كما يلي:
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>قائمة الصور: حرك الماوس للداخل/للخارج لتغيير شفافية الصورة</title>
<نمط>
ul,li{margin:0;padding:0;list-style-type:none;}
#imgList{width:700px;overflow:hidden;zoom:1;border:1px Solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px Solid #ccc;margin:10px 10px 0 0;}
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
#imgList li.current img{opacity:1;filter:alpha(opacity=100);}
</نمط>
<النص البرمجي>
window.onload = الوظيفة ()
{
var oLi = document.getElementsByTagName("li");
لـ (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = الدالة ()
{
this.className = "الحالي"
};
oLi[i].onmouseout = الدالة ()
{
اسم الفئة هذا = ""
}
}
}
</script></head>
<الجسم>
<ul id="imgList">
<li><img src="/jscss/demoimg/201203/kitesky_com_car1.jpg" /></li>
<li><img src="/jscss/demoimg/201203/kitesky_com_car2.jpg" /></li>
</ul>
</الجسم>
</html>
الطريقة الثانية
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة makevisible(cur,التي){
إذا (التي==0)
cur.filters.alpha.opacity=100
آخر
cur.filters.alpha.opacity=20
}
</script>
<الجسم>
<img src="../../Content/themes/login/image/JianKong.png" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible( هذا،0)"/>
</الجسم>
هناك طريقة أخرى وهي تحريك الماوس داخل وخارج الصورة لتغيير حجم الصورة.
ما عليك سوى إضافة بعض التعليمات البرمجية إلى علامة <body> عندما يتحرك الماوس إلى الصورة، ستصبح الصورة أكبر إلى أعلى اليمين، وعندما يتحرك الماوس بعيدًا عن الصورة، ستعود إلى الحجم الأصلي.
انسخ رمز الكود كما يلي:
<img src="../../Content/themes/login/image/Jiben.png" onmouseover="this.width=230" onmouseout="this.width=200"/>