JavaScript/jQuery/Vue实现飘窗功能
2024-04-24 20:03:31
JavaScript/jQuery/Vue实现飘窗功能
- JavaScript飘窗
- jQuery飘窗
- Vue飘窗
JavaScript飘窗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#adbox{width:150px;height:150px;position: absolute;z-index:999;}#adbox img{border: none;}#adbox b{position: absolute;right: 5px;top: 0;cursor: pointer;color:#666;}</style>
</head>
<body><div id="adbox"><a href="javascript:;"><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片"></a><b onclick="closebox()">×</b></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("adbox")function movebox() {var L=T=0var R= document.documentElement.clientWidth-obj.offsetWidthvar B = document.documentElement.clientHeight-obj.offsetHeightobj.style.left = x + document.documentElement.scrollLeft + "px"obj.style.top = y + document.documentElement.scrollTop + "px"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('movebox()', delay)obj.onmouseover=function(){clearInterval(itl)}obj.onmouseout=function(){itl=setInterval('movebox()', delay)}function closebox() {obj.style.display = "none";}</script>
</body>
</html>
jQuery飘窗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>广告飘窗</title><style type="text/css">#adbox{width:150px;height:150px;position: absolute;z-index:999;}#adbox img{border: none;}#adbox b{position: absolute;right: 5px;top: 0;cursor: pointer;color:#666;}
</style>
</head>
<body><div id="adbox"><a href="javascript:;"><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片"></a><b>×</b></div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script>(function($){$.fn.adFloat=function(options){return new AdFloat(this,options);}var AdFloat=function(element,options){this.element=$(element);this.options=$.extend({width:150, //默认的广告的宽height:150, //默认的广告的高top:0, //默认的广告的Y坐标left:0, //默认的广告的X坐标delay:20, //延迟step:1 //默认的广告每次移动的距离(像素)},options);this.interval=null;this.xPos=this.options.left;this.yPos=this.options.top;this.yon=0;this.xon=0;this.isPause=false;this.init();};AdFloat.prototype={init:function(){var me=this;me.element.css("display","block");me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,overflow:"hidden"})me.element.hover(function(){clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);});$(document).ready(function(){me.start();});},changePos:function(){var me=this;var clientWidth=$(window).width();var clientHeight=$(window).height();var Hoffset=me.options.height;var Woffset=me.options.width;me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()});if(me.yon){me.yPos=me.yPos+me.options.step;}else{me.yPos=me.yPos-me.options.step;}if(me.yPos<0){me.yon=1;me.yPos=0;}if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);}if(me.xon){me.xPos=me.xPos+me.options.step;}else{me.xPos=me.xPos-me.options.step;}if(me.xPos<0){me.xon=1;me.xPos=0;}if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);}},start:function(){var me=this;me.element.css("top",me.yPos);me.interval=setInterval(function(){me.changePos();},me.options.delay);}}})(jQuery);$(function(){$("#adbox").adFloat({width:150,height:150,top:0,left:0})});$("#adbox b").click(function(){$("#adbox").hide(165)})</script>
</body>
</html>
Vue飘窗
<template><div><div id="adbox" ref="adbox" v-show="showAdbox" @mouseenter="enterbox" @mouseleave="leavebox"><a href="javascript:;"><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw" alt="广告图片"></a><b @click="closebox">×</b></div></div>
</template>
<style scoped>#adbox{width:150px;height:150px;position: absolute;z-index:999;}#adbox img{border: none;}#adbox b{position: absolute;right: 5px;top: 0;cursor: pointer;color:#666;}
</style>
<script>export default{data(){return {x:50,y:50,xin:true,yin:true,step:1,delay:10,itl:null,showAdbox:true}},beforeRouteEnter(to, from, next) {next(vm => {vm.routeEnterShowAdbox();})},beforeRouteLeave(to, from, next) {next(vm => {});clearInterval(this.itl);},methods:{closebox(){this.showAdbox = false;clearInterval(this.itl)},leavebox(){if(this.showAdbox== false){clearInterval(this.itl)}else{this.itl=setInterval(this.movebox, this.delay)}},enterbox(){clearInterval(this.itl)},movebox() {var L = 0;var T = 0;var R = document.documentElement.clientWidth - this.$refs.adbox.offsetWidth; //浏览器显示宽度-adbox宽度，不随滚动条变化而变化var B = document.documentElement.clientHeight - this.$refs.adbox.offsetHeight; //浏览器显示高度-adbox高度，不随滚动条变化而变化this.$refs.adbox.style.left = this.x + document.documentElement.scrollLeft + "px"; //adbox初始左+滚动条最左端到浏览器最左端的距离this.$refs.adbox.style.top = this.y + document.documentElement.scrollTop + "px"; //adbox初始高+滚动条顶端到浏览器顶端的距离this.x = this.x + this.step * (this.xin ? 1 : -1);if (this.x < L) {this.xin = true;this.x = L;}if (this.x > R) {this.xin = false;this.x = R;}this.y = this.y + this.step * (this.yin ? 1 : -1);if (this.y < T) {this.yin = true;this.y = T;}if (this.y > B) {this.yin = false;this.y = B;}},routeEnterShowAdbox(){this.itl=setInterval(this.movebox, this.delay)},},}
</script>
JavaScript/jQuery/Vue实现飘窗功能相关推荐
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
- javascript,jQuery,vue的区别
1.javaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的. 2.jQuery就是java ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- Jquery全选单选功能
Jquery全选单选功能 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="W ...
- 剪不断，理不乱——Javascript,JQuery,AJAX
三者整体关系 JQuery.AJAX都是Javascript的一个框架,如果把Javascript比作父亲的话,JQuery和AJAX就是Javascript的亲生儿子.在Javascript中非常复 ...
- 工作中jQuery常用实例-主要功能总结整理
1.jQuery鼠标经过选项卡内容切换代码 引入jQuery库, <script type="text/javascript" src="js/jquery-1.8 ...
- JavaScript - jQuery（一）
导航兔: jQuery 导航地址 JavaScript - jQuery(一) https://qianmoer.blog.csdn.net/article/details/128358221 Jav ...
最新文章
- GitLab-CI与GitLab-Runner
- linux 系统迁移到固态硬盘,把Debian GNU/Linux迁移到SSD上
- python3 tkinter详解_python tkinter基本属性详解
- 最新 IntelliJ Idea 2017 激活方法（转）
- Python中字符串反转的一个简单操作
- TRACERT命令及用法
- 关于CreateWindowEx及自己封装Window类
- 计算机视觉基础：自适应阈值分割（Computer Vision Fundamentals: Adaptive Threshold Segmentation）
- 全国高校计算机能力挑战赛Java试题（一）
- 纯英文拼音交流1声应该表示成0,要不就不知道怎么发音
- word制作试卷方法
- VBS上传文件（转载）
- Visual Studio Code + SDCC开发51单片机 1 - 环境安装
- uni-app入门:wxs基本使用
- 云米发布上市后首份财报：非GAAP净利3875万 同比增36%
- java中Static内存图解
- 使用油猴子对 Eureka 网址进行自定义修改
- 文章原创工具-批量文章伪原创软件免费
- 高级筛选系别计算机,一级上机Excel题库
- lsass.exe--系统错误 安全帐户管理初始化失败