Home > Developer > JavaScript
Two ways to change the image resolution by moving the mouse in and out of the event
When you move the mouse over and out of an image, you can change the resolution of the image in two ways: move the mouse over the image and remove the image at different resolutions. The specific implementation is as follows. For more information, see
Recently I am working on a move-in and remove-image task. You can try it in several ways.
The first is to change the resolution of the two methods, move the mouse into the image and remove the image resolution is different
Method 1
The Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> image list: move the mouse in/out to change the 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>
<Body>
<Ul id = "imgList">
<Li> </li>
<Li> </li>
</Ul>
</Body>
</Html>
Method 2
The Code is as follows:
<Script type = "text/javascript">
Function makevisible (cur, which ){
If (which = 0)
Cur. filters. alpha. opacity = 100
Else
Cur. filters. alpha. opacity = 20
}
</Script>
<Body>
</Body>
Another way is to move the mouse to remove the image and change the image size.
Add the code to the <body> label. When you move the cursor over the image, the image becomes larger to the right and returns the original size when you leave the image.
The Code is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
