JS实现响应鼠标点击动画渐变弹出层效果代码


Posted in Javascript onMarch 25, 2016

本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果。分享给大家供大家参考,具体如下:

<!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>动画弹出层</title>
<style>
.list{
 position:relative;;
 background:#eee;
 border:1px #ccc solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor :pointer ;
}
.listShow{
 position:relative;
 background:#eff;
 border:1px #ddd solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor :pointer ;
}
.comment{
 position:absolute;
 left:0;
 display:none;
 position:absolute;
 border:1px #ccc solid;
 background:#fee;
 width:200px;
 height:200px;
 overflow:hidden;
 z-index:100;
}
</style>
</head>
<body>
<div class="" id="show">
0
</div>
<div class="list" id="list1">1
 <div class="comment" id="comment1">三水点靠木<br/>
</div>
<div class="list" id="list2">2
 <div class="comment" id="comment2">新浪搜狐</div>
</div>
<div class="list" id="list3">3
 <div class="comment" id="comment3">网页特效</div>
</div>
</body>
</html>
<script>
 var zindex=0;
 function $id(id){
 return document.getElementById(id);
 }
 var Bind = function(object,fun){
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(){
  return fun.apply(object,args);
 }
 }
 function addEventHandler(oTarget, sEventType, fnHandler){
  if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
  else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
  else{oTarget['on' + sEventType] = fnHandler;}
 }
 var Shower=function(){
 this.list=null;
 this.comment=null;
 this.moveLeft=80;
 this.moveTop=20;
 this.height=150;
 this.width=250;
 this.time=800;
 this.init=function(lisObj,comObj){
  this.list=lisObj;
  this.comment=comObj;
  var _this=this;
  this._fnMove=Bind(this,this.move);
  (function(){
  var obj=_this;
  addEventHandler(obj.list,"click",obj._fnMove);
  })();
 };
 this.move=function(){
  var _this=this;
  var w=0;
  var h=0;
  var height=0; //弹出div的高
  var width=0; //弹出div的宽
  var t=0;
  var startTime = new Date().getTime();//开始执行的时间
  if(!_this.comment.style.display||_this.comment.style.display=="none"){
   _this.comment.style.display="block";
   _this.comment.style.height=0+"px";
   _this.comment.style.width=0+"px";
   _this.list.style.zIndex=++zindex;
   _this.list.className="listShow";
   var comment=_this.comment.innerHTML;
   _this.comment.innerHTML=""; //去掉显示内容
   var timer=setInterval(function(){
   var newTime = new Date().getTime();
   var timestamp = newTime - startTime;
   _this.comment.style.left=Math.ceil(w)+"px";
   _this.comment.style.top=Math.ceil(h)+"px";
   _this.comment.style.height=height+"px";
   _this.comment.style.width=width+"px";
   t++;
  var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
   w=_this.moveLeft*change;
   h=_this.moveTop*change;
   height=_this.height*change;
   width=_this.width*change;
   $id("show").innerHTML=w;
    if(w>_this.moveLeft){
clearInterval(timer);
_this.comment.style.left=_this.moveLeft+"px";
_this.comment.style.top=_this.moveTop+"px";
_this.comment.style.height=_this.height+"px";
_this.comment.style.width=_this.width+"px";
_this.comment.innerHTML=comment; //回复显示内容
}
},1,_this.comment);
  }else{
   _this.hidden();
  }
}
this.hidden=function(){
 var _this=this;
 var flag=1;
 var hiddenTimer=setInterval(function(){
 if(flag==1){
 _this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";
 }else{    _this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";
 _this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";
 }
 if(flag==1 && parseInt(_this.comment.style.height)<10){
 flag=-flag;
 }
   if(parseInt(_this.comment.style.width)<20){
    clearInterval(hiddenTimer);
    _this.comment.style.left="0px";
    _this.comment.style.top="0px";
    _this.comment.style.height="0px";
    _this.comment.style.width="0px";
    _this.comment.style.display="none";
    if(_this.list.style.zIndex==zindex){
    zindex--;
    };
    _this.list.style.zIndex=0;
    _this.list.className="list";
   }
  },1)
 }
 }
 window.onload=function(){
 //建立各个菜单对象
 var shower1=new Shower();
 shower1.init($id("list1"),$id("comment1"));
 var shower2=new Shower();
 shower2.init($id("list2"),$id("comment2"));
 var shower3=new Shower();
 shower3.init($id("list3"),$id("comment3"));
 }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 #Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
详解Javascript继承的实现
Mar 25 #Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 #Javascript
JavaScript修改作用域外变量的方法
Mar 25 #Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 #Javascript
JavaScript入门系列之知识点总结
Mar 24 #Javascript
You might like
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP pear安装配置教程
2016/05/14 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Python实现EM算法实例代码
2020/10/04 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
金智子午JAVA面试题
2015/09/04 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
新郎婚宴答谢词
2014/01/19 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
保险公司晨会主持词
2014/03/22 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
合伙购房协议样本
2014/10/06 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
浅谈redis整数集为什么不能降级
2021/07/25 Redis
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技