超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
 7     <style type="text/css">
 8         body{height: 10000px;width: 5000px;}
 9         #floatdivids{
10             width: 200px;
11             height: 200px;
12             position: absolute;
13             top: 0;
14             left: 0;
15             background-color: #ff8015;
16             z-index: 1000;
17             border: 1px solid #ccc;
18         }
19     </style>
20     <script type="text/javascript">
21         var isinter;
22         var millisec = 25;//定时器间隔执行时间/毫秒
23         var xflo = 0; //漂浮层x坐标
24         var yflo = 0; //漂浮层y坐标
25         var yistop = false;
26         var xisleft = true;
27         function floatadfun(){
28             kwidth = $(window).width();//可视区域宽度
29             kheight = $(window).height();//可视区域高度
30
31             divwidth = $(‘#floatdivids‘).width();//div漂浮层宽度
32             divheight = $(‘#floatdivids‘).height();//div漂浮层高度
33
34             hstop = jQuery(window).scrollTop();//滚动条距离顶部的高度
35             wsleft = jQuery(window).scrollLeft();//滚动条距离最左边的距离
36
37             offwidth = (kwidth-divwidth);//div偏移的宽度
38             offheight = (kheight-divheight);//div偏移的高度
39
40             if (!yistop) {
41                 yflo++;
42                 if (yflo >= offheight) {
43                     yistop = true;
44                 }
45             } else {
46                 yflo--;
47                 if (yflo <= 0) {
48                     yistop = false;
49                 }
50             }
51
52             if (xisleft) {
53                 xflo++;
54                 if (xflo >= offwidth) {
55                     xisleft = false;
56                 }
57             } else {
58                 xflo--;
59                 if (xflo <= 0) {
60                     xisleft = true;
61                 }
62             }
63
64             $(‘#floatdivids‘).css({‘top‘:yflo+hstop,‘left‘:xflo+wsleft}); /* 如果使用固定定位,请把加上滚动条的距离去掉即可 */
65         }
66
67         $(function () {
68             isinter = setInterval("floatadfun()",millisec);
69             $(‘#floatdivids‘).mouseover(function () {
70                 clearInterval(isinter);
71             }).mouseout(function () {
72                 isinter = setInterval("floatadfun()",millisec);
73             });
74             $(‘#ClickRemoveFlo‘).click(function () {
75                 $(this).parents("#floatdivids").slideUp(500,function(){
76                     clearInterval(isinter);
77                     $(this).remove();
78                 });
79             });
80         });
81     </script>
82 </head>
83 <body>
84 <div id="floatdivids">
85     <span id="ClickRemoveFlo" style="position: absolute;top: 0;right: 0;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 0 5px;cursor: pointer;">X</span>
86     小鹿乱撞!!<br>弹弹弹!
87 </div>
88 </body>
89 </html>
90  
91 ————————————————93 原文链接:https://blog.csdn.net/weixin_42350070/article/details/82111429

原文地址:https://www.cnblogs.com/1301694f/p/12580411.html

时间: 2024-10-10 12:19:16

超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层的相关文章

把C#程序(含多个Dll)合并成一个Exe的超简单方法

原文:把C#程序(含多个Dll)合并成一个Exe的超简单方法 开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. 但是,很多时候我们本想开发一款只需要一个exe就能完美运行的小工具.那该怎么办呢? 下文介绍一种超简单的方法,不用写一行代码就可轻松实现. 这里我们需要用到一款名为Costura.Fody的工具.Costura.Fody是一个Fody框架下的插件,可通过Nuget安装到VS工程中.安装之后,就可以将项目所依赖的DLL(甚至PDB)文件

Jquery漂浮广告、客服代码

<!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-

解决广告导致网页加载变慢的问题

做一些联盟广告时,由于联盟广告的加载慢,整体页面的显示速度也会变慢,如果加入下面的代码就可以有效地解决这个问题.以下代码同时兼容IE和FireFox浏览器. 第一步:把这段代码放在你要放广告的网页位置: <div id="myads">广告载入中...</div> 第二步:把这段代码放到页底: <div id="span_myads"> 这里放广告的JS代码或其他加载速度比较慢的内容都可以. </div> <sc

一行js弹窗代码就能设计漂亮的弹窗广告

接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: document.writeln("<div id=\"leftDiv1\" ><a href='http://www.xiameneye.org.cn/special/zhengji/' target=_blank><img src='/templ

超简单的php上传类代码

这个是我昨晚写的一个超简单的上传类,只要 $up->upload($_FILES['imgfile']); 即可. 一条语句搞定上传 石家庄工商代办送给所有草根的个人站长 上传文件: up.php <?php //验证 if(empty($_COOKIE['login'])) { die('index'); } //加载类 include_once("_inc/class_uppic.php"); //上传 if(!empty($_GET['action']) &&

可自定义片头的腾讯视频无广告可全屏调用代码

腾讯视频站蓝叶颇为喜欢,主要是被腾讯视频播放器给迷上了,那色调看着舒服,所以蓝叶经常性到腾讯调用视频:前些天蓝叶分享了一篇腾讯视频最新去广告调用代码的文章,今天蓝叶再分享个代码,通过此代码可以设置调用腾讯视频播放前的片头广告,可以隐藏腾讯的加载LOGO图,此代码用的播放器还是腾讯以前live.qq.com没改版前的播放器,虽老但目前还能正常调用腾讯视频,如果此代码对你有用,那就请复制到你所需要的地方吧,转载请注明出处. <embed src="http://mat1.qq.com/news

如何让手机访问电脑本地服务器的网页---超简单

超简单超实用 移动开发的前端来说,使用各种真机来进行自己网站进行查看是必要的.因此,会经常通过电脑开启一个 wifi 来供手机进行连接,形成一个小的局域网,然后就通过局域网的 ip 地址(查询 ip 地址,cmd——>ipconfig), 通过 ip 地址来进行自己本地服务器中的项目访问.这种方法十分的简单,下面我为大家一一介绍. 第一步:查看自己的电脑有没有安装IIS,随便打开一个浏览器,在网址那里输入localhost然后回车,如果出现如下图所示的页面说明电脑安装好了IIS,如果不是的话自己

打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从server获取大量数据来展示在手机上面的,也就是说:必须联网,才干正常工作,于是想了一下,反正都要联网获取数据,为什么不直接用我相对熟悉一点的 html来做这个运用呢?省的花费不够用的时间去学习android界面的控制,于是就简单了:用蹩脚的手段做了一个android程序的启动欢迎界面,内页就是一个全屏的

超简单的java爬虫

最简单的爬虫,不需要设定代理服务器,不需要设定cookie,不需要http连接池,使用httpget方法,只是为了获取html代码... 好吧,满足这个要求的爬虫应该是最基本的爬虫了.当然这也是做复杂的爬虫的基础. 使用的是httpclient4的相关API.不要跟我讲网上好多都是httpclient3的代码该怎么兼容的问题,它们差不太多,但是我们应该选择新的能用的接口! 当然,还是有很多细节可以去关注一下,比如编码问题(我一般都是强制用UTF-8的) 放码过来: 1 package chris