不用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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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 mcrypt可逆加密算法分析
2011/07/19 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python实现最常见加密方式详解
2019/07/13 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
中层干部岗位职责
2013/12/18 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
一岗双责责任书
2014/04/15 职场文书
办理收楼委托书范本
2014/10/09 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
消防安全月活动总结
2015/05/08 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技