您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
鼠标移入移出事件改变图片的分辨率的两种方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
做一个鼠标移入移出图片事件，首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同，具体实现如下，感兴趣的朋友可以参考下
最近在做一个鼠标移入移出图片事件，有几种方法大家可以试一下 首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同 方法一 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片列表：鼠标移入/移出改变图片透明度</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> 方法二 代码如下: <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> 还有一种方法是鼠标移入移出图片，改变图片的大小 在<body>标签中加入一下代码即可，鼠标移动到图片时图片向右上变大，离开图片变回原大小 代码如下: <img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/>- 上一个程序编程： jquery简单实现鼠标经过导航条改变背景图
- 下一个程序编程： js复制网页内容并兼容各主流浏览器的代码
