CSS 伪类实现的鼠标滑动图片链接- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > CSS 伪类实现的鼠标滑动图片链接

Javascript: 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）; (转载)JavaScript中匿名函数，函数直接量和闭包; 简单的无缝滚动程序-仅几行代码; Javascript中的数学函数集合; javascript之大字符串的连接的StringBuffer 类; javascript之对系统的toFixed()方法的修正; 用javascript实现自定义标签; js在客户端验证密码强度，兼容FireFox和IE; javascript背景颜色按时变换; 脚本分析、压缩、混淆工具 JSA新版本发布，压缩效率提高大约10％; javascript语句中的CDATA标签的意义; 用javascript实现分割提取页面所需内容; 网上抓的一个特效; js之点击超连接,提示一个层.点击空白.层消失; 模拟用户操作Input元素，不会触发相应事件; 弹出广告特效代码(一个IP只弹出一次); (仅IE下有效)关于checkbox 三态; JavaScript Archive Network 集合; 关于__defineGetter__ 和__defineSetter__的说明; textContent在Firefox下与innerText等效的属性

No. « ‹ 66 67 68 69 › »

技术文章搜索

关键字

Javascript 中的 CSS 伪类实现的鼠标滑动图片链接

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 348 ::

收藏到网摘: n/a

颜色变换像字符逐字输入的欢迎词百度用到的Js日历大家可以看看

CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。

下面的代码用到上面的图片，大家注意保存下。

<!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="Content-Type" content="text/html; charset=gbk" />
<title>CSS伪类实现的鼠标滑动链接</title>
<style>
@charset "utf-8";
/* CSS Document For www.ruanchen.com*/
body {
text-align:center;
font-size:12px;
color:#777777;
font-family:Verdana, Arial, Verdana, sans-serif,"宋体";
background-color:#FFFFFF;
margin:0;
padding:0;
}
#Nav {
margin:0;
float:left;
padding:5px 5px;
text-align:center;
width:280px;
border:1px solid #777777;
}
#Nav ul {
margin:0;
padding:0;
list-style-type:none;
}
#Nav li {
float:left;
margin:0;
width:130px;
height:33px;
margin-left:5px;
padding:0;
}
#Nav a {
display:block;
width:130px;
height:33px;
line-height:33px;
}
#Nav a.Dict:link,#Nav a.Dict:visited {
text-decoration:none;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left top no-repeat;
}
#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left -33px no-repeat;
}
#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left -66px no-repeat;
}
#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left -99px no-repeat;
}
#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left -132px no-repeat;
}
#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(/upload/tech/20100110/20100110113639_3ad7c2ebb96fcba7cda0cf54a2e802f5.gif) left -165px no-repeat;
}
</style>
</head>
<body>
<center>
<div id="Nav"> <ul> <li><a class="Dict" href="#">词霸</a></li> <li><a class="MediaPlay" href="#">MediaPlay</a></li> <li><a class="RealPlay" href="#">RealPlay</a></li> <li><a class="CodeFans" href="#">MediaPlay</a></li> <li><a class="RealPlay" href="#">RealPlay</a></li> </ul>
</div>
</center>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

颜色变换像字符逐字输入的欢迎词百度用到的Js日历大家可以看看

Javascript 中的 CSS 伪类实现的鼠标滑动图片链接

评论 (0) All