![【HTML代码】在HTML加入图片飘窗的代码[汇总]-HTML代码教程-龙腾飞网络科技 - 企业内部管理系统_CRM客户管理系统_OA办公系统_ERP管理系统_APP系统软件_商城小程序-](http://www.gzlongtengfei.com/skin/images/logo.png){kind=logo}
【HTML代码】在HTML加入图片飘窗的代码[汇总]
时间: 2024-09-14 11:29:10 浏览次数：7
DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法，dede网站二开，以下龙腾飞网络科技-小吴在建站实操中笔记记录，织梦dede建站教程保存使用非常方便：【HTML代码】在HTML加入图片飘窗的代码一、在HTML加入图片飘窗的代码-样式1【漂浮】1）html代码内容：示例<html><head><title>
DEDE织梦cms常用的参数标签汇总、以及操作过程中的一些bug问题解决方法，dede网站二开，以下龙腾飞网络科技-小吴在建站实操中笔记记录，织梦dede建站教程保存使用非常方便：
【HTML代码】在HTML加入图片飘窗的代码
一、在HTML加入图片飘窗的代码-样式1【漂浮】
1）html代码内容：示例
<html>
<head>
<title>【HTML代码】在HTML加入图片飘窗的代码-样式1【漂浮】</title>
</head>
<body>
<!--飘窗-->
<script type="text/javascript" src="以下2）js代码内容：示例/piao/AdMove.js" ></script>
<div id="pc1" >
<div><img src="http://www.gzlongtengfei.com/skin/images/banner11.jpg"></div>
</div>
<script>
var ad1 = new AdMove("pc1", true);
ad1.Run();
var ad2 = new AdMove("pc2", true);
ad2.Run();
var ad3 = new AdMove("pc3", true);
ad3.Run();
</script>
<!--飘窗end-->
</body>
</html>2）js代码内容：示例
<!--//公共脚本文件 main.js
function addEvent(obj, evtType, func, cap) {
cap = cap || false;
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
return true;
} else if (obj.attachEvent) {
if (cap) {
obj.setCapture();
return true;
} else {
return obj.attachEvent("on" + evtType, func);
}
} else {
return false;
}
}
function removeEvent(obj, evtType, func, cap) {
cap = cap || false;
if (obj.removeEventListener) {
obj.removeEventListener(evtType, func, cap);
return true;
} else if (obj.detachEvent) {
if (cap) {
obj.releaseCapture();
return true;
} else {
return obj.detachEvent("on" + evtType, func);
}
} else {
return false;
}
}
function getPageScroll() {
var xScroll, yScroll;
if (self.pageXOffset) {
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollLeft) {
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
xScroll = document.body.scrollLeft;
}
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
}
// 获取页面的高度、宽度
function GetPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
//广告脚本文件 AdMove.js
/*
例子 加<div></div> 是为了判断飘窗内容为空时隐藏飘窗
<div id="Div2">
<div></div>
***** content ******
</div>
</div>
var ad=new AdMove("Div2");
ad.Run();
*/
////////////////////////////////////////////////////////
var AdMoveConfig = new Object();
AdMoveConfig.IsInitialized = false;
AdMoveConfig.AdCount = 0;
AdMoveConfig.ScrollX = 0;
AdMoveConfig.ScrollY = 0;
AdMoveConfig.MoveWidth = 0;
AdMoveConfig.MoveHeight = 0;
AdMoveConfig.Resize = function () {
var winsize = GetPageSize();
AdMoveConfig.MoveWidth = winsize[2];
AdMoveConfig.MoveHeight = winsize[3];
AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll = function () {
var winscroll = getPageScroll();
AdMoveConfig.ScrollX = winscroll[0];
AdMoveConfig.ScrollY = winscroll[1];
}
addEvent(window, "resize", AdMoveConfig.Resize);
addEvent(window, "scroll", AdMoveConfig.Scroll);
function AdMove(id, addCloseButton) {
if (!AdMoveConfig.IsInitialized) {
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized = true;
}
AdMoveConfig.AdCount++;
var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.style.zIndex = "999";
var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
var x = W * Math.random(), y = H * Math.random();
var rad = (Math.random() + 1) * Math.PI / 6;
var kx = Math.sin(rad), ky = Math.cos(rad);
var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
var step = 1;
var interval;
if (addCloseButton) {
var closebtn = document.createElement("span");
closebtn.className='close_btn';
closebtn.innerHTML="关闭窗口";
obj.appendChild(closebtn);
closebtn.onclick = function () {
obj.style.display = "none";
clearInterval(interval);
closebtn.onclick = null;
obj.onmouseover = null;
obj.onmouseout = null;
obj.MoveHandler = null;
AdMoveConfig.AdCount--;
if (AdMoveConfig.AdCount <= 0) {
removeEvent(window, "resize", AdMoveConfig.Resize);
removeEvent(window, "scroll", AdMoveConfig.Scroll);
AdMoveConfig.Resize = null;
AdMoveConfig.Scroll = null;
AdMoveConfig = null;
}
}
/*判断飘窗内容是否为空，为空就隐藏*/
function removeHTMLTag(str) {
//str = str.replace(/</?[^>]*>/g,''); //去除HTML tag
str = str.replace(/[ | ]*
/g,'
'); //去除行尾空白
str = str.replace(/[
]/g,""); //去除多余空行
str=str.replace(/ /ig,'');//去掉
return str;
}
var oDiv=obj.getElementsByTagName('div')[0];
if(removeHTMLTag(oDiv.innerHTML) ==""){
obj.style.display = "none";
}
}
obj.MoveHandler = function () {
obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
rad = (Math.random() + 1) * Math.PI / 6;
W = AdMoveConfig.MoveWidth - obj.offsetWidth;
H = AdMoveConfig.MoveHeight - obj.offsetHeight;
x = x + step * kx * dirx;
if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }
y = y + step * ky * diry;
if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }
if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }
}
this.SetLocation = function (vx, vy) { x = vx; y = vy; }
this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
this.Run = function () {
var delay = 10;
interval = setInterval(obj.MoveHandler, delay);
obj.onmouseover = function () { clearInterval(interval); }
obj.onmouseout = function () { interval = setInterval(obj.MoveHandler, delay); }
}
}
//-->
<!--js结束-->二、在HTML加入图片飘窗的代码-样式2【不关闭，直接票】
1）html代码内容：示例
<html>
<head>
<title>【DEDE建站教程】在HTML加入图片飘窗的代码-样式2【不关闭，直接票】</title>
</head>
<body>
<div id="img" style="position:absolute;z-index=99;">
<img src="http://www.gzlongtengfei.com/skin/images/banner11.jpg" onClick="pause_resume();" border="0" alt='img' onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin-->
var xPos = document.body.clientWidth-20;
var yPos = document.body.clientHeight/2;
var step = 1;
var delay = 5;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
<!--// End -->
</script>
</body>
</html>三、在HTML加入图片飘窗的代码-样式3【飘窗】
1）html代码内容：示例
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="img1" style="z-index: 999; border: 1px solid rgb(204, 204, 204); background-color: white; position: absolute; top: 29px; left: 1230px; font-size: 0;">
<div style="position: relative;">
<a href="javascript:void(0);" onclick="closediv()" title="点击关闭" style="height: 16px; text-decoration: none; color: #fff; ftion: absolute; top:10px; right: 10px;">X</a>
<a href="http://www.gzlongtengfei.com/?这个是图片的链接" target="_blank" class="item">
<img src="http://www.gzlongtengfei.com/skin/images/banner11.jpg" width="450"></a>
</div>
</div>
<script type="text/javascript" src="以下2）js代码内容：示例/js/js.js"></script>
<script type=text/javascript>
var ad1=new AdMove("img1");
ad1.Run();
$('.close').click(function(){
$('#img1').hide();
})
</script>
</body>
</html>2）js代码内容：示例
function addEvent(obj,evtType,func,cap){
cap=cap||false;
if(obj.addEventListener){
obj.addEventListener(evtType,func,cap);
return true;
}else if(obj.attachEvent){
if(cap){
obj.setCapture();
return true;
}else{
return obj.attachEvent("on" + evtType,func);
}
}else{
return false;
}
}
function getPageScroll(){
var xScroll,yScroll;
if (self.pageXOffset) {
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollLeft){
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
xScroll = document.body.scrollLeft;
}
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}
function GetPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
// AdMove.js
/*
<div id="Div2">
***** content ******
</div>
var ad=new AdMove("Div2");
ad.Run();
*/
////////////////////////////////////////////////////////
var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
var winsize=GetPageSize();
AdMoveConfig.MoveWidth=winsize[2];
AdMoveConfig.MoveHeight=winsize[3];
AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
var winscroll=getPageScroll();
AdMoveConfig.ScrollX=winscroll[0];
AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
if(!AdMoveConfig.IsInitialized){
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized=true;
}
var obj=document.getElementById(id);
obj.style.position="absolute";
var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
var x = W*Math.random(),y = H*Math.random();
var rad=(Math.random()+1)*Math.PI/6;
var kx=Math.sin(rad),ky=Math.cos(rad);
var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
var step = 1;
var interval;
this.SetLocation=function(vx,vy){x=vx;y=vy;}
this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
obj.CustomMethod=function(){
obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
rad=(Math.random()+1)*Math.PI/6;
W=AdMoveConfig.MoveWidth-obj.offsetWidth;
H=AdMoveConfig.MoveHeight-obj.offsetHeight;
x = x + step*kx*dirx;
if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
y = y + step*ky*diry;
if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
}
this.Run=function(){
var delay = 10;
interval=setInterval(obj.CustomMethod,delay);
obj.onmouseover=function(){clearInterval(interval);}
obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}
}
}四、在HTML加入图片飘窗的代码-样式4【定时关闭代码】
1）html代码内容：示例
<div id=”sponsorAdDiv” style=”visibility:hidden;position:fixed; z-index:999; top:0;” > <table width=”412″ height=”288″><tr><td> <table width=”407″ height=”288″><tr><td> <div style=”height: 280px;background: transparent url(http://www.*****i.net/attachment/images/2/2017/03/UZh59gUkkZJ6jeEKKpzphj6hkbu955.jpg) center no-repeat;background-color:white;background-size: 100% auto;”></div> <center style=”background-color:F0FFF0″>本窗口会在2秒后自动关闭</center> </td></tr></table></td></tr></table></div>
2）js代码内容：示例
<style type=”text/css”>
<!--
#sponsorAdDiv {position:absolute; height:1; width:1; top:0; left:0;}
-->
</style>
<SCRIPT LANGUAGE=”JavaScript1.2″>
adTime=2;
chanceAd=1;
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);
adCount=0;
function initAd(){
if(!ns && !ie && !w3) return;
if(ie) adDiv=eval(‘document.all.sponsorAdDiv.style’);
else if(ns) adDiv=eval(‘document.layers[“sponsorAdDiv”]’);
else if(w3) adDiv=eval(‘document.getElementById(“sponsorAdDiv”).style’);
randAd=Math.ceil(Math.random()*chanceAd);
if (ie||w3)
adDiv.visibility=”visible”;
else
adDiv.visibility =”show”;
if(randAd==1) showAd();
}
function showAd(){
if(adCount<adTime*10){adCount+=1;
if (ie){documentWidth =document.body.offsetWidth/2+document.body.scrollLeft-20;
documentHeight =document.body.offsetHeight/2+document.body.scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
adDiv.left=documentWidth-200;adDiv.top =documentHeight-200;
setTimeout(“showAd()”,100);}else closeAd();
}
function closeAd(){
if (ie||w3)
adDiv.display=”none”;
else
adDiv.visibility =”hide”;
}
onload=initAd;
</script>五、在HTML加入图片飘窗的代码-样式5【居中关闭，点击展示】
1）html代码内容：示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在HTML加入图片飘窗的代码-样式5【居中关闭，点击展示】</title>
<link rel="stylesheet" type="text/css" href="base.css" />
<style type="text/css">
.fixed{
position: fixed;
left: -100%;
right:100%;
top:0;
bottom: 0;
text-align: center;
font-size: 0;
_display:none;/*IE6隐藏，不显示*/
}
.fixed:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.content{
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
text-align: left;
position: relative;
right: -100%;
font-size: 16px;
background-color: #ddd;
color: #06f;
width: 200px;
height: 150px;
}
.openbtn{ _display:none;}
</style>
</head>
<body>
<button onclick="document.getElementById('dialog').style.display = 'block'" class="openbtn" style="position:fixed;left:1%; bottom:70%;">打开窗口</button>
<div class="fixed" id="dialog">
<div class="content">
<button style="position: absolute; right: 0; top: 0;" type="button" onclick="document.getElementById('dialog').style.display = 'none'">关闭</button>
龙腾飞网络科技<br />在HTML加入图片飘窗的代码-样式5【居中关闭，点击展示】
</div>
</div>
</body>
</html>2）html代码内容：转变-示例
<!--【转变】文章间距问题，以上代码中-->
<body>
<button onclick="document.getElementById('dialog').style.display = 'block'" class="openbtn">打开文章</button>
<div class="fixed" id="dialog">
<div class="content">
<button style="position: absolute; right: 0; top:0;" type="button" onclick="document.getElementById('dialog').style.display = 'none'">关闭</button>
<div style="width:200px;line-height:25px;margin-left:10px;margin-top:20px;font-size:12px"><a href="http://www.gzlongtengfei.com/" title="龙腾飞网络科技" >龙腾飞网络科技1</a><br />
<a href="http://www.gzlongtengfei.com/" title="龙腾飞网络科技" >龙腾飞网络科技2</a><br />
<a href="http://www.gzlongtengfei.com/" title="龙腾飞网络科技" >龙腾飞网络科技3</a><br />
<a href="http://www.gzlongtengfei.com/" title="龙腾飞网络科技" >龙腾飞网络科技4</a><br />
</div></div>
</div>
</body>上一篇：没有了！
系统开发专题地图
Copyright©2011 Guangzhou Longtengfei Network Technology Co., Ltd. 广州龙腾飞网络科技有限公司 粤ICP备18029205号 XML地图