改写一个简单的菜单 弹性大小
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数
具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数，这里我简单设为了一个常量 。
<html>
<head>
<title>menu list</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
background-color: #111111;
color: #eee;
}
ul#menu {
position: absolute;
left: 40%;
}
li {
list-style: none;
padding: 0px;
margin: 1px;
}
a {
text-decoration: none;
font-family: arial, helvetica, verdana, sans-serif;
color: #fff;
font-size: 20px;
}
</style>
<script type="text/javascript">
var menu = function(){
var $ = function(o){
return document.getElementById(o);
}
var words = document.getElementsByTagName('a');
var size; //当前字体大小
var od;//指示是否为同一目标
var max_size = 40, min_size = 20;//最大字体与最小字体
var go = 0;//go指示根据指针方位的动画 ,dT指示指针是否在移动
var xm, xmb, ym, ymb;//指针运动与判定
/*入库*/
var addEvent = function(o, e, f){
if (window.addEventListener) {
o.addEventListener(e, f, false);
}
else
if (window.attachEvent) {
o.attachEvent('on' + e, f);
}
else {
return false;
}
}
var pxTop = function(o){//获取元素相对整个文档的y位置
return o.offsetParent ? o.offsetTop + pxTop(o.offsetParent) : o.offsetTop;
}
addEvent(document, 'mousemove', function(e){
e = e || window.event;
ym = (e.clientY || e.y) + document.body.scrollTop;
if (ym != ymb) {
ymb = ym;
}
od = e.target ? e.target : (e.srcElement ? e.srcElement : null);
})
var getStyle = function(elem, name){
if (elem.style[name]) {
return elem.style[name];
}
else
if (elem.currentStyle) {
return elem.currentStyle[name];
}
else
if (document.defaultValue && document.defaultValue.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
nmae = name.toLowerCase();
var s = document.defaultValue.getComputedStyle(elem, name);
return s ? s : null;
}
else
return null;
}
var test = function(){
for (var i = 0; i < words.length; i++) {
var p = words[i];
size = parseInt(getStyle(p, "fontSize"));
if (od && od.className == "move") {
if (p != od) {
p.style.color = "white";
}
p.style.fontSize = Math.max(go * Math.cos((ym - pxTop(p)) / (3 * max_size)), min_size) + "px";
od.style.color = "yellow";
if (go <= max_size) {
go = go + 0.05;
}
}
else {
if (go >= min_size) {
go = go - 0.05;
}
p.style.fontSize = (Math.max(size - 0.05, min_size)) + "px";
p.style.color = "white";
}
}
}
return {
test: test
}
}()
window.onload = function(){
setInterval(menu.test, 16)
}
</script>
</head>
<body>
<ul id="menu">
<li>
<a href="http://del.icio.us/tag/scripting" target="_blank" class="move">scripting</a>
</li>
<li>
<a href="http://del.icio.us/tag/javascript" target="_blank" class="move">javascript</a>
</li>
<li>
<a href="http://del.icio.us/tag/web" target="_blank" class="move">web</a>
</li>
<li>
<a href="http://del.icio.us/tag/dhtml" target="_blank" class="move">dhtml</a>
</li>
<li>
<a href="http://del.icio.us/tag/css" target="_blank" class="move">css</a>
</li>
<li>
<a href="http://del.icio.us/tag/ajax" target="_blank" class="move">ajax</a>
</li>
<li>
<a href="http://del.icio.us/tag/programming" target="_blank" class="move">programming</a>
</li>
<li>
<a href="http://del.icio.us/tag/design" target="_blank" class="move">design</a>
</li>
<li>
<a href="http://del.icio.us/tag/webdesign" target="_blank" class="move">webdesign</a>
</li>
<li>
<a href="http://del.icio.us/tag/html" target="_blank" class="move">html</a>
</li>
<li>
<a href="http://del.icio.us/tag/dom" target="_blank" class="move">dom</a>
</li>
<li>
<a href="http://del.icio.us/tag/webdev" target="_blank" class="move">webdev</a>
</li>
<li>
<a href="http://del.icio.us/tag/reference" target="_blank" class="move">reference</a>
</li>
<li>
<a href="http://del.icio.us/tag/tools" target="_blank" class="move">tools</a>
</li>
<li>
<a href="http://del.icio.us/tag/tutorial" target="_blank" class="move">tutorial</a>
</li>
<li>
<a href="http://del.icio.us/tag/xmlhttprequest" target="_blank" class="move">xmlhttprequest</a>
</li>
<li>
<a href="http://del.icio.us/tag/menu" target="_blank" class="move">menu</a>
</li>
<li>
<a href="http://del.icio.us/tag/xml" target="_blank" class="move">xml</a>
</li>
<li>
<a href="http://del.icio.us/tag/library" target="_blank" class="move">library</a>
</li>
<li>
<a href="http://del.icio.us/tag/development" target="_blank" class="move">development</a>
</li>
</ul>
<!-- <h1 id="test">a</h1> -->
</body>
</html>
演示代码：http://demo.jb51.net/js/caidan/js_caidan.htm
相关推荐
-
改写一个简单的菜单 弹性大小
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数 具体实现时,为了不在整个菜单总高度中出现两个波峰而产生突兀感,事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数,这里我简单设为了一个常量 . 完整的代码为 复制代码 代码如下: <html> <head> <title>menu list</title> <style type="text/css">
-
Bootstrap打造一个左侧折叠菜单的系统模板(二)
在上一篇文章给大家介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一),具体内容介绍可以点击了解详情. 1. 关于上一篇文章BUG 上一篇文章中有几位朋友提出的问题和BUG. 我简单的说一下. 1>. IE版本的支持? 我写的这些只是测试火狐谷歌浏览.在IE8+下可以添加代码以实现兼容. <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&qu
-
使用MongoDB和JSP实现一个简单的购物车系统实例
本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来获取用户提交的登录信息并查询数据库,如果用户名为本小组成员的名字且密码为对应的学号时,采用JSP内置对象的方法跳转到订购页面(显示店中商品的种类和单价等目录信息):否则采用JSP动作提示用户重新登录(注:此页面上要包含前面的登录界面). (3
-
Java Swing编写一个简单的计算器软件
目录 实现要求 实现代码: 实现要求 1.使用Java图形界面组件设计软件,界面如图所示. 2.软件能够满足基本的"加.减.乘.除"等运算要求. 3.程序代码清晰,语法规范,结构合理,逻辑正确. 4.编辑菜单中包括"复制和粘贴"两个菜单项,为菜单项编写事件代码. 实现代码: import java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.event.ActionEvent; impo
-
Python实现一个简单的QQ截图
目录 前言 一.需求分析 二.截图 三.矩形选择 四.按钮设置 总结 前言 毕设有一部分要用到类似QQ截图的功能,这里记录制作过程.因为后期要添加人工智能的功能,所以用python来写桌面应用. 一.需求分析 可以简单的将过程分为以下三步: 点击按钮或敲击快捷键进入截图模式:在截图模式通过鼠标左键按压/松开选取矩形区域:将矩形区域截图保存到指定目录或者剪贴板. 现在我将从第三步开始一步步向上搜索.编写.验证. 二.截图 通过对“python”和“截图”两个关键字搜索不难发现pytho
-
jQuery实现的简单折叠菜单(折叠面板)效果代码
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
一个简单安全的PHP验证码类、PHP验证码
一,验证码示例 二,php验证码类,secoder.class.php <?php /** * 安全验证码 * * 安全的验证码要:验证码文字扭曲.旋转,使用不同字体,添加干扰码 * * @author 流水孟春 <cmpan(at)qq.com> * @link http://labs.yulans.cn/YL_Security_Secoder * @link http://wiki.yulans.cn/docs/yl/security/secoder */ class YL_Secu
-
使用Java制作一个简单的记事本
通过使用Java的Swing.IO来实现一个简单记事本,实现打开指定的text文本文件,然后将text文件的内容加载到Swing组件中,然后在Swing组件中编辑记事本内容,然后同菜单的保存选项将编辑后的内容保存到text文件中.代码如下: 复制代码 代码如下: import java.io.*; import java.nio.*; import java.nio.channels.*; import java.nio.charset.*; import java.awt.*; import
-
一个简单的javascript图片放大效果代码
一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: 复制代码 代码如下: $E({berviary:"currentPic&
-
jquery实现的简单二级菜单效果代码
本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3