JS特效代码 JS动态平滑滚动菜单效果

分类 : 代码案例

JS特效代码 JS动态平滑滚动菜单效果


<html>

<head>

<title>www.css5.net</title>

<style type="text/css">

body {cursor:crosshair; background:#111; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}

.link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;}

.title   {position:relative;cursor:pointer;background:#333;width:100%;color:#fff;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}

.title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}

.text {position:relative;text-align:justify;margin:10px;font-family:verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}


</style>


<script type="text/javascript"><!--

var object = new Array();


function Slide(N,oCont){

this.N  = N;

this.S  = 1.1;

this.object = new Array();


this.CObj = function (parent,N){

this.parent = parent;

this.N = N;

this.obj = parent.frm[N];

this.tit = this.obj.firstChild;

this.div = this.obj.getElementsByTagName("div")[1];

this.div.style.visibility = "hidden";

this.y0 = N * 18;

this.Y1 = this.y0;

this.obj.style.top = this.y0;

this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;

this.obj.style.visibility = "visible";

this.obj.parent = this;

this.run = false;

this.move = function(){

with(this){

dy = (y1-y0)/parent.S;

if(Math.abs(dy)>.1){

y0+=dy;

obj.style.top = Math.round(y0);

setTimeout("object["+parent.N+"].object["+N+"].move();", 16);

} else {

run = false;

if(dy>0)div.style.visibility="hidden";

else if(N>0)parent.object[N-1].div.style.visibility="hidden";

}

}

}

this.obj.onmouseover = function(){

with(this.parent){

if(!run){

run = true;

div.style.visibility="visible";

for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";

tit.className = "title_o";

for(i=0;i<=N;i++){

parent.object[i].y1 = i*18;

parent.object[i].move();

}

for(i=N+1;i<parent.NF;i++){

parent.object[i].y1 = parent.H-(parent.NF-i)*18;

parent.object[i].move();

}

}

}

}

}


this.frm = document.getElementById(oCont);

this.H = parseInt(this.frm.style.height);

this.frm = this.frm.getElementsByTagName("span");

this.NF = this.frm.length;

for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);

this.object[0].obj.onmouseover();

this.S = 10;

}


onload = function() {

object[0] = new Slide(0, "frames");

}


//-->

</script></head><body>


<div style="position: absolute; left: 50%; top: 50%;">

<div id="frames" style="overflow: hidden; position: absolute; width: 200px; height: 340px; left: -100px; top: -170px;">

<span style="top: 0pt; height: 211px; visibility: visible;" class="link"><div class="title_o"></div>

<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: visible;">

The Circle of Life

</div>

</span>

<span style="top: 213px; height: 211px; visibility: visible;" class="link"><div class="title">Programmer to Module Leader:</div>

<div style="visibility: hidden;" class="text">

"This is not possible. **Impossible**. It will involve design change

and no body in our team knows the design of the system. And above that

nobody in our company knows the language in which this software has

been written. So even if somebody wants to work on it, they can't. If

you ask my personal opinion the company should never take these type of

projects." </div>

</span>

<span style="top: 231px; height: 211px; visibility: visible;" class="link"><div class="title">Module Leader to Project Manager:</div>

<div style="visibility: hidden;" class="text">

"This project will involve design change. Currently we don't have

people who have experience in this type of work. Also the language is

unknown so we will have to arrange for some training if we take this

project. In my personal opinion, we should avoid taking this project." </div>

</span>

<span style="top: 249px; height: 211px; visibility: visible;" class="link"><div class="title">Project Manager to 1st Level Manager:</div>

<div style="visibility: hidden;" class="text">

"This project involves design change in the system and we don't have

much experience in that area. Also not many people are trained in this

area. In my personal opinion we can take the project but we should ask

for some more time." </div>

</span>

<span style="top: 267px; height: 211px; visibility: visible;" class="link"><div class="title">1st Level Manager to 2nd Level Manager:</div>

<div style="visibility: hidden;" class="text">

"This project involves design re-engineering. We have some people who

have worked in this area and some who know the language. So they can

train other people. In my personal opinion we should take this project

but with caution." </div>

</span>

<span style="top: 285px; height: 211px; visibility: visible;" class="link"><div class="title">2nd Level Manager to CEO:</div>

<div style="visibility: hidden;" class="text">

"This project will show the industry our capabilities in remodeling the

design of a complete system. We have all the necessary skills and

people to execute this project successfully. Some people have already

given in-house training in this area to other people. In my personal

opinion we should not let this project go by under any circumstance." </div>

</span>

<span style="top: 303px; height: 211px; visibility: visible;" class="link"><div class="title">CEO to Client:</div>

<div style="visibility: hidden;" class="text">

"These are the type of projects in which our company specialize. We

have executed many project of the same nature for many big clients.

Trust me when I say that you are in the safest hand in the Industry. In

my personal opinion we can execute this project successfully and that

too well with in the given time frame." </div>

</span>

<span style="top: 321px; height: 211px; visibility: visible;" class="link"><div class="title"></div>

<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: hidden;">

The End

</div>

</span>

</div>

</div>

<p>查找更多代码,请访问:<a href="http://www.css5.net" target="_blank">CSS5.NET</a></p>

</body></html>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

HTML如何引入CSS文件
怎么在html中调用css文件?
Windows 如何在cmd命令行中查看、修改、删除与添加环境变量
修改系统启动项 grub2配置的方法
【MySQL】漫谈MySQL体系结构
02-标识符,关键字和保留字
JavaScript中this指向问题
MYSQL性能优化之Mysql体系结构,存储引擎
《MySQL 性能优化》之理解 MySQL 体系结构
Python语法的使用和简介

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
前端该怎么学?推荐一个学习路线!
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
.Net轻松处理亿级数据--ClickHouse数据操作
DIV CSS字体(font-family)实现字体样式设置
html5中datalist标签怎么用
Mysql里表示布尔型的类型是什么
Datalist options 集合,options语法,optio

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16