移动水印
时间:2019-09-20
本文章向大家介绍移动水印,主要包括移动水印使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
//公共脚本文件 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 = 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; } //////////////////////////////////////////////////////// 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"; 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("div"); 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; } } } 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中这样设置即可
<div id="shuiyin" style="position:absolute;"> <p style="width: 100px">水印</p> </div> <script type="text/javascript"> // 水印 $(function () { $("#closepiaofu").click(function () { $("#shuiyin").hide(); }); }) var yidong = new AdMove("wzsse", true); yidong.Run(); </script>
原文地址:https://www.cnblogs.com/lljun/p/11558010.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- nginx动态添加模块
- 曾经豪言“指哪爬哪”,如今被一个JS狠狠教做人
- mysql主从复制延迟问题记录
- linux下设置locale
- 宜信OCR技术探索与实践|直播速记
- keepalived结合lvs实现双机热备
- jenkins安装说明
- Haproxy combined with FTP cluster for load balancing
- redis使用playbook批量安装
- SpringCloud Alibaba微服务实战十八 - Oauth2.0 自定义授权模式
- 包子旧闻&Leetcode solution 1344. Angle Between Hands of a Clock
- Ubuntu下DNS服务搭建
- 深入理解JavaScript函数式编程
- JavaScript 异步编程
- 日志清理脚本-V0.0.3(增加多目录清理、正则表达式匹配、调试模式;部分细节优化)