不用MOUSEMOVE也能滑动啊


Posted in Javascript onMay 23, 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" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#menu { 
margin:0; 
padding:0; 
height:26em; 
overflow:hidden; 
background:#FFFCF2; 

#menu li { 
list-style-type:none; 
float:left; 
display:block; 
width:100%; 

#menu li a { 
display:block; 
text-decoration:none; 
color:#00b; 
margin:0; 
width:100%; 

#menu li a span { 
display:none; 
color:#453739; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
padding: 10px 0px 5px; 

#menu li a.one span { 
display:block; 
height:15em; 
margin:0 10px; 

#menu li a:hover { 
background:#FFFCF2; 

#menu li a:hover span { 
display:block; 
height:15em; 
margin:0 10px; 
cursor:pointer; 

#menu .h2 { 
margin:0 5px; 
padding:0; 
color:#933A34; 
font-size:12px; 
border:0; 
font-family: Verdana, Arial, Helvetica, sans-serif; 

#menu .h3 { 
margin:0 5px; 
padding:0; 
font-size:10px; 
color:#62583B; 
font-family: Verdana, Arial, Helvetica, sans-serif; 

#menu img { 
margin:0px 5px 5px; 
border:1px solid #000; 
float:left; 

.curved { 
width:15em; 

.curved .b1, .curved .b2, .curved .b3, .curved .b4 { 
font-size:1px; 
display:block; 
background:#C7BC98; 
/* hide overflow:hidden from IE5/Mac */ 
/* */ 
overflow: hidden; 
/* */ 

.curved .b1, .curved .b2, .curved .b3 { 
height:1px; 

.curved .b2, .curved .b3, .curved .b4 { 
background:#FFFCF2; 
border-left:1px solid #C7BC98; 
border-right:1px solid #C7BC98; 

.curved .b1 { 
margin:0 4px; 
background:#C7BC98; 

.curved .b2 { 
margin:0 2px; 
border-width:0 2px; 

.curved .b3 { 
margin:0 1px; 

.curved .b4 { 
height:2px; 
margin:0; 

.curved .c1 { 
margin:0 5px; 
background:#C7BC98; 

.curved .c2 { 
margin:0 3px; 
border-width:0 2px; 

.curved .c3 { 
margin:0 2px; 

.curved .c4 { 
height:2px; 
margin: 0 1px; 

.curved .boxcontent { 
display:block; 
background:transparent; 
border-left:1px solid #C7BC98; 
border-right:1px solid #C7BC98; 
font-size:0.9em; 
text-align:justify; 

</style> 
</head> 

<body> 
<div class="curved"> 
<b class="b1 c1"></b> 
<b class="b2 c2"></b> 
<b class="b3 c3"></b> 
<b class="b4 c4"></b> 
<div class="boxcontent"> 
<ul id="menu"> 
<li> 
<a href="http://www.dwww.cn/"> 
<b class="h2">设计家园</b><br /> 
<b class="h3">[2007-05-16]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li> 
<li> 
<a href="http://www.dwww.cn/HtmlData/Program/Asp/"> 
<b class="b1"></b> 
<b class="b2"></b> 
<b class="b3"></b> 
<b class="b4"></b> 
<b class="h2">Asp教程</b><br /> 
<b class="h3">[2007-05-16]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li>
<li> 
<a href="http://www.dwww.cn/HtmlData/Program/Asp/"> 
<b class="b1"></b> 
<b class="b2"></b> 
<b class="b3"></b> 
<b class="b4"></b> 
<b class="h2">Asp教程</b><br /> 
<b class="h3">[2007-05-16]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li> 
<li> 
<a href="http://www.dwww.cn/HtmlData/Program/Php/"> 
<b class="b1"></b> 
<b class="b2"></b> 
<b class="b3"></b> 
<b class="b4"></b> 
<b class="h2">Php教程</b><br /> 
<b class="h3">[2006-06-18]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li> 
<li> 
<a href="http://www.dwww.cn/HtmlData/Program/Jsp/"> 
<b class="b1"></b> 
<b class="b2"></b> 
<b class="b3"></b> 
<b class="b4"></b> 
<b class="h2">Jsp教程</b><br /> 
<b class="h3">[2007-05-16]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li> 
<li> 
<a class="one" href="http://www.dwww.cn/HtmlData/Program/Asp.Net/"> 
<b class="b1"></b> 
<b class="b2"></b> 
<b class="b3"></b> 
<b class="b4"></b> 
<b class="h2">Asp.Net教程</b><br /> 
<b class="h3">[2007-05-16]</b> 
<span> 
<img src="http://www.dwww.cn/images/logo1.gif" alt="dwww.cn | 设计家园" /> 
设计家园dwww.cn,网页设计,网站制作建设,css学习,网页标准化 
</span> 
</a> 
</li> 
</ul> 
</div> 
<b class="b4 c4"></b> 
<b class="b3 c3"></b> 
<b class="b2 c2"></b> 
<b class="b1 c1"></b> 
</div> 
</body> 
</html>

Javascript 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
简单的三步vuex入门
May 20 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
一个用js实现的页内搜索代码
May 23 #Javascript
一个js实现的所谓的滑动门
May 23 #Javascript
JavaScript网页制作特殊效果用随机数
May 22 #Javascript
JS加ASP二级域名转向的代码
May 17 #Javascript
用javascript实现的支持lrc歌词的播放器
May 17 #Javascript
JavaScript中的new的使用方法与注意事项
May 16 #Javascript
几款极品的javascript压缩混淆工具
May 16 #Javascript
You might like
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php字符串过滤与替换小结
2015/01/26 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
个人自荐书
2013/12/20 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
出国签证在职证明范本
2014/11/24 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers