javascript ImgBox透明遮罩层背景图片展示
发布时间：2024-02-27 04:51:07
标签：javascript,ImgBox,透明遮罩层
<html> <head> <title>JavaScript Data Access Test</title> <script type="text/javascript"> function topDiv(el){ var elem=document.createElement("div"); elem.className="top-div"; //=========create img tag var img=document.createElement("img"); img.src=el.href; elem.appendChild(img); //=========create close DIV var closeDiv=document.createElement("div"); closeDiv.innerHTML="Close"; closeDiv.onclick=function(){ document.body.removeChild(elem); document.body.removeChild(alpha); } closeDiv.style.position="absolute"; closeDiv.style.right="2px"; closeDiv.style.top="2px"; closeDiv.style.fontSize="12px"; closeDiv.style.color="red"; closeDiv.style.border="1px solid #333"; closeDiv.style.backgroundColor="#eee"; closeDiv.style.cursor="hand"; elem.appendChild(closeDiv); //=========append the top DIV to body document.body.appendChild(elem); var alpha = alphaDiv(elem); } function alphaDiv(el){ var elem=document.createElement("div"); elem.className="alphaDiv"; elem.onclick=function(e){ document.body.removeChild(elem); document.body.removeChild(el); } document.body.appendChild(elem); return elem; } onload=function(){ var links=document.getElementsByTagName("a"); for(var i=0,len=links.length;i<len;i++){ if(links[i].rel=="Imgbox"){ links[i].onclick=function(){ topDiv(this); return false; } } } } </script> <style> .alphaDiv{ z-index:100; width:100％; height:100％; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha(opacity=50); } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; } </style> </head> <body class="body"> <p>Click here to show the pic one.<br> Click here to show the pic two.<br>Click me </p> </body> </html>
注意上面的图片地址，大家自己
0
投稿猜你喜欢
- 本文实例解析Python SqlAlchemy的使用方法，分享给大家供大家参考，具体内容如下1.初始化连接from sqlalchemy i
顺序表即线性表的顺序存储结构。它是通过一组地址连续的存储单元对线性表中的数据进行存储的，相邻的两个元素在物理位置上也是相邻的。比- <％@ Page Language="VB" ％> <!DOCTYPE html PUBLIC &qu
- 1. 将图片存入数据库关于数据库基本操作的学习，请参见这一篇文章：https://www.jb51.net/article/167141.h
- 一、catplot函数catplot() 函数是 Seaborn 中一个非常有用的函数，它可以绘制分类变量的图形，并可以根据另一个或多个变量
- 我在程序中加入了分数显示，三种特殊食物，将贪吃蛇的游戏逻辑写到了SnakeGame的类中，而不是在Snake类中。特殊食物:1.绿色：普通，
- 1.准备工作：工欲善其事必先利其器，因此我们有必要在进行Coding前先配置一个适合我们自己的开发环境，我搭建的开发环境是：操作系统：Ubu
- 前言本文主要给大家介绍了Go语言中函数new与make的使用和区别，关于Go语言中new和make是内建的两个函数，主要用来创建分配类型内存
- sql调优的几种方式：避免使用select *、用union all 代替union、小表驱动大表、批量操作、多用limit、in中值太多、
- 在cmd输入：python -m django --version来源：https://blog.csdn.net/ShellDawn/ar
- 使用threading.Event可以实现线程间相互通信，之前的Python：使用threading模块实现多线程编程七[使用Conditi
- GitLab是一款使用MIT许可证的基于网络的Git仓库管理工具，我们可以使用它来搭建自己的Git仓库，本文将介绍如何使用Gitlab在Li
- 什么是Densenet据说Densenet比Resnet还要厉害，我决定好好学一下。ResNet模型的出现使得深度学习神经网络可以变得更深，
- 文件内容：excel内容：代码：import xlrdimport jsonimport operatordef read_xlsx(fil
- 把中文字符转换回Unicode字符。见下列代码：<％function unicode(str)dim i,j,c,
- 本文实例为大家分享了Python OpenCV实现视频分帧的具体代码，供大家参考，具体内容如下# coding=utf-8import os
- jupyter中显示的DataFrame过长时会自动换行（print()显示方式）或自动省略（单元格最后一行直接显示），在一些情况下看上去不
- 英文文档：class type(object)class type(name, bases, dict)With one argument,
- 在之前的博客 人脸识别经典算法一：特征脸方法（Eigenface）里面介绍了特征脸方法的原理，但是并没有对它用到的理论基础PCA做介绍，现在
- 本文实例讲述了Python包，__init__.py功能与用法。分享给大家供大家参考，具体如下：包：为了组织好模块，将多个模块组合为一个包，
