不用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获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
js实现select下拉框选择
Jan 11 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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 VS ASP
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python实现横向拼接图片
2020/03/23 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python 深度学习中的4种激活函数
2020/09/18 Python
ASP.NET Core中的配置详解
2021/02/05 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
淘宝网店营销策划书
2014/01/11 职场文书
自荐信需注意事项
2014/01/25 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
论群众路线学习笔记
2014/11/06 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python