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


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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js的一些常用方法小结
Jun 29 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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
基于php无限分类的深入理解
2013/06/02 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python常用算法学习基础教程
2017/04/13 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
优秀团支部事迹材料
2014/02/08 职场文书
商超业务员岗位职责
2014/03/12 职场文书
食品安全承诺书
2014/05/22 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
诚实守信演讲稿
2014/09/01 职场文书
明星邀请函
2015/02/02 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers