Mouse in and out events change the resolution of the image in two ways
- 2020-03-30 00:58:52
- OfStack
Recently, I was doing a mouse in and out picture event, and there are several ways you can try
The first is to change the resolution of the two methods, the mouse moving in and out of the picture resolution is different
Methods a
Method 2
Another way is to mouse in and out of the picture and change the size of the picture
In < Body> Add a code to the label, mouse over the image to the right of the image to the top of the larger, leaving the image back to the original size
The first is to change the resolution of the two methods, the mouse moving in and out of the picture resolution is different
Methods a
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Picture list: mouse over / Remove to change image transparency </title>
<style>
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);}
</style>
<script>
window.onload = function ()
{
var oLi = document.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onmouseover = function ()
{
this.className = "current"
};
oLi[i].onmouseout = function ()
{
this.className = ""
}
}
}
</script></head>
<body>
<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>
</body>
</html>
Method 2
<script type="text/javascript">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
</script>
<body>
<img src="../../Content/themes/login/image/JianKong.png" width="200px" style="filter:alpha(opacity=100)" onMouseOver="makevisible(this,1)" onMouseOut="makevisible(this,0)"/>
</body>
Another way is to mouse in and out of the picture and change the size of the picture
In < Body> Add a code to the label, mouse over the image to the right of the image to the top of the larger, leaving the image back to the original size
<img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/>