Do a mouse move out of the picture event, the first is to change the resolution of the two methods, the mouse moved into the picture and remove the resolution of the picture is different, the specific implementation of the following, interested friends can refer to the following
Recently in doing a mouse move out of the picture event, there are several ways you can try first of all is to change the resolution of the two methods, mouse move into the picture and remove the resolution of the picture different method one code as follows: <html xmlns= " http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Picture list: Mouse move/move out change picture transparency </title> <style> ul,li{margin:0 ;p Adding: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.getelements Bytagname ("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 Two 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> <img src= ". /.. /content/themes/login/image/jiankong.png "width=" 200px "style=" Filter:alpha (opacity=100) "onMouseOver=" Makevisible (this,1) "onmouseout=" makevisible (this,0) "/> </body> There is also a way to move the mouse out of the picture, Change the size of the picture in the <body> tag to add code, the mouse moved to the picture when the picture to the right up, leaving the picture to change back to the originalSize Code as follows: <img src= ". /.. /content/themes/login/image/jiben.png "width=" 200px "onmouseover=" this.width=230 "onmouseout=" this.width=200 " > 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
