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


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程序来实现动画功能
Mar 06 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
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
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
Php注入点构造代码
2008/06/14 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
列车长先进事迹材料
2014/01/25 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
校长新学期致辞
2015/07/30 职场文书