网站html漂浮代码大全,网页漂浮窗口代码

news/2024/5/20 15:31:21/文章来源:https://blog.csdn.net/weixin_32147807/article/details/117865441

漂浮窗口代码

var x = 50,y = 60

var xin = true, yin = true

var step = 1

var delay = 10

var obj=document.getElementById("ad")

function floatAD() {

var L=T=0

var R= document.body.clientWidth-obj.offsetWidth

var B = document.body.clientHeight-obj.offsetHeight

obj.style.left = x + document.body.scrollLeft

obj.style.top = y + document.body.scrollTop

x = x + step*(xin?1:-1)

if (x < L) { xin = true; x = L}

if (x > R){ xin = false; x = R}

y = y + step*(yin?1:-1)

if (y < T) { yin = true; y = T }

if (y > B) { yin = false; y = B }

}

var itl= setInterval("floatAD()", delay)

obj.οnmοuseοver=function(){clearInterval(itl)}

obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)}

代码分析:

img01.gif

var x = 50,y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标

var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上

var step = 1 //层移动的步长,值越大移动速度越快

var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快

var obj=document.getElementById("ad") //捕获id为ad的层作为漂浮目标

function floatAD() {

var L=T=0 //层移动范围的左边界(L)和上边界(T)坐标

var R= document.body.clientWidth-obj.offsetWidth //层移动的右边界

var B = document.body.clientHeight-obj.offsetHeight //层移动的下边界

obj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内

obj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围内

x = x + step*(xin?1:-1) //通过判断层的范围决定层在X轴上的运动方向

if (x < L) { xin = true; x = L} //层超出左边界时的处理

if (x > R){ xin = false; x = R} //层超出右边界时的处理

y = y + step*(yin?1:-1) //通过判断层的范围决定层在Y轴上的运动方向

if (y < T) { yin = true; y = T } //层超出上边界时的处理

if (y > B) { yin = false; y = B } //层超出下边界时的处理

}

var itl= setInterval("floatAD()", delay) //每delay秒执行一次floatAD函数

obj.οnmοuseοver=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果

obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果

网页漂浮窗口代码

漂浮窗口代码

var imagepath="images/flot3.gif"

var imagewidth=135 //这两行写图片的大小

var imageheight=100

var speed=2;

var imageclick="index0.htm" //这里写点击图片连接到的地址

var hideafter=0

var isie=0;

if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {

isie=1;

}

else {

isie=0;

}

if(isie){

var preloadit=new Image()

preloadit.src=imagepath

}

function pop() {

if(isie) {

x=x+dx;y=y+dy;

oPopup.show(x, y, imagewidth, imageheight);

if(x+imagewidth+5>screen.width) dx=-dx;

if(y+imageheight+5>screen.height) dy=-dy;

if(x<0) dx=-dx;

if(y<0) dy=-dy;

startani=setTimeout("pop();",50);

}

}

function dismisspopup(){

clearTimeout(startani)

oPopup.hide()

}

function dowhat(){

if (imageclick=="dismiss")

dismisspopup()

else

window.open(imageclick);

}

