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

 更新时间:2013年12月17日 15:20:07   作者:  
做一个鼠标移入移出图片事件,首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同,具体实现如下,感兴趣的朋友可以参考下
最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下
首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同
方法一
复制代码 代码如下:

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

相关文章

  • window resize和scroll事件的基本优化思路

    window resize和scroll事件的基本优化思路

    在项目中使用scroll事件去加载数据,结果IE下悲剧了。下面为大家介绍下window resize和scroll事件的基本优化思路,需要的朋友可以参考下
    2014-04-04
  • 理解JavaScript表单的基础知识

    理解JavaScript表单的基础知识

    这篇文章主要带领大家理解JavaScript表单的基础知识,对javascript表单脚本进行深入学习,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js select下拉联动 更具级联性!

    js select下拉联动 更具级联性!

    这篇文章主要为大家详细介绍了js select下拉联动的相关资料,更具级联性!文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS传参及动态修改页面布局

    JS传参及动态修改页面布局

    本篇文章主要介绍了JS传参及动态修改页面布局的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 详解浏览器缓存和webpack缓存配置

    详解浏览器缓存和webpack缓存配置

    这篇文章主要介绍了浏览器缓存和webpack缓存配置,浏览器缓存分为两种类型,强缓存和协商缓存,具体内容详情大家参考下本文
    2018-07-07
  • bootstrap配合Masonry插件实现瀑布式布局

    bootstrap配合Masonry插件实现瀑布式布局

    这篇文章主要为大家详细介绍了bootstrap配合Masonry插件实现瀑布式布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 判断用户的在线状态 onbeforeunload事件

    判断用户的在线状态 onbeforeunload事件

    window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标,通常情况下IE的关闭按钮都会在页面的右上部分,所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的
    2011-03-03
  • javascript基于HTML5 canvas制作画箭头组件

    javascript基于HTML5 canvas制作画箭头组件

    该组件实现了根据箭头起止点坐标画箭头功能。目前组件可设置箭头形状(大小和角度)。
    2014-06-06
  • js Dom实现换肤效果

    js Dom实现换肤效果

    这篇文章主要为大家详细介绍了js Dom实现换肤效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JavaScript+html5 canvas实现图片破碎重组动画特效

    JavaScript+html5 canvas实现图片破碎重组动画特效

    这篇文章主要介绍了JavaScript+html5 canvas实现破碎重组的视频特效,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论