几行代码轻松搞定jquery实现flash8类似的连接效果


Posted in Javascript onMay 03, 2007

很简单几行代码就可以实现整个页面的连接效果. 

<!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> 
Javascript 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 #Javascript
javascript静态的url如何传递
May 03 #Javascript
可以支持多中格式的JS键盘
May 02 #Javascript
javascript英文日期(有时间)选择器
May 02 #Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 #Javascript
JavaScript 实现??打印?理
Apr 28 #Javascript
javascript实现的listview效果
Apr 28 #Javascript
You might like
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Anaconda入门使用总结
2018/04/05 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
基于Python实现用户管理系统
2019/02/26 Python
python编写计算器功能
2019/10/25 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
公司业务主管岗位职责
2013/12/07 职场文书
高中的自我鉴定
2013/12/16 职场文书
80后婚前协议书范本
2014/10/24 职场文书
写给医生的感谢信
2015/01/22 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers