您现在的位置是：网站首页 > 心得笔记
jquery版简单易用的可拖动右下角浮动窗口特效
简介当我们在浏览很多网站中，会发现各式各样的广告、宣传等信息，这里给出一种友好、不那么讨人厌的广告浮动窗口特效
运行效果：
首先，需要引入jquery和drag拖动插件，拖动插件下载https://jjjc.blonglee.me/admin/js/drag.js
html代码：
<body class='box box-3'> <dl> <dd>代理人联系信息<b id="small_button" class="up"></b></dd> <ul> <li><span>姓 名：</span><i>XXX</i></li> <li><span>手机号：</span><i>XXXXXXXXXXX</i></li> <li><span>邮 箱：</span><i>XXXXXXXX@XXXX</i></li> <li><span>电话：</span><i>XXXXXXX</i></li> </ul> </dl> </body>
css代码：
.box{width:100%; overflow:hidden;}
.box-3 dl{ display:table; position:absolute; bottom:5px; right:5px; width:300px; background:#fff;box-shadow: 0 0 7px rgba(0,0,0,.3); border-radius:3px; }
.box-3 dl dd{height: 40px;line-height: 40px; color:#fff; font-size: 16px;position: relative;padding-left: 10px; background:#06b5ff; border-radius:3px 3px 0 0;}
.box-3 dl dd b{ display: block; height:40px; width:40px; position:absolute; top:0; right:0; cursor:pointer;}
.box-3 dl dd b.up{ background:url(/front/images/up.png) center center no-repeat;}
.box-3 dl dd b.down{ background:url(/front/images/down.png) center center no-repeat;}
.box-3 dl ul{padding:0 20px; height:165px;}
.box-3 dl ul li{ height:40px; line-height:40px; border-top: 1px dashed #EDEDED;}
.box-3 dl ul li span{ display:inline-block; width:70px; text-align:right;}
.box-3 dl ul li i{ font-style:normal; margin-left:10px;}上下两图片下载地址：https://jjjc.blonglee.me/front/images/up.png 、https://jjjc.blonglee.me/front/images/down.png
jquery代码：
<script>
$(function(){
$('.box-3 dl').each(function(){
$(this).dragging({
move : 'both',
randomPosition : false
});
});
});
</script>上一篇：瀑布流布局实现图片延迟加载特效
下一篇：关系型数据库中的外键