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 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JScript的条件编译
2007/05/29 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
python获取本机外网ip的方法
2015/04/15 Python
python避免死锁方法实例分析
2015/06/04 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python的unittest测试类代码实例
2017/12/07 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python使用matplotlib绘制热图
2018/11/07 Python
python模糊图片过滤的方法
2018/12/14 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
学期评语大全
2014/04/30 职场文书
安全口号大全
2014/06/21 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
党校党性分析材料
2014/12/19 职场文书
捐资助学感谢信
2015/01/21 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
基于Redission的分布式锁实战
2022/08/14 Redis