繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 几行代码轻松搞定jquery实现flash8类似的连接效果
- Javascript
- javascript实现的鼠标悬停时动态翻滚的导航条
- 通过隐藏option实现select的联动效果
- jquery 输入框数字限制插件
- 文字来回上下移动或跳动的代码
- JS旋转的彩色文字轮转特效
- 不一样的文字闪烁 轮番闪烁
- Javascript 解疑
- jQuery 白痴级入门教程
- Jquery在IE7下无法使用 $.ajax解决方法
- javascript 日期常用的方法
- ASP中进行HTML数据及JS数据编码函数
- JS 中document.URL 和 windows.location.href 的区别
- 跨域表单提交状态的变相判断代码
- JS解析XML的实现代码
- Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
- Javascript 定时器调用传递参数的方法
- 把html页面的部分内容保存成新的html文件的jquery代码
- XHTML下,JS浮动代码失效的问题
- 两个select之间option的互相添加操作(jquery实现)
- Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Javascript 中的 几行代码轻松搞定jquery实现flash8类似的连接效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 340 ::
收藏到网摘: n/a
很简单几行代码就可以实现整个页面的连接效果.
复制代码 代码如下:
<!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=gb2312" />
<script src="js/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list1").css("list-style","none");
$("#list1").css("margin","0px");
$("#list1").children().css("background-image","url(l_04.gif)");
$("#list1").children().css("height","30px");
$("#list1").children().children().css("margin-left","0px");
$("#list1").children().children().css("padding-left","12px");
$("#list1").children().children().css("background-image","url(allow_01.gif)");
$("#list1").children().children().css("background-repeat","no-repeat");
$("#list1").children().children().css("background-position","left center");
$("#list1").children().children().mouseover(function(){
$(this).css("background-image","url(allow_02.gif)");
$(this).css("margin-left","6px");
});
$("#list1").children().children().mouseout(function(){
$(this).css("background-image","url(allow_01.gif)");
$(this).css("margin-left","0px");
});
}
);
</script>
<title>无标题文档</title>
</head>
<body>
<div>
<ul id="list1">
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
<li><a href="#">例表第一项</a></li>
</ul>
</div>
</body>
</html>
评论 (0) All
