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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
德劲1103的维修打理经验
2021/03/02 无线电
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
Javascript 二维数组
2009/11/26 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
requireJS使用指南
2016/04/27 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python3读写ini配置文件的示例
2020/11/06 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
安全责任书模板
2014/07/22 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
基层党建工作简报
2015/07/21 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python