js实现悬浮窗效果(⽀持拖动)
经常可以看到⼤部分的官⽹有右侧悬浮。今天来写写!
效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js悬浮窗代码(⽀持拖动)</title>
<meta name="description" content="js浮动层特效制作悬浮代码,放置在线QQ等聊天按钮的浮动层代码,⽀持拖动效果,可随意在页⾯上拖动位置,随着浏览器滚动始终保持在悬浮在页⾯上的js代码。" /> </head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* KeFuDiv */
.KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:#fff;font-size:20px;text-align: center;cursor: pointer;}
.KeFuDiv p{line-height: 80px;font-weight:bold;}
</style>
<div ></div>
<div id="KeFuDiv" class="KeFuDiv" onmousedown="MoveDiv(KeFuDiv,event);">
<p>
Content Me<br>
我可以拖动哦
</p>
</div><!--KeFuDiv end-->
html滚动效果代码<script type="text/javascript" src="7xnlea2.z0.glb.qiniucdn/online.js"></script>
<script type="text/javascript">
//初始位置
gID("KeFuDiv").p = (document.documentElement.clientHeight - gID("KeFuDiv").offsetHeight)/2 +"px";
gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth +"px";
//开始滚动
ScrollDiv('KeFuDiv');
</script>
</body>
</html>
以上就是本⽂的全部内容,希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助,同时也希望多多⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。