源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-01-11 22:02 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:鼠标移入移出事件改变图片的分辨率的两种方法
最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下 首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同 [b]方法一[/b]
[u]复制代码[/u] 代码如下:
<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>
[b]方法二[/b]
[u]复制代码[/u] 代码如下:
<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>标签中加入一下代码即可,鼠标移动到图片时图片向右上变大,离开图片变回原大小
[u]复制代码[/u] 代码如下:
<img src="../../Content/themes/login/image/Jiben.png" width="200px" onmouseover="this.width=230" onmouseout="this.width=200"/>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部