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

最近在做一个鼠标移入移出图片事件，有几种方法大家可以试一下
首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同
方法一


代码如下:

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

赞 (0)

相关推荐

  • iOS像素对齐概念解析

    iOS像素对齐概念解析

    在iOS中,有一个概念叫做像素对齐,如果像素不对齐,那么在GPU渲染时,需要进行插值计算,这个插值计算的过程会有性能损耗. 在模拟器上,有一个选项可以把像素不对齐的部分显示出来. 逻辑像素与物理像素 在iOS设备上,有point(逻辑像素)的概念,以及pixel(物理像素)的概念.  在编程序时,用的是point,实际渲染时用的是pixel.一个point可以对应多个pixel.  point和pixel的比例是可以通过[[UIScreen mainScreen] scale]来制定. UIIm

  • Android加载大分辨率图片到手机内存中的实例方法

    Android加载大分辨率图片到手机内存中的实例方法

    还原堆内存溢出的错误首先来还原一下堆内存溢出的错误.首先在SD卡上放一张照片,分辨率为(3776 X 2520),大小为3.88MB,是我自己用相机拍的一张照片.应用的布局很简单,一个Button一个ImageView,然后按照常规的方式,使用BitmapFactory加载一张照片并使用一个ImageView展示. 代码如下: 复制代码 代码如下: btn_loadimage.setOnClickListener(new View.OnClickListener() { @Override   

  • android开发中获取手机分辨率大小的方法

    所以,记录下核心代码: 复制代码 代码如下: DisplayMetrics metrics=new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(metrics); 获取到本机的分辨率: 复制代码 代码如下: int widthPixels=metrics.widthPixels;int heightPixels=metrics.heightPixels; 当然,可以直接用TextView显示出来,还可以直接

  • Android的单位以及屏幕分辨率详解

    一.常用的单位:相对单位主要有:px.sp.dp绝对单位主要有:pt.in.mm 二.单位应用总结:一般用相对单位,而不是绝对单位1.字体的大小一般使用SP,用此单位的字体能够根据用户设置字体的大小而自动缩放 2.空间等相对距离一般使用dp(dip),随着密度变化,对应的像素数量也变化,但并没有直接的相对比例的变化. 3.px与实际像素有关,及与密度有关!dp和sp和实际像素没有关系,对于一定分辨率但不同密度的屏幕,px单位的应用可能会导致长度的相对比例的变化. 三.密度与分辨率:密度值表示每英

  • android计算pad或手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法

    android计算pad或手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法

    手机分辨率基础知识(DPI,DIP计算) 1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 Aspect Ratio(宽高比率) 指的是实际的物理尺寸宽高比率,分为long和nolong Milestone是16:9,属于long Resolution(分辨率) 和电脑的分辨率概念一样,指手机屏幕纵.横方向像素个数 Milestone是854*480

  • Js控制弹窗实现在任意分辨率下居中显示

    贴代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

  • 获取屏幕分辨率的VBS代码

    我想到的方法有两种. 一种是WMI中的Win32_DesktopMonitor类 复制代码 代码如下: strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2") Set colItems = objWMIService.ExecQuery("Select * from Win32_Desktop

  • android根据分辨率自动调整字体大小的实例代码

    手机设备太多,分辨率也不一样,看到网上大部分的适应字体的方法是定义values320×480或value-hdpi方式去处理.采用第一种的就惨了,很多设备的分辨率是不一样的,难道要每种都定义吗?采用第二种的在平板电脑里没有效果. 最后还是代码的方式方便快捷... [java] 复制代码 代码如下: //遍历设置字体  public static void changeViewSize(ViewGroup viewGroup,int screenWidth,int screenHeight) {/

  • Android基础之使用Fragment适应不同屏幕和分辨率(分享)

    Android基础之使用Fragment适应不同屏幕和分辨率(分享)

    最近事情很忙,一个新项目赶着出来,但是很多功能都要重新做,一直在编写代码.Debug.今天因为一个新程序要使用Fragment来做,虽然以前也使用过Fragment,不过没有仔细研究,今天顺道写篇文章记录一下Fragment的使用.这文章主要参考了Android官网的介绍. Fragment是Android3.0后增加的新控件,有点类似于Activity组件,也是用来承载各种View元素.Google增加这个玩意的目的是为了平板电脑里面可以复用部分显示的View,只要写好一个View,可以同时在

  • android 分辨率适配的方法

    以前在公司做项目的时候,遇到了分辨率的适配问题,说起来当时挺纠结的,因为没有外网,所以这个问题,都是黑暗中摸索的,尝试了许多方法,最后和徒弟们一起搞出了这个方法,具体行不行,先和大家分享下,这个方法不能说万能的,但是最起码它解决了分辨率跟密集度的关系,但是也引来一个问题,就是布局会因为图片资源小而失真,所以这也需要美工的同志多多配合的,废话不说,贴代码: 第一步,先创建一个view信息的javabean类: 复制代码 代码如下: package com.zte.layout.adapter; i

随机推荐