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对象所有属性和方法的函数
Oct 16 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
vue的webcamjs集成方式
Nov 16 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安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
详解Python IO口多路复用
2020/06/17 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
小学生打架检讨书
2014/01/26 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
解除劳动合同证明书
2014/09/26 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
详解JVM系列之内存模型
2021/06/10 Javascript
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android