不用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 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
基于php iconv函数的使用详解
2013/06/09 PHP
php异常处理使用示例
2014/02/25 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python之PyMongo使用总结
2017/05/26 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python for循环及基础用法详解
2019/11/08 Python
python与pycharm有何区别
2020/07/01 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
外企办公室竞聘演讲稿
2013/12/29 职场文书
学子宴答谢词
2014/01/25 职场文书
项目负责人任命书
2014/06/04 职场文书
统计专业自荐书
2014/07/06 职场文书
运动会宣传语
2015/07/13 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle