几行代码轻松搞定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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
详解TypeScript的基础类型
Feb 18 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python中进程和线程的区别详解
2017/10/29 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python help函数实例用法
2020/12/06 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
八年级物理教学反思
2014/01/19 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
诚信考试承诺书
2014/03/27 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB