论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

Javascript教程:JS如何实现鼠标放到图片上变大的方法

文章类别:Javascript | 发表日期:2012-5-17 10:07:27

Javascript教程:JS如何实现鼠标放到图片上变大的方法


大家看看以下的代码,尝试的实践一下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大,移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min()
src=file:///d|/我的文档/桌面/背景图片.jpg width="970" height="107"
onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);"
style="cursor:pointer;"/>
<script>
var i=0
//变大
function max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=85
MainImg.style.pixelHeight=55
}
onload=init
</script></body>
</html>

 

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058