几行代码轻松搞定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 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
js计算精度问题小结
Apr 22 Javascript
关于js遍历表格的实例
Jul 10 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
js倒计时简单实现方法
Dec 17 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
SVG描边动画
Feb 23 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP的FTP学习(四)
2006/10/09 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python实现websocket的客户端压力测试
2019/06/25 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
面试后感谢信
2014/02/01 职场文书
中学生操行评语大全
2014/04/24 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党员剖析材料范文
2014/09/30 职场文书
见习报告的格式
2014/11/04 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
各种货币符号快捷输入
2022/02/17 杂记