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


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下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
JSONP原理及简单实现
Jun 08 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
js调用css属性写法
2013/09/21 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python Tensor和Array对比分析
2020/01/08 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
结婚邀请函范文
2014/01/14 职场文书
爱情寄语大全
2014/04/09 职场文书
给校长的建议书400字
2014/05/15 职场文书
质量保证书格式
2015/02/27 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB