Java前端,悬浮窗口html+js

html代码:

<div id="window"><a href="#anchor" > //锚点信息,可以在向跳转到的位置加锚点<img style="height: 80px" class="className" src="/static/img/receive.gif"> //src中我放的是图片的本地链接</a><a href="javascript:void(0)" id="wind" style="height: 20px;padding-right: 805px;"></a> //这里的padding-right可以调节图片左右位置
</div>

js代码:

 $(function(){$("#wind").click(function(){$(this).parent().hide();});//相对固定悬浮窗位置function scrollx(p) {var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;if (o) {cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');if (p.r != undefined && p.l == undefined) {o.style.cssText += cssPub + ('right:'+p.r+'px;');} else {o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');}if(p.f&&ie6){cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';if (p.r != undefined && p.l == undefined) {o.style.cssText += cssRight + cssTop;} else {o.style.cssText += cssTop;}dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';}else{if(!p.f){w.onresize = w.onscroll = function(){clearInterval(timer);timer = setInterval(function(){//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0var st = (dd.scrollTop||db.scrollTop),c;c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);if(c!=0){o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';}else{clearInterval(timer);}},10)}}}}}if(screen.height>800){//粗暴地处理分辨率对浮窗的影响scrollx({id:'jdSmall', r:0, t:screen.height-240, f:1}); //这里的t的数据是调整图片上下的位置}else if(screen.height>720){scrollx({id:'jdSmall', r:0, t:screen.height-545, f:1});}else{scrollx({id:'jdSmall', r:0, t:screen.height-460, f:1});}});

锚点:

<a id="anchor"></a>

这段代码也是在网上看的某个大佬写的.目前能知道的也就是调整窗口的位置.锚点的跳转是我加的.但是位置掌握不好.

这个就是展示的效果,立即领取,会一直固定在页面下端:

点击,立即领取,它会跳转到你锚点设置的位置,但是没办法固定到某个标签上,也希望大家能给一个解决的方法.
如果只是想出现一个一直显示的悬浮窗口,或者图标,就忽略锚点设置,

这里的href直接填个#号就行了.

Java前端,悬浮窗口html+js相关推荐

html js中间显示悬浮窗,Js 悬浮窗口(可固定位置)代码
本节内容: Js 悬浮窗口说明: 固定位置的Js悬浮窗口,代码有详细的注释. 例子: 复制代码代码示例: Fixed固定位置的悬浮 - www.jquerycn.cn * { font-size: ...
Java后端压缩JSON字符串，前端使用pako.min.js解压
我在日常开发中遇到,由于后端返回JSON数据较大,导致前端响应的较慢,于是考虑通过后端压缩,前端解压的方式来进行优化: 后端压缩工具类: package com.stt.common.util;imp ...
前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介新建步骤 <body ...
前端利器—1—转型JS编程
JS作为前端开发的必备语言工具,虽然JS对非编程人员来说比较容易上手,但是,要真正的精通JS开发,尚且假设学习过c++.java等面向对象语言的一种.因为对oo开发人员,迅速掌握JS的开发要点,是顺利 ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
通用的桌面悬浮窗口的实现
现在很多安全类的软件,比如360手机助手,百度手机助手等等,都有一个悬浮窗,可以飘浮在桌面上,方便用户使用一些常用的操作.今天这篇文章,就是介绍如何实现桌面悬浮窗效果的. 首先,看一下效果图. 悬浮窗 ...
【Anroid界面实现】通用的桌面悬浮窗口的实现
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 现在很多安全类的软件,比如360手机助手,百度手机助手等等,都有一个悬浮窗,可以飘浮在桌面上,方便用户使用一 ...
使用electron实现百度网盘悬浮窗口功能的示例代码
相关依赖里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态展示相关依赖里面使用了vuex vue vue-route storeJs sto ...
好程序员web前端分享如何理解JS单线程
好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

Java前端,悬浮窗口html+js

Java前端,悬浮窗口html+js相关推荐

最新文章

热门文章