你的位置：首页 >> 网页设计 >> 企通互联北京网站制作网页特效--鼠标悬停图片渐显效果
企通互联北京网站制作网页特效--鼠标悬停图片渐显效果
作者： 北京网站建设 日期：2008-03-27 06:14:05 来源： http://www.qitongnet.com
网页特效----鼠标悬停图片渐显效果：
Chinaz~com
|
www.qitongnet.com以下为引用的内容：网站建设 北京网页设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">企通互联
<html xmlns="http://www.w3.org/1999/xhtml">北京网站制作
<head>北京网页设计
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />北京网站设计
<title>www.webjx.com</title> Chinaz^com
<script language=JavaScript1.2>北京网站设计
<!--网页设计
function high(which2){北京网站设计
theobject=which2网站建设
highlighting=setInterval("highlightit(theobject)",40)企通互联
}北京网站制作
function low(which2){网页设计
clearInterval(highlighting) 网站建设北京网页设计
which2.filters.alpha.opacity=40北京网站设计
}北京网站制作
function highlightit(cur2){北京网站制作
if (cur2.filters.alpha.opacity<100)北京网站制作
cur2.filters.alpha.opacity+=5网站设计
else if (window.highlighting)网站建设
clearInterval(highlighting) 北京网站建设网站设计
}企通互联
//-->网站设计
</script> Www.Chinaz.com
<style type="text/css"> 网页设计北京网站建设
<!-- 北京网站设计北京网页设计
h1 {text-align:center;margin-top:50px;}北京网站制作
p#outer {企通互联
margin:0 auto;网站设计 网站制作
width:202px;企通互联 企通互联
}北京网站建设
#outer a {网站设计
margin:0px; 企通互联
display:block;北京网站制作
position: relative;网站建设
border:1px solid #ccc;北京网站制作
}企通互联
#outer a:hover {border:1px dashed #c00;}网站制作
#outer img {display:block;border:none;background:#069;}网站制作
-->北京网站设计
</style>企通互联
</head>北京网站设计
<body>北京网站建设
<h1>将鼠标移至图片，将看到此效果。</h1>北京网站制作
<p id="outer"><a href="http://www.webjx.com/"><img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="http://www.webjx.com/images/logo.gif" alt="www.webjx.com" width="200" height="90" /></a> 北京网站制作
</p>北京网站制作
</body>北京网站制作
</html> Www^Chinaz^com
|
北京网站制作
上一篇：网页设计网页特效--鼠标悬停图片渐显效果
下一篇：网站建设总结：网站优化中关于META标签的常用方法
