鼠标移入移出事件改变图片的分辨率的两种方法_Javascript教程-查字典教程网
鼠标移入移出事件改变图片的分辨率的两种方法
鼠标移入移出事件改变图片的分辨率的两种方法
发布时间:2016-12-30 来源:查字典编辑
摘要:最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同方法一复制代码代码如...

最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下

首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同

方法一

复制代码 代码如下:

<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="http://www.jb51.netjscss/demoimg/201203/kitesky_com_car1.jpg" /></li>

<li><img src="http://www.jb51.netjscss/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" 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教程学习
    热门Javascript教程学习
    编程开发子分类