- 浏览: 120878 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{
background-color:#B8B8A0;
}
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:115px;
height:30px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:9px;
font-family:small fonts;
color:#800080;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#ffffff;
position:relative;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is mozart0</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is mozart0</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null;
for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";
fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=fbtn_txt[num];
var m=fbtn_mask[num];
if(o.style.posTop<-60){
o.style.display="none";
var t=o.children[1].innerHTML;
o.children[1].innerHTML=o.children[0].innerHTML;
o.children[0].innerHTML=t;
o.style.posTop=-30;
o.style.display="block";
if(m.style.posTop>30)
m.style.posTop=-30;
else
m.style.posTop=0;
}
else{
m.style.posTop+=3;
o.style.posTop-=3;
setTimeout('domove('+num+')',15);
}
}
</script>
</body>
</html>
发表评论
-
jQuery操作Table学习总结
2012-11-08 13:35 674jQuery在客户端操作Table学习：不过有很多很多的不足， ... -
模仿AJAX上传文件
2011-07-27 11:08 0首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:08 658首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 703首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 896首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
KindEditor-编辑器配置参数属性
2011-03-31 17:09 1830在《KindEditor-KindEditor简介》中提到了K ... -
js首页图片轮播
2011-01-12 17:05 1877<HTML><HEAD><TIT ... -
【转】 DIV+CSS+JS图片无缝滚动代码下载
2011-01-10 22:55 998DIV的图片无缝滚动,DIV 图片上无缝滚动,DIV 图片下无 ... -
javascript跳转
2010-12-29 16:39 735js跳转页面方法大全<s ... -
新的右下脚消息
2010-12-25 00:42 409<SCRIPT language=JavaScript& ... -
右下角弹窗
2010-12-25 00:30 1563<html><body><sty ... -
js 操作 cookie
2010-12-20 14:57 701//设置cookies function setCookie( ... -
js全选单选集合
2010-10-30 09:05 1024<!DOCTYPE html PUBLIC " ... -
JS特效代码大全（四）js弹出对话框
2010-09-19 09:56 3573js弹出对话框在某些情况下是一个很好的工具，通过半透明的设置 ... -
js模式对话框控制
2010-09-19 09:45 1928Javascript有许多内建的方法来产生对话框，如：wind ... -
滑门技术
2010-09-08 14:45 609<!DOCTYPE HTML PUBLIC ... -
如何局部刷新js函数
2010-09-08 11:06 1205<script type="text/java ... -
js滑动门
2010-08-31 17:41 996<!DOCTYPE html PUBLIC " ... -
自己写的js加密
2010-08-10 18:50 674<script>function changeTe ...
相关推荐
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...
js 实现 滚动导航菜单! 值得下载看看!资源免费,大家分享!!
【标题】：“纵向超酷滚动...通过以上分析，我们可以了解到“纵向超酷滚动菜单超酷版”是一个结合了现代网页技术，包括HTML、CSS和JavaScript的高级交互式设计实例，它能够为用户提供一种独特且富有吸引力的浏览体验。
在网页设计中，动态滚动菜单是一种常见的交互元素，它可以提高用户体验，使用户更容易导航到网站的不同部分。本篇文章将深入探讨如何使用JavaScript库JQuery来实现这种效果。 JQuery是一个强大的JavaScript库，它...
接下来，我们将深入探讨滚动菜单的实现原理、应用场景以及相关技术。 一、滚动菜单的实现原理 滚动菜单的基本思想是通过编程技术来控制菜单项的显示和隐藏。当菜单超出屏幕边界时，通过滑动或滚动操作，菜单会自动...
总之，手机顶部滚动菜单是一种实用且高效的导航设计，通过巧妙地结合HTML、CSS和JavaScript（尤其是jQuery），我们可以实现功能丰富、响应式的滚动菜单，提升移动应用的可用性和用户体验。在开发过程中，不断关注...
**jQuery滚动菜单插件Section Menu详解** jQuery Section Menu是一款实用的JavaScript插件，它专为网页设计者和开发者提供了一种高效的方式，来创建一个侧边栏的菜单，该菜单可以随着用户滚动页面而更新，指向页面...
4. **jQuery代码**：编写JavaScript代码来监听鼠标的移动事件，判断其在导航容器内的位置，并根据需要滚动菜单。以下是一个基本的示例： ```javascript $(document).ready(function() { var navContainer = $('#...
在"js鼠标滚动自动隐藏导航菜单"的设计中，主要涉及以下JavaScript知识点： 1. **DOM操作**：DOM（Document Object Model）是HTML和XML文档的结构化表示，JavaScript通过DOM可以访问和修改页面元素。在这个例子中，...
通过分析这个文件，我们可以学习如何在HTML结构中设置滚动菜单，并结合CSS和JavaScript实现动态滚动功能。 详细知识点如下： 1. **HTML 结构**：菜单滚动的基础是建立一个合适的HTML结构，通常包含`<nav>`、`<ul>`...
在本资源“JS动态平滑滚动菜单效果”中，我们将探讨如何利用JavaScript来创建一个流畅且具有吸引力的菜单滚动效果。 一、平滑滚动原理 平滑滚动效果通常是通过监听用户的滚动事件，然后使用JavaScript计算出目标...
总结，基于SVG的js圆形菜单插件是实现网页动态菜单的一种高效解决方案，它结合了SVG的矢量特性、JavaScript的交互性和CSS的美化效果，为网页增加了趣味性和实用性。通过学习和使用这个插件，开发者可以提升网站的...
"JS动态平滑滚动菜单效果"是一个常见的JavaScript应用，它主要用于网站的导航菜单。这种效果可以使用户在点击菜单项时，页面能够平滑地滚动到相应的位置，而非瞬间跳转，从而提供更加流畅、舒适的浏览体验。 首先，...
在本项目中，我们关注的是几个JavaScript的经典效果：图片切换、无缝滚动和JavaScript菜单。 1. 图片切换： 图片切换效果是网页设计中常见的元素，用于展示多张图片或内容。实现这一效果通常有两种常见方法：CSS3...
支持自动滚动菜单内容的dropmenu菜单，内容自动滚动，意思是说，菜单的主菜单包括一个内容比较多的二级菜单，看上去很长总显示不完，这时候菜单自动会滚动，让浏览者可以看到菜单的全部内容，动画效果使用了jQuery，...
在这个"阿里支付宝JavaScript图片滚动导航菜单"项目中，我们主要探讨的是如何使用JavaScript技术来创建一个具有动态效果、视觉吸引力且易于使用的图片滚动导航菜单。 首先，让我们了解导航菜单在网页设计中的作用。...
这个“js页面滚动自动隐藏和显示顶部菜单”的压缩包文件就提供了实现这一功能的JavaScript代码示例。 首先，我们要了解JavaScript（JS）在网页开发中的作用。JavaScript是一种客户端脚本语言，它允许开发者在用户...
在IT行业中，导航滑动与切换滚动菜单是构建用户界面时常见的交互设计元素，尤其在移动应用和响应式网页设计中极为重要。这样的设计能够提供流畅的用户体验，帮助用户更轻松地浏览和导航内容丰富的网站或应用。接下来...
本主题聚焦于“jquery scroll图片滚动菜单鼠标移动图片滚动”，这是一个利用jQuery实现的交互式网页效果，通常用于创建动态的、响应式的图片滚动菜单。当我们把鼠标移到这个菜单上时，图片会随着鼠标的移动而滚动，...