Two ways to change the resolution of a picture by moving the mouse over the event
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 " > 
Apsara Conference 2019
The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China
Learn more >
Alibaba Cloud Free Trial
Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD
Learn more >Contact Us
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.
What's Trending
- Mac Ping:sendto:Host is down Ping does not pass other people's IP, can ping through the router
- How about buyvm.net space? Buyvm.net's VPS Evaluation
- Methods for generating various waveform files Vcd,vpd,shm,fsdb
- The difference between append, prepend, before and after methods in jquery __jquery
- Word 2007 Tip: Set paragraph shading
- The difference between varchar and nvarchar
- CSS3 Web Crafting tips: CSS3 multiple backgrounds
- Node-glob Learning
- Using Sslsplit sniffer Tls/ssl connection
- The difference between inline, block and Inline-block _css