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 相关文章推荐
js截取函数(indexOf,join等)
Sep 01 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
js实现随机点名小功能
Aug 17 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
react antd实现动态增减表单
Jun 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比较运算符的详细介绍
2015/09/29 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Python内存读写操作示例
2018/07/18 Python
详解Python中的测试工具
2019/06/09 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
中专自我鉴定范文
2013/10/16 职场文书
自我鉴定标准格式
2014/03/19 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记