jQuery移动漂浮窗口

所属分类:其他,UI-动画效果,独立的部件,弹出层

 41724  341  查看评论 (23)
分享到微信朋友圈
X
jQuery移动漂浮窗口 ie兼容7

使用方法

压缩包内有一个HTML示例和主要js文件,体积小,带有详细的注释和丰富的示例.
使用插件简单且必要的步骤:
   1,引入jquery
   2,在demo中提取js代码部分,这是最主要部分
   3,css中自定义浮窗样式和内容
示例:
HTML部分:指定一个容器

<div id="move_port">
   自定义样式和内容!
</div>

JS部分:

<script>
   /*调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填*/
   //示例:
   move_obj("#move_port");
   move_obj(".move_div",'','',10,10,800,500,100);
   move_obj(".d1",600,500);
   move_obj(".d2",'','','','','',300,200);
   move_obj(".d3",500,300);
</script>

调用即可

相关插件-动画效果,独立的部件,弹出层

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 39193  393

2018年华为官网双十一红包雨特效

2018年华为官网双十一红包雨特效,从一堆压缩的代码中整理出来比较费力,看JQ22上红包雨特效活动特效较少,发布给大家下载。
  动画效果
 27593  315

3D签到墙 threejs(使用元素周期表修改)

采用threejs官方demo的元素周期更改的,展示为图片,可自动更换或手动更换,目前为旋转状态;模拟推送用户可以优化随机更改图片应该会更好点。
  动画效果
 56315  588

css实现任务奔跑

利用backgroundposition,实现人物跑步的动画 ,并且支持快慢,暂停等
  动画效果
 30189  414

讨论这个项目(23)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2020/8/27 12:45:15
    不行,还是卡顿。 回复
    Y、s 0
    2020/5/26 15:08:33
    大神,js能发我邮箱一下么?没有JQ币
        Y、s0
        2020/5/26 15:08:58
        389969914@qq.com
        无忧无虑0
        2020/5/29 22:49:47
        可以
        Y、s0
        2020/6/4 14:19:56
        收到了,谢谢。
        我本真实0
        2020/7/9 17:18:41
        铜球
        我本真实0
        2020/7/9 17:19:17
        806074087@qq.com
        我本真实0
        2020/7/9 17:19:44
        大佬帮帮忙
        无忧无虑0
        2020/7/10 11:55:42
        已发
        我本真实0
        2020/7/10 12:16:50
        已收,多谢
    回复
    银河铁道 0
    2019/12/6 10:12:24
    很棒,虽然移动速度慢了还是会有点卡卡的感觉。我现在是20,速度感觉可以,但是div有点模糊的感觉,如果是图片的话速度10的话就没有这个感觉,但是太快了,,
    文字的话,还是会有模糊,慢了就卡顿,
    有建议速度吗?
    我现在就写了速度,其他空着的。
        无忧无虑1
        2019/12/10 11:42:14

        试试,将定时器周期调小一点,每次移动距离小一些,例如:  

        move_obj("#move_port",'','',1,1,'','',50);
    回复
    689237 0
    2019/11/12 9:25:59
    点击关闭按钮报错move_port.js:60 Uncaught TypeError: $(...).on is not a function
    at move_obj (move_port.js:60)出现这个是什么原因啊
        无忧无虑1
        2019/11/20 8:34:25
        检查下是否引入jQuery、版本是否支持.on已经引入顺序
        无忧无虑0
        2019/11/20 8:34:57
        以及引入顺序
    回复
    泪无伤 0
    2019/11/12 8:41:59
    掏粪少年派 0
    2019/9/6 10:41:13
    楼主厉害,强烈支持 回复
    何思华 0
    2019/3/5 13:57:42
    多谢大大的分享
        无忧无虑0
        2019/3/11 9:02:19
        希望对你有帮助
    回复
    秦依娜- 0
    2018/6/15 13:33:23
    动画效果一卡一卡的
        无忧无虑1
        2018/6/15 15:05:45
        示例中调用方法时传入的参数很可能超出了浏览器窗口可视区域范围,把响应参数调整一下即可,把源码注释看看应该没多大问题.比如这样调用:move_obj(".d1",600,500)中600和500,指浮窗相对于浏览器可视区域左上角的位置,如果浏览器宽度小于600+容器宽度或高度小于500+容器高度,就会出现你说的那种情况,改为move_obj(".d1",100,200)试试
        无忧无虑1
        2018/6/15 15:25:36
        调用move_obj(obj,move_w,move_h,x,y,l,t,m)时,传递的参数依次为:
        obj 目标对象,可以是class,或是id等,同jquery中的选择器;
        move_w //水平移动范围,默认浏览器可视区域宽度;
        move_h //垂直移动范围,默认浏览器可视区域高度
        x //一次水平移动距离,默认3px
        y //一次垂直移动距离,默认3px
        l //相对于body的起始水平位置,默认0
        t //相对于body的起始垂直位置,默认0
        m //计时周期,单位毫秒,默认80ms
        调用方法时可以通过调整传入参数来实现你想要的效果
        有任何问题,欢迎指正
    回复
    无忧无虑 0
    2018/6/11 8:55:33
    补充一下:被指定漂浮的容器,必须是已定位的元素,绝对定位或固定定位. 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复