JS实现的仿QQ空间图片弹出效果代码


Posted in Javascript onFebruary 23, 2016

本文实例讲述了JS实现的仿QQ空间图片弹出效果代码。分享给大家供大家参考,具体如下:

<script type="text/javascript">
function imageShow(which_click) {
  var image_path = which_click;
  //alert(image_path);
  var tag_top = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  //创建底层灰色DIV
  var index_tag = document.createElement("div");
  index_tag.style.cssText = "width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight,document.documentElement.clientHeight)+"px;position:relative;background:black;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
  document.body.appendChild(index_tag);
  //index_tag.ondblclick = closeIndexTag;
  index_tag.onclick = closeIndexTag;
  //创建图片DIV
  var img_tag = document.createElement("div");
  img_tag.style.cssText = "font:12px/18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid white;background:white;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tag_top)+"px;";
  img_tag.innerHTML = "<div style='padding:10px;background:#cccccc;border:1px solid white'><img src='images/loading.gif' /><br /><br /><b style='color:#999999;font-weight:normal'>Image loading...</b><br /></div>";
  img_tag.oncontextmenu = function() {
    var clsOK=confirm("是否确定关闭图片显示");
    if(clsOK)
      closeIndexTag();
    return false;
  }
  img_tag.onclick = closeIndexTag;
  //img_tag.onmousemove = barDidplay;
  document.body.appendChild(img_tag);
  //构建图片关闭按钮
  var close_tag = document.createElement("div");
  close_tag.style.cssText = "display:none;position:absolute;left:10px;top:10px;color:black;";
  close_tag.innerHTML = "<b style='background:none;border:0px solid white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;'> 关闭 </b>";
  close_tag.onclick = closeIndexTag;
  var img = new Image();
  img.src = image_path;
  img.style.cssText = "border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;cursor:pointer";
  img.onload = imgOK();
  function imgOK() {
    var temp = 0;
    var stop_x = false;
    var stop_y = false;
    var img_tag_x = img_tag.offsetWidth;
    var img_tag_y = img_tag.offsetHeight;
    var img_x = img.width;
    var img_y = img.height;
    var scroll_x=document.documentElement.clientWidth;
    var scroll_y=window.innerHeight||document.documentElement.clientHeight;
    var yy = 0;
    var xx = 0;
    if(img_y > scroll_y || img_x > scroll_x){
      yy = scroll_y - 100;
      xx = (img_x / img_y) * yy;
    }else{
      xx = img_x + 4;
      yy = img_y + 3;
    }
    img.style.width=xx-4+'px';
    img.style.height=yy-3+'px';
    var maxTime = setInterval(function() {
      temp += 30;
      if((img_tag_x + temp) < xx) {
        img_tag.style.width = (img_tag_x + temp) + "px";
        img_tag.style.left = (scroll_x - img_tag_x - temp)/2 + "px";
      } else {
        stop_x = true;
        img_tag.style.width = xx + "px";
        img_tag.style.left = (scroll_x - xx)/2 + "px";
      }
      if((img_tag_y + temp) < yy) {
        img_tag.style.height = (img_tag_y + temp) + "px";
        img_tag.style.top = (tag_top + (scroll_y - img_tag_y - temp)/2) + "px";
      } else {
        stop_y = true;
        img_tag.style.height = yy + "px";
        img_tag.style.top = (tag_top + (scroll_y - yy)/2) + "px";
      }
      if(stop_x && stop_y) {
        clearInterval(maxTime);
        img_tag.appendChild(img);
        temp = 0;
        imgOpacity(temp);
      }
    }, 1);
    img_tag.innerHTML="";
    img_tag.appendChild(close_tag);
  }
  function closeIndexTag() {
    document.body.removeChild(index_tag);
    document.body.removeChild(img_tag);
  }
  function imgOpacity(temp_imgOpacity) {
    var temp = temp_imgOpacity;
    temp += 10;
    img.style.filter = "alpha(opacity=" + temp + ")";
    img.style.opacity = temp/100;
    var imgTime = setTimeout(function() {imgOpacity(temp);}, 10);
    if(temp > 100)
      clearTimeout(imgTime);
  }
  var bar_show;
  function barDidplay(){
    clearTimeout(bar_show);
    close_tag.style.display = "block";
    bar_show = setTimeout(function() {close_tag.style.display = "none"}, 1000);
  }
}
</script>

html部分:

<a class="add" href="javascript:;" onclick="imageShow('img/hn_bg.jpg')">
<span>图片效果</span>
</a>

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

Javascript 相关文章推荐
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jquery实现全屏滚动
Dec 28 Javascript
js简单倒计时实现代码
Apr 30 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
element中的$confirm的使用
Apr 26 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
理解javascript封装
Feb 23 #Javascript
学习Javascript面向对象编程之封装
Feb 23 #Javascript
javascript每日必学之封装
Feb 23 #Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 #Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 #Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
You might like
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python将ip地址转换成整数的方法
2015/03/17 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
商业计算机应用专业自荐书
2014/06/09 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
跑出一片天观后感
2015/06/08 职场文书
农贸批发市场管理制度
2015/08/07 职场文书