js控制网站中图片漂浮

最新推荐文章于 2021-03-11 18:14:43 发布
最新推荐文章于 2021-03-11 18:14:43 发布
阅读量695 收藏
点赞数
分类专栏： js 文章标签： js javascript function


、
  1. <html >  
  2. <head>  
  3.     <title>图片漂浮功能</title>  
  4. <script type="text/javascript">  
  5.     function addEvent(obj, evtType, func, cap) {  
  6.         cap = cap || false;  
  7.         if (obj.addEventListener) {  
  8.             obj.addEventListener(evtType, func, cap);  
  9.             return true;  
  10.         } else if (obj.attachEvent) {  
  11.             if (cap) {  
  12.                 obj.setCapture();  
  13.                 return true;  
  14.             } else {  
  15.                 return obj.attachEvent("on" + evtType, func);  
  16.             }  
  17.         } else {  
  18.             return false;  
  19.         }  
  20.     }  
  21.     function getPageScroll() {  
  22.         var xScroll, yScroll;  
  23.         if (self.pageXOffset) {  
  24.             xScroll = self.pageXOffset;  
  25.         } else if (document.documentElement && document.documentElement.scrollLeft) {  
  26.             xScroll = document.documentElement.scrollLeft;  
  27.         } else if (document.body) {  
  28.             xScroll = document.body.scrollLeft;  
  29.         }  
  30.         if (self.pageYOffset) {  
  31.             yScroll = self.pageYOffset;  
  32.         } else if (document.documentElement && document.documentElement.scrollTop) {  
  33.             yScroll = document.documentElement.scrollTop;  
  34.         } else if (document.body) {  
  35.             yScroll = document.body.scrollTop;  
  36.         }  
  37.         arrayPageScroll = new Array(xScroll, yScroll);  
  38.         return arrayPageScroll;  
  39.     }  
  40.     function GetPageSize() {  
  41.         var xScroll, yScroll;  
  42.         if (window.innerHeight && window.scrollMaxY) {  
  43.             xScroll = document.body.scrollWidth;  
  44.             yScroll = window.innerHeight + window.scrollMaxY;  
  45.         } else if (document.body.scrollHeight > document.body.offsetHeight) {  
  46.             xScroll = document.body.scrollWidth;  
  47.             yScroll = document.body.scrollHeight;  
  48.         } else {  
  49.             xScroll = document.body.offsetWidth;  
  50.             yScroll = document.body.offsetHeight;  
  51.         }  
  52.         var windowWidth, windowHeight;  
  53.         if (self.innerHeight) {  
  54.             windowWidth = self.innerWidth;  
  55.             windowHeight = self.innerHeight;  
  56.         } else if (document.documentElement && document.documentElement.clientHeight) {  
  57.             windowWidth = document.documentElement.clientWidth;  
  58.             windowHeight = document.documentElement.clientHeight;  
  59.         } else if (document.body) {  
  60.             windowWidth = document.body.clientWidth;  
  61.             windowHeight = document.body.clientHeight;  
  62.         }  
  63.         if (yScroll < windowHeight) {  
  64.             pageHeight = windowHeight;  
  65.         } else {  
  66.             pageHeight = yScroll;  
  67.         }  
  68.         if (xScroll < windowWidth) {  
  69.             pageWidth = windowWidth;  
  70.         } else {  
  71.             pageWidth = xScroll;  
  72.         }  
  73.         arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)  
  74.         return arrayPageSize;  
  75.     }  
  76.   
  77.   
  78.     var AdMoveConfig = new Object();  
  79.     AdMoveConfig.IsInitialized = false;  
  80.     AdMoveConfig.ScrollX = 0;  
  81.     AdMoveConfig.ScrollY = 0;  
  82.     AdMoveConfig.MoveWidth = 0;  
  83.     AdMoveConfig.MoveHeight = 0;  
  84.     AdMoveConfig.Resize = function () {  
  85.         var winsize = GetPageSize();  
  86.         AdMoveConfig.MoveWidth = winsize[2];  
  87.         AdMoveConfig.MoveHeight = winsize[3];  
  88.         AdMoveConfig.Scroll();  
  89.     }  
  90.     AdMoveConfig.Scroll = function () {  
  91.         var winscroll = getPageScroll();  
  92.         AdMoveConfig.ScrollX = winscroll[0];  
  93.         AdMoveConfig.ScrollY = winscroll[1];  
  94.     }  
  95.     addEvent(window, "resize", AdMoveConfig.Resize);  
  96.     addEvent(window, "scroll", AdMoveConfig.Scroll);  
  97.     function AdMove(id) {  
  98.         if (!AdMoveConfig.IsInitialized) {  
  99.             AdMoveConfig.Resize();  
  100.             AdMoveConfig.IsInitialized = true;  
  101.         }  
  102.         var obj = document.getElementById(id);  
  103.         obj.style.position = "absolute";  
  104.         var W = AdMoveConfig.MoveWidth - obj.offsetWidth;  
  105.         var H = AdMoveConfig.MoveHeight - obj.offsetHeight;  
  106.         var x = W * Math.random(), y = H * Math.random();  
  107.         var rad = (Math.random() + 1) * Math.PI / 6;  
  108.         var kx = Math.sin(rad), ky = Math.cos(rad);  
  109.         var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);  
  110.         var step = 1;  
  111.         var interval;  
  112.         this.SetLocation = function (vx, vy) { x = vx; y = vy; }  
  113.         this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }  
  114.         obj.CustomMethod = function () {  
  115.             obj.style.left = (x + AdMoveConfig.ScrollX) + "px";  
  116.             obj.style.top = (y + AdMoveConfig.ScrollY) + "px";  
  117.             rad = (Math.random() + 1) * Math.PI / 6;  
  118.             W = AdMoveConfig.MoveWidth - obj.offsetWidth;  
  119.             H = AdMoveConfig.MoveHeight - obj.offsetHeight;  
  120.             x = x + step * kx * dirx;  
  121.             if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }  
  122.             if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }  
  123.             y = y + step * ky * diry;  
  124.             if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }  
  125.             if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }  
  126.         }  
  127.         this.Run = function () {  
  128.             var delay = 20;  
  129.             interval = setInterval(obj.CustomMethod, delay);  
  130.             obj.onmouseover = function () { clearInterval(interval); }  
  131.             obj.onmouseout = function () { interval = setInterval(obj.CustomMethod, delay); }  
  132.         }  
  133.     }  
  134.     </script>  
  135.     <div id="ad1" style="z-index: 5;border:1; border-style:dotted;">  
  136.         <!--首页漂浮：开始-->  
  137.         <a id="divclose"  οnclick="setUnVisible();" style=" position:absolute;left:5px;top:5px; cursor:pointer;" title="关闭">[ 关闭 ]</a>  
  138.         <img id="adImg" src="http://www.baidu.com/img/bdlogo.gif" alt="" οnlοad="return imgzoom(this,600);"  
  139.             style="cursor: pointer;" />  
  140.         <!--首页漂浮：结束-->  
  141.     </div>  
  142.   
  143.   
  144.     <script type="text/javascript"><!--  
  145.         var ad1 = new AdMove("ad1");  
  146.         ad1.Run();  
  147.         //可兼容多组漂浮  
  148.         //var ad1=new AdMove("ad2");  
  149.         //ad2.Run();  
  150.         //-->  
  151.         function setUnVisible() {  
  152.             document.getElementById("ad1").style.display = "none";  
  153.         }  
  154.     </script>  
  155. </head>  
  156. <body>  
  157. </body>  
  158. </html>  

