编程 Javascript

鼠标移入移出事件改变图片的分辨率的两种方法

Posted in Javascript onDecember 17, 2013

最近在做一个鼠标移入移出图片事件，有几种方法大家可以试一下
首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同
方法一

<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"/>

鼠标移入移出事件改变图片的分辨率的两种方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js open() 与showModalDialog()方法使用介绍

Sep 10 Javascript

浏览器兼容console对象的简要解决方案分享

Oct 24 Javascript

jquery中each遍历对象和数组示例

Aug 05 Javascript

jQuery中hover方法和toggle方法使用指南

Feb 27 Javascript

JS实现的仿QQ空间图片弹出效果代码

Feb 23 Javascript

js与jquery分别实现tab标签页功能的方法

Nov 18 Javascript

谈谈第三方App接入微信登录解读

Dec 27 Javascript

如何在 JavaScript 中更好地利用数组

Sep 27 Javascript

对angularJs中自定义指令replace的属性详解

Oct 09 Javascript

解决js相同的正则多次调用test()返回的值却不同的问题

Oct 10 Javascript

trackingjs+websocket+百度人脸识别API实现人脸签到

Nov 26 Javascript

Js图片点击切换轮播实现代码

Jul 27 Javascript

jquery简单实现鼠标经过导航条改变背景图

Dec 17 #Javascript

javascript确认框的三种使用方法

Dec 17 #Javascript

js 剪切板应用clipboardData详细解析

Dec 17 #Javascript

JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

Dec 17 #Javascript

JavaScript禁止页面操作的示例代码

Dec 17 #Javascript

javascript中parentNode,childNodes,children的应用详解

Dec 17 #Javascript

javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

Dec 17 #Javascript