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

2024-12-19 07:51:16

本文实例讲述了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代码

实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"
神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下下面是 CSS 部分代码:  body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
jQuery与js实现颜色渐变的方法

本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的本来想的是提示用户应该点某个按钮这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜
js实现按钮颜色渐变动画效果

本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&
javascript实现颜色渐变的方法

渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变.形状.大小.位置.方向.色彩等视觉因素都可以进行渐变.在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的渐变算法. 已知:A=50,B=200,A.B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少. 公式:Gradient = A + (B-A) / Step * N 注]编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了
JS Tween 颜色渐变

有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par
漂亮! js实现颜色渐变效果

今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src
js+HTML5实现canvas多种颜色渐变效果的方法

本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not s
JavaScript实现的鼠标响应颜色渐变效果完整实例

本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!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/199
Javascript 颜色渐变效果的实现代码

下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里思路每一种颜色由RGB组成,每两位为一个16进制数当前颜色代码和目标颜色代码,转换成10进制数后,是有差值的,利用差值,设定总执行次数的步长,计算每一步变更颜色的10进制数利用定时器执行简单的讲,就是将6位颜色代码以每两位转换为10进制数,然后计算两对RGB值的差,根据设定的步长(执行次数),计算每一步需要增加或减少的RGB值,最后变为目标颜色的RGB值需要解决的问题将6位颜色代码转换为10进制
js操作输入框提示信息且响应鼠标事件

我们经常遇到一些输入框,比如注册网站的输入框就有默认提示值,当获取鼠标焦点的时候,默认值被删除,当用户没输入东西焦点离开的时候,又恢复默认提示值.这方法用js代码实现如下: html代码: 复制代码代码如下: <input type="text" id="email" name="email" class="txt_input" value="请输入经常使用的邮箱" onfocus="fn
JS响应鼠标点击实现两个滑块区间拖动效果

本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>
JS实现网页游戏中滑块响应鼠标点击移动效果

本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html

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

相关推荐

随机推荐