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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Javascript的表单验证长度
Mar 16 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 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
终于听上了直流胆调频
2021/03/02 无线电
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python实现随机梯度下降法
2020/03/24 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
加拿大探亲邀请信
2014/01/28 职场文书
产品发布会策划方案
2014/05/12 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
财务会计岗位职责
2015/02/03 职场文书
致运动员的广播稿
2015/08/19 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书