悠然漫步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片在网页上漂浮的代码
01-20
图片在网页上漂浮的代码,适用于IE版浏览器。
同时漂浮多个图片广告的JS特效
12-31
可以同时浮动多个图片，随机生成漂浮位置，每刷新一次页面，图片位置是不一样的，很实用的JS广告代码。
点击图片弹出浮层
05-18
类似QQ空间相册一样,点击图片,弹出浮层,显示放大图片,左右可切换图片
多种弹出漂浮层JS网页特效
11-10
多种弹出漂浮层JS网页特效
XYCMS生物科技企业网站源码 v3.7.rar
07-05
生成JS调用，增加了对联广告管理和漂浮广告，可以控制是否显示（关闭），功能非常强大 其他信息管理：查看管理员登录记录，可以进行修改操作 XYCMS生物科技企业网站源码系统信息管理 系统设置：进行系统相关基本...
幼儿园建站系统 幼儿园网站源码
10-12
生成JS调用，增加了对联广告管理和漂浮广告，可以控制是否显示（关闭），功能非常强大 其他信息管理：查看管理员登录记录，可以进行修改操作 系统信息管理 系统设置：进行系统相关基本信息设置，如网站名称，企业...
程序天下:JavaScript实例自学手册
07-08
15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...
XYCMS健身会所网站模板 v1.1
10-17
生成JS调用，增加了对联广告管理和漂浮广告，可以控制是否显示（关闭），功能非常强大 其他信息管理：查看管理员登录记录，可以进行修改操作 系统信息管理 系统设置：进行系统相关基本信息设置，如网站名称，企业...
网页漂浮广告代码,能够轻松的实现图片在网页上面漂浮
08-19
网页漂浮广告代码,能够轻松的实现图片在网页上面漂浮
h5+css3最简单的图片飞入效果
热门推荐
gsls181711的专栏
12-09 2万+
/* Demo Styles */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,
JQuery网页飘窗
phubing
11-11 1379
HTML结构 body： <div class="float-container" id="ad1" style="position: absolute; left: 379px; top: 108px;"> <a href="#" title="" target="_blank"> <img src="images/pc1.png" alt=""> </a> <p class="ad1-close">关闭</p> </
JS实现同时存在两个漂浮广告在网页中浮动
xsfqh的专栏
11-29 1090
//公共脚本: 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.
php网页怎么做漂浮图片,网页上怎么让图片出现自由漂动的效果？（js代码示例）...
weixin_39636857的博客
03-11 601
有时候我们在打开某些网站时，会立即飘出一个广告式的图片在你面前晃悠，当然对于站长来说这是为了让用户能够第一时间看到他们的广告或者重要信息等，对于用户来说，可选择性观看这些图片信息，自然是更重要的。那么今天这篇文章主要介绍关于网页漂浮代码(图片漂浮可选择性关闭)的具体演示。希望对感兴趣的朋友有所帮助。js漂浮广告代码具体示例如下：关闭 网站漂浮代码测试var xPos = 300;var yP...
前端实现图片悬浮_JS怎么实现图片在网页上下左右悬浮移动？
weixin_39843338的博客
12-18 746
效果图请试一下下面代码，欢迎交流。html>碰撞检测html,body{margin:0;padding:0;height:100%;}#movele{position:absolute;top:0;left:0;height:150px;width:150px;background-color:#555;border-radius:50%;color:#fff;text-align:...
使用JS实现图片的飘浮运动
今天很快乐呀
09-03 5053
首先贴上准备飘浮的图片镇楼：PUBG 下面准备让这张图片在屏幕里面进行飘浮运动，先贴上HTML和CSS代码和运行图： &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
前端实现图片悬浮_JavaScript实现图片上下飘动 可设置浮动速度
weixin_30800151的博客
12-28 865
JavaScript实现图片上下飘动 可设置浮动速度网络编程站var XX=20; // X position of the scrolling objectsvar xstep=1;var delay_time=30; // 设置飘动的速度，数字越大则越慢。//Begin of the unchangable area, please do not modify this areavar YY=...
dw中让图片漂浮的代码
最新发布
06-12
以下是让图片漂浮的 CSS 代码： ```css img { position: absolute; /* 设置为绝对定位，使其可以浮动 */ animation: float 5s ease-in-out infinite; /* 设置动画 */ } @keyframes float { 0% { transform: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值