js特效-震动下拉菜单、抖动窗口
来源:互联网 发布:淘宝购买会计证被骗 编辑:程序博客网 时间:2024/05/01 03:13
js源码bounce.js:
// JavaScript Document
function bounce(objId, direction, speed, destorySign){
var effect = this;
var obj = null;
var top = 0;
var left = 0;
var container = null;
var direction = direction;
var speed = speed ? speed : 20;
var shakeSpeed = speed;
var shakeDirection = false;
var timer = null;
var shakeTimer = null;
var destorySign = destorySign ? destorySign : false;
var init = function(){
obj = document.getElementById(objId);
obj.style.position= "absolute";
obj.style.display="block";
top = obj.offsetTop;
left = obj.offsetLeft;
var parent = obj.parentNode;
container = document.createElement("div");
container.style.overflow = "hidden";
container.style.position = "absolute";
container.style.zIndex = 1000;
container.appendChild(obj);
parent.appendChild(container);
if(parent.tagName != "BODY"){
container.style.width = obj.offsetWidth + "px";
container.style.height = obj.offsetHeight + "px";
container.style.top = top+"px";
container.style.left = left+"px";
top = 0;
left = 0;
}
else{
container.style.width = "100%";
container.style.height = "100%";
container.style.top = "0px";
container.style.left = "0px";
}
if(direction == "up"){
obj.style.top = 0-obj.offsetHeight+"px";
obj.style.left = left + "px";
}
else if(direction == "down"){
obj.style.top = container.offsetHeight+"px";
obj.style.left = left + "px";
}
else if(direction == "left"){
obj.style.left = 0-obj.offsetWidth+"px";
obj.style.top = top + "px";
}
else{
obj.style.left = container.offsetWidth+"px";
obj.style.top = top + "px";
}
obj.style.margin = "0px";
container.style.display = "none";
};
this.show = function(func){
clearInterval(timer);
if(shakeTimer==null)
timer = setInterval(function(){effect.animateShow(func);}, 50);
};
this.hide = function(func){
clearInterval(timer);
timer = setInterval(function(){effect.animateHide(func);}, 50);
};
this.animateShow = function(func){
container.style.display = "block";
container.style.visibility = "visible";
if(direction == "up"){
if(obj.offsetTop + speed <= top)
obj.style.top = obj.offsetTop + speed + "px";
else{
obj.style.top = top + "px";
clearInterval(timer);
if(shakeTimer==null)
shakeTimer = setInterval(function(){effect.shake(func);}, 100);
}
}
else if(direction == "down"){
if(obj.offsetTop - speed >= top)
obj.style.top = obj.offsetTop - speed +"px";
else{
obj.style.top = top + "px";
clearInterval(timer);
if(shakeTimer==null)
shakeTimer = setInterval(function(){effect.shake(func);}, 100);
}
}
else if(direction == "left"){
if(obj.offsetLeft + speed <= left)
obj.style.left = obj.offsetLeft + speed + "px";
else{
obj.style.left = left + "px";
clearInterval(timer);
if(shakeTimer==null)
shakeTimer = setInterval(function(){effect.shake(func);}, 100);
}
}
else{
if(obj.offsetLeft - speed >= left)
obj.style.left = obj.offsetLeft - speed + "px";
else{
obj.style.left = left + "px";
clearInterval(timer);
if(shakeTimer==null)
shakeTimer = setInterval(function(){effect.shake(func);}, 100);
}
}
};
this.animateHide = function(func){
container.style.display = "block";
container.style.overflow = "hidden";
shakeSpeed = speed;
if(shakeTimer != null)
clearInterval(shakeTimer);
shakeTimer = null;
if(direction == "up"){
if(obj.offsetTop - speed >= 0-obj.offsetHeight)
obj.style.top = obj.offsetTop - speed + "px";
else{
obj.style.top = 0-obj.offsetHeight + "px";
container.style.display = "none";
clearInterval(timer);
this.destory();
if(func)
func();
}
}
else if(direction == "down"){
if(obj.offsetTop + speed <= container.offsetHeight)
obj.style.top = obj.offsetTop + speed +"px";
else{
obj.style.top = container.offsetHeight+"px";
container.style.display = "none";
clearInterval(timer);
this.destory();
if(func)
func();
}
}
else if(direction == "left"){
if(obj.offsetLeft - speed >= 0-obj.offsetWidth)
obj.style.left = obj.offsetLeft - speed + "px";
else{
obj.style.left = 0-obj.offsetWidth + "px";
container.style.display = "none";
clearInterval(timer);
this.destory();
if(func)
func();
}
}
else{
if(obj.offsetLeft + speed <= container.offsetWidth)
obj.style.left = obj.offsetLeft + speed + "px";
else{
obj.style.left = container.offsetWidth+"px";
container.style.display = "none";
clearInterval(timer);
this.destory();
if(func)
func();
}
}
};
this.shake = function(func){
if(direction == "up"){
if(obj.offsetTop == top){
if(Math.abs(shakeSpeed) <= 4){
obj.style.top = top + "px";
shakeSpeed = speed;
container.style.overflow = "visible";
clearInterval(shakeTimer);
if(func)
func();
}
else{
shakeSpeed = shakeSpeed / 2;
if(shakeSpeed>15)
shakeSpeed = 15;
shakeDirection = false;
obj.style.top = obj.offsetTop - shakeSpeed + "px";
}
}
else{
if(shakeSpeed == 0){
shakeDirection = true;
}
if(!shakeDirection){
shakeSpeed -= 4;
if(shakeSpeed < 0)
shakeSpeed = 0;
obj.style.top = obj.offsetTop - shakeSpeed + "px";
}
else{
shakeSpeed += 4;
if(obj.offsetTop + shakeSpeed > top){
obj.style.top = top + "px";
}
else{
obj.style.top = obj.offsetTop + shakeSpeed + "px";
}
}
}
}
else if(direction == "down"){
if(obj.offsetTop == top){
if(Math.abs(shakeSpeed) <= 4){
obj.style.top = top + "px";
shakeSpeed = speed;
clearInterval(shakeTimer);
if(func)
func();
}
else{
shakeSpeed = shakeSpeed / 2;
if(shakeSpeed>15)
shakeSpeed = 15;
shakeDirection = false;
obj.style.top = obj.offsetTop + shakeSpeed + "px";
}
}
else{
if(shakeSpeed == 0){
shakeDirection = true;
}
if(!shakeDirection){
shakeSpeed -= 4;
if(shakeSpeed < 0)
shakeSpeed = 0;
obj.style.top = obj.offsetTop + shakeSpeed + "px";
}
else{
shakeSpeed += 4;
if(obj.offsetTop - shakeSpeed < top){
obj.style.top = top + "px";
}
else{
obj.style.top = obj.offsetTop - shakeSpeed + "px";
}
}
}
}
else if(direction == "left"){
if(obj.offsetLeft == left){
if(Math.abs(shakeSpeed) <= 4){
obj.style.left = left + "px";
shakeSpeed = speed;
clearInterval(shakeTimer);
if(func)
func();
}
else{
shakeSpeed = shakeSpeed / 2;
if(shakeSpeed>15)
shakeSpeed = 15;
shakeDirection = false;
obj.style.left = obj.offsetLeft - shakeSpeed + "px";
}
}
else{
if(shakeSpeed == 0){
shakeDirection = true;
}
if(!shakeDirection){
shakeSpeed -= 4;
if(shakeSpeed < 0)
shakeSpeed = 0;
obj.style.left = obj.offsetLeft - shakeSpeed + "px";
}
else{
shakeSpeed += 4;
if(obj.offsetLeft + shakeSpeed > left){
obj.style.left = left + "px";
}
else{
obj.style.left = obj.offsetLeft + shakeSpeed + "px";
}
}
}
}
else{
if(obj.offsetLeft == left){
if(Math.abs(shakeSpeed) <= 4){
obj.style.left = left + "px";
shakeSpeed = speed;
clearInterval(shakeTimer);
if(func)
func();
}
else{
shakeSpeed = shakeSpeed / 2;
if(shakeSpeed>15)
shakeSpeed = 15;
shakeDirection = false;
obj.style.left = obj.offsetLeft + shakeSpeed + "px";
}
}
else{
if(shakeSpeed == 0){
shakeDirection = true;
}
if(!shakeDirection){
shakeSpeed -= 4;
if(shakeSpeed < 0)
shakeSpeed = 0;
obj.style.left = obj.offsetLeft + shakeSpeed + "px";
}
else{
shakeSpeed += 4;
if(obj.offsetLeft - shakeSpeed < left){
obj.style.left = left + "px";
}
else{
obj.style.left = obj.offsetLeft - shakeSpeed + "px";
}
}
}
}
};
this.destory = function(){
if(destorySign){
var parent = container.parentNode;
parent.removeChild(container);
container.childNodes[0].removeAttribute("style");
parent.appendChild(container.childNodes[0]);
}
};
init();
return this;
};
测试代码:
<!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=utf-8" />
<title>bounce</title>
<style>
*{
padding:0px;
margin:auto;
}
#menu{
width:100px;
}
#menu_titile{
border:1px #000000 solid;
width:100px;
}
.menu_list{
border:1px #CCCCCC solid;
width:100px;
background:#fff;
}
li{
list-style-type:none;
}
</style>
</head>
<body>
<div id="menu">
<div id="menu_title">menu</div>
<div id="menu_list" class="menu_list">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</div>
<div>
</div>
<div id="text">
</div>
</body>
<script language="javascript" src="bounce.js"></script>
<script language="javascript">
var m = new menu("menu_title", "menu_list", "blind", "up");
function menu(menuId, menuListId, effect, direction){
var effectObj = null;
var menu = null;
var init = function(){
menu = document.getElementById(menuId);
effectObj = bounce(menuListId, direction, 30);
menu.parentNode.onmouseover = effectObj.show;
menu.parentNode.onmouseout = effectObj.hide;
};
init();
return this;
};
</script>
</html>
- js特效-震动下拉菜单、抖动窗口
- js特效-下拉菜单
- JS层抖动特效,类似QQ聊天窗口抖动
- JS层抖动特效,类似QQ聊天窗口抖动
- js特效-卷动菜单、窗口
- js 简单的类下拉菜单特效
- JS特效之多层下拉菜单
- js特效-渐现进入菜单、窗口
- js 窗口抖动
- 城市地区级联二级下拉选择菜单js特效
- 导航栏二级下拉菜单的js特效
- js实现小特效 下拉菜单的折叠
- js特效-两边向中显示菜单、窗口
- js窗口震动小程序
- jquery特效 简易下拉菜单
- 导航下拉二级菜单特效
- js特效-渐现菜单
- js弹出窗口特效
- 双网卡路由配置
- 表头固定,内容可以滚动例子
- web和ftp服务器的架设
- Flex拓扑图的设计(一)
- 站在巨人的肩膀上
- js特效-震动下拉菜单、抖动窗口
- c语言基于固定块链表的内存池 (转)
- 变态
- Linux下rsync参数详解
- (转)u-boot-2009.08在2440上的移植详解(三)
- windows域控身份认证原理
- 常量指针、指针常量以及指向常量的指针常量
- java对时间的操作
- java对时间的操作