当前位置:首页 > 代码 > 正文

网页漂浮视频窗口代码(浏览器视频悬浮窗怎么弄)

admin 发布:2022-12-19 19:36 158


今天给各位分享网页漂浮视频窗口代码的知识,其中也会对浏览器视频悬浮窗怎么弄进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

网页中如何加入悬浮窗口?能一直悬浮在浏览器某个地方的。

1、首先创建一个名为“topwindows.html”的网页文件,其中的内容将被展示主页浮动窗口中。

2、网页浮动窗口对应的部分代码如下所示:

html

style

.img_wd{

font-size:30;padding-top:20px;

text-align:left;padding-left:70px;line-height:40px;

background:url(110.jpg) top center no-repeat;

width:252px;height:127px;line-heiht:10px;

text-align:center;

font-family:"微软雅黑,仿宋,楷体,黑体"

color: #fafafa;

text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;

}

/style

body

div class="img_wd" style=""

青春就是这么任性!Br

Younger GOOD

/div

/body

/html

3、接着将如图所示的代码添加到主页Body和/Body之间:

其中标签"fdck”中的属性SRC指向浮动窗口的网页地址。

div id="img" style="position: absolute;visibility :hidden;padding:0px;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle"

span style="CURSOR:hand;color:red;font-weight:bold;font-align:center;font-size:12px;padding-left:0px;" onclick="clearInterval(interval);fdck.style.visibility = 'hidden';img.style.visibility = 'hidden';"隐藏/span

div id="fdck" style="width:100%; height:100%; font-align:center; visibility:visible;border:0px; background-color: no"

iframe width=320 height=150 src="topWindows.html" frameborder=no scrolling="no"

/iframe

/div

/div

4、接下来需要添加浮动窗口随时运行的行为,对应代码如下:

script language=javascript

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

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.style.visibility = "visible";

interval = setInterval('changePos()', delay);}

start();

/script

5、在此需要说明一点,需要将以上所有代码(包括JS脚本)全部放置在body和/body之间。

6、最后查看一下浮动窗口的效果,会发现浮动窗口在网页中不断的移动,当鼠标悬停其上时会停止移动,点击“隐藏”按钮将自动隐藏悬浮窗口。

JS网页中的浮动窗口代码?

script

function scrolls(){

var advobj=document.getElementById("adv");

advobj.style.top=100+document.documentElement.scrollTop+"px";

}

window.onscroll=scrolls;

function winclose(){

var advobj=document.getElementById("adv");

advobj.style.display="none";

}

/script

body

!--随滚动条移动的浮动窗口############################--

div id="adv" style=""

img src="图片路径"/

div id="close" onclick="winclose()"关闭/div

/div

div id="header"iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"/iframe/div

/body

网页中,漂浮窗口置于顶层的代码是什么

悬浮窗口设置z-index:100外(100这个值是相对的,具体根据情况设置),更重要的是flash和视频的设置,你需要调整的不是悬浮窗,而是falsh和视频的加载方式,因为他们的优先级太高。

尝试下在加载flash和视频中加入下面代码

param name="wmode" value="opaque" /

网站中视频悬浮代码是什么

在你的网站主目录建立JS文件,再建立一个JS文件(如ad-01.js)

打开文本将下面代码复制到其中,保存格式为js

function initEcAd() {

document.all.AdLayer1.style.posTop = -200;

document.all.AdLayer1.style.visibility = 'visible'

document.all.AdLayer2.style.posTop = -200;

document.all.AdLayer2.style.visibility = 'visible'

MoveLeftLayer('AdLayer1');

MoveRightLayer('AdLayer2');

}

function MoveLeftLayer(layerName) {

var x = 5;

var y = 100;// 左侧广告距离页首高度

var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;

var y = document.body.scrollTop + y - diff;

eval("document.all." + layerName + ".style.posTop = parseInt(y)");

eval("document.all." + layerName + ".style.posLeft = x");

setTimeout("MoveLeftLayer('AdLayer1');", 20);

}

function MoveRightLayer(layerName) {

var x = 5;

var y = 100;// 右侧广告距离页首高度

var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;

var y = document.body.scrollTop + y - diff;

eval("document.all." + layerName + ".style.posTop = y");

eval("document.all." + layerName + ".style.posRight = x");

setTimeout("MoveRightLayer('AdLayer2');", 20);

}

document.write("div id=AdLayer1 style='position: absolute;visibility:hidden;z-index:1'a href='http://你链接的网址' target='_blank'img src=你链接的图片 border='0'/a/div"

+"div id=AdLayer2 style='position: absolute;visibility:hidden;z-index:1'a href='http://你链接的网址' target='_blank'img src=你链接的图片 border='0'/a/div");

initEcAd()

// JavaScript Document

还没结束呢,,然后将 script src="js/ad-01.js" language="JavaScript"/script放在body中。就OK

把img src=你链接的图片 border='0'改为视频代码

网页设计求悬浮窗代码

{

width:100px;

height:130px;

background:red;

position:absolute;

right:0;

bottom:0;

}

中的position属性值改为fixed。搞定

求HTML网站中的漂浮窗口代码````

div id="img" style="position:absolute; left:35px; top:556px; width:120; height:172"

a href="/"qyml7.htm" img border="0" src="/"lo1.gif" width="140" height="120"/a/p

/div

SCRIPT LANGUAGE="JavaScript"

!-- Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

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);

}

start();

// End --

/script

关于网页漂浮视频窗口代码和浏览器视频悬浮窗怎么弄的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;

本文地址:http://ahzz.com.cn/post/20835.html


取消回复欢迎 发表评论:

分享到

温馨提示

下载成功了么?或者链接失效了?

联系我们反馈

立即下载