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


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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
解决vue移动端适配问题
Dec 12 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
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实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Django app配置多个数据库代码实例
2019/12/17 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
用Python实现职工信息管理系统
2020/12/30 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
学校体育节班级口号
2015/12/25 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书