if(isie) {

var x=0,y=0,dx=speed,dy=speed;

var oPopup = window.createPopup();

var oPopupBody = oPopup.document.body;

oPopupBody.style.cursor="hand"

oPopupBody.innerHTML = ''+preloadit.src+'';

oPopup.document.body.οnmοuseοver=new Function("clearTimeout(startani)")

oPopup.document.body.οnmοuseοut=pop

oPopup.document.body.οnclick=dowhat

pop();

if (hideafter>0)

setTimeout("dismisspopup()",hideafter*1000)

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_701228.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php禁止指定ip访问网站,方法分享:如何利用.htaccess禁止某个IP访问网站

这篇文章主要给大家介绍了关于利用.htaccess实现禁止某个IP访问网站的方法&#xff0c;通过设置禁止某个IP段的访问&#xff0c;增加该虚拟主机的安全性&#xff0c;文中通过图文及示例代码介绍的非常详细&#xff0c;需要的朋友们可以参考借鉴&#xff0c;下面来一起看看吧。前…

mysql在建站起什么作用_数据库操作对比:Sql Server与MYSQL相比有哪些建站优势?...

最近一直在做博客网站&#xff0c;从定位主题到程序和数据库的选择&#xff0c;确实废了不少心思&#xff0c;经过细致的思考&#xff0c;最终将主题定位为读书方面&#xff0c;还有文学和学习笔记&#xff0c;但是对于程序和数据库问题&#xff0c;我一直就比较费心&#xff0…

把学校的网站搞了!

来自&#xff1a;知乎&#xff0c;作者&#xff1a;Ret2Rttr 链接&#xff1a;https://www.zhihu.com/people/bai-gei-a 今天这篇文章来源于知乎上一个叫R1et2Rttr的分享&#xff0c;作者自称是一名六年级的小学生。文章主要记录的是他针对自己学校网站的一次渗透测试&#xff…

程序员常用的这十个电子书下载网站,你值得拥有

不管学习什么编程语言&#xff0c;最主要的还是要多看&#xff0c;多记&#xff0c;多动手&#xff0c;去找一些自己感兴趣的脚本&#xff0c;代码去练习&#xff0c;练的越多&#xff0c;对于一些英语单词&#xff0c;特殊符号要比死记硬背要容易些。 以下这些网站&#xff0…

千人网站服务器,千人云服务器

千人云服务器 内容精选换一换切换操作系统是为您的云服务器重新切换一个系统盘。切换完成后云服务器的系统盘ID会发生改变&#xff0c;并删除原有系统盘。如果云服务器当前使用的操作系统不能满足业务需求(如软件要求的操作系统版本较高)&#xff0c;您可以选择切换云服务器的操…

网站木马检测_网站建立检测劫持,网站建立检测劫持如何操作,详细步骤

网站劫持是指当用户打开一个网址的时候&#xff0c;出现一个不归属于网站范畴内的一个广告页面&#xff0c;或者是直接就跳转到某一个不不是这个网站所属的一个网站的分页面。IIS7站长之家网站监控提供&#xff1a;专业的网站&#xff0c;我们可以做到实时检测网站是否打得开、…

PHP网站工作流程图,在网站绘制工作流程图的教程分享(打工人必看)

原标题&#xff1a;在网站绘制工作流程图的教程分享(打工人必看)每一行、每一业都不是那么简单就能做顺手的&#xff0c;特别是要面对各种人际琐事的人事职员&#xff0c;要是不会一两招实用的办公技巧的话&#xff0c;可能很快便会被淘汰了。其中&#xff0c;学会绘制工作流程…

php网站服务器工具,PHP服务器搭建网站常用工具有哪些?

我们知道目前论坛类网站主要通过PHP技术搭建起来&#xff0c;其使用的服务器以2H4G配置为主。刚开始在架设论坛网站的时候&#xff0c;网站插件一般通过服务器上传&#xff0c;我们不可能想试一个插件就把文件通过FTP来上传&#xff0c;然后去自己的网站里试&#xff0c;那样风…

如何测服务器网站带宽,windows服务器如何测试带宽速度?

[摘要] 关于服务器带宽的问题&#xff0c;总有客户问给个ip来ping下看看快不快~~&#xff0c;ping真的能测试出快不快吗&#xff1f;但是我认为&#xff0c;Ping是Windows系列自带的一个可执行命令。对于站长来说&#xff0c;利用它可以检查服务器网络...关于服务器带宽的问题&…

宝塔php memory_limit,优化宝塔面板提高网站运行速度教程

当我们安装完成BT(宝塔面板)建好网站之后&#xff0c;然后需要给面板和服务器做一些简单的设置&#xff0c;比如说php优化、myql优化、开启php缓存、网站流量限制等等来提高服务器的性能&#xff0c;当然对于你用了BT(宝塔面板)来说&#xff0c;这些步骤都很简单&#xff0c;我…

c2c网站开店的流程图_shopee开店入驻?Shopee选品为什么这么重要

(shopee)虾皮刚诞生的时候我就做了&#xff0c;在电商这个行业也有自己的一些经验。经验也许没有其他大卖家丰富&#xff0c;但会将我知道的都进行分享。如果有不懂(shopee)虾皮问题可以我(V&#xff1a;772024802)。我这里给大家安排一堂直播课&#xff0c;可以系统的帮你解决…

php v9 ajax 翻页,phpcms v9建站 ajax列表分页加载更多word文档教程

最新文章https: open weixin qq com 有这个的账号&#xff0c;给客户开通微信小程序不需要认证费直...https: open weixin qq com 有这个的账号&#xff0c;给客户开通微信小程序不需要认证费直...相关内容phpcms调用随机栏目 随机调用SQL语句&#xff0c;可以使用PHPCMS的get标…

live2d模型_使用二次元模型动画人物让自己网站“骚起来”

预览直接使用&#xff0c;不想将模型或者js文件放到自己的CDN&#xff0c;则直接按照下面的步骤下面的地址是我自己的github地址仓库&#xff0c;文件一般不会删除&#xff0c;直接引入链接即可node项目安装需要的jsnpm install -S live2d-widget在需要的页面引入(jsonPath就是…

java 班级号_Java 学校班级回忆录网站管理系统

项目形容项目为B/S结构开发,分为【登陆】、【信息】、【活动】、【其余】四大板块&#xff0c;其中信【信息】板块分为【个人信息】与【班级通讯录】板块&#xff0c;【活动】板块分为【班级相册】、【班级声明】板块&#xff0c;【其余】板块分为【修改密码】与【退出、注销】…

服务器空闲搭建什么网站,空闲的云服务器可以干什么

空闲的云服务器可以干什么 内容精选换一换默认情况下&#xff0c;对一个新的服务器第一次进行全量备份&#xff0c;后续进行永久增量备份。第一次全量备份&#xff0c;备份磁盘的已分配空间。例如一个100GB的磁盘&#xff0c;已经分配空间40GB数据&#xff0c;则备份存储空间占…

php企业网站源码安装教程,PHPSCUP企业建站系统v1.4 安装图文教程

PHPSCUP程序简介(简洁易用权限功能非常强大的轻量级cms系统)PSCUP是一套追求简洁易用很务实的系统&#xff01;PHPSCUP能满足大多数的初级企业网站用户。系统内置企业简介模块、新闻模块、产品模块、人才模块、在线留言模块、单篇文章模块、友情链接模块、单篇文章模块、图片轮…

网站服务器 蜜罐,linux web服务器蜜罐系统

linux web服务器蜜罐系统 内容精选换一换简要介绍lynx命令是纯文本模式的网页浏览器。语言&#xff1a;C一句话描述&#xff1a;纯文本模式的网页浏览器建议的版本建议使用版本为lynx-2.8.8rel.2。云服务器要求本文以云服务器KC1实例测试&#xff0c;云服务器配置如表1所示。操…

ASP .NET Core MVC Entity Framework 旧书交易网站

代码在GitHub仓库&#xff1a;zhang0peter/Old-Book-Shop-System: Old Book Shop System ASP .Net Core MVC MySQL e-commerce 我使用的是VS 2019&#xff0c; .NET Core的版本是2.2&#xff0c;数据库是mariadb&#xff0c;MySQL也可以。 数据库模型是Entity Framework的Code…

微生物培养的福音:一个直接用16S rDNA序列来预测其培养基配方的网站

【本文转载自“微生物生态”公众号&#xff0c;作者卢瑟菌&#xff0c;己获授权&#xff0c;本平台编辑对内容进行测试和更新。】 今天卢瑟菌给大家隆重推出一个超级好的网站&#xff0c;网站名字叫KOMODO(Known Media Database)&#xff0c;没错&#xff0c;网站作者就是严(t…

微生物培养的福音:一个直接用16S rDNA序列来预测其培养基配方的网站!!!...

本文转载自“微生物生态”&#xff0c;己获授权&#xff0c;本平台编辑对内容进行测试和更新。今天卢瑟菌给大家隆重推出一个超级好的网站&#xff0c;网站名字叫KOMODO(Known Media Database)&#xff0c;没错&#xff0c;网站作者就是严(tiao)肃(pi)地把科莫多巨蜥的照片放在…