脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS响应鼠标点击动画渐变弹出层

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

 更新时间：2016年03月25日 11:21:50   作者：回不倒過去  
这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

相关文章

  • JS实现的碰撞检测与周期移动完整示例

    JS实现的碰撞检测与周期移动完整示例

    这篇文章主要介绍了JS实现的碰撞检测与周期移动,结合完整实例形式分析了javascript结合时间函数的页面元素属性动态操作及事件响应相关使用技巧,需要的朋友可以参考下
    2019-09-09
  • JS代码实现根据时间变换页面背景效果

    JS代码实现根据时间变换页面背景效果

    这篇文章主要介绍了JS代码实现根据时间变换页面背景效果的相关资料，非常不错，具有参考借鉴价值，需要的朋友一起看下吧
    2016-06-06
  • javascript实现点击按钮切换图片

    javascript实现点击按钮切换图片

    这篇文章主要为大家详细介绍了javascript实现点击按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

    这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单，依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同，若相同则认为没有改动，但倘若不同则需要重新编译,需要的朋友可以参考下
    2016-12-12
  • JS判断iframe是否加载完成的方法

    JS判断iframe是否加载完成的方法

    这篇文章主要介绍了JS判断iframe是否加载完成的方法,提供了2种实现方法,可分别针对IE内核与非IE内核浏览器进行判断与操作,涉及javascript事件操作与判定技巧,需要的朋友可以参考下
    2016-08-08
  • javascript中scrollTop详解

    javascript中scrollTop详解

    本文主要给大家介绍了javascript中的scrollTop方法，以及scrollTop在各大浏览器的兼容性情况的详细测试，十分的细致全面，这里推荐给大家，有需要的小伙伴可以参考下。
    2015-04-04
  • 微信小程序实现菜单左右联动效果

    微信小程序实现菜单左右联动效果

    这篇文章主要为大家详细介绍了微信小程序实现菜单左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js面向对象编程之如何实现方法重载

    js面向对象编程之如何实现方法重载

    如何实现方法重载，涉及到三个问题：同名函数的调用、函数中特殊的参数arguments、如何利用arguments实现方法重载,需要的朋友可以参考下
    2014-07-07
  • JS+CSS实现DIV层的展开、收缩效果

    JS+CSS实现DIV层的展开、收缩效果

    这篇文章主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS简单判断字符在另一个字符串中出现次数的2种常用方法

    JS简单判断字符在另一个字符串中出现次数的2种常用方法

    这篇文章主要介绍了JS简单判断字符在另一个字符串中出现次数的2种常用方法,结合实例形式分析了js字符串分割计算与正则操作2种实现技巧,需要的朋友可以参考下
    2017-04-04

最新评论