jquery实现飘窗(飘动图片) 插件bay-window.js

访客9年前 (2017-09-08)javaScript9459

效果:图片.png

   1.js及css部分:

    <script type="text/javascript" src="/js/jquery.bay-window.js"></script>
    <style type="text/css">
        /* 给飘窗添加一些基础样式,如宽度,高度和背景颜色等等 */
        #bay{
            width: 420px;
            height: 250px;
            z-index:99999999;
        }
        body{background-color: #F4F4F4}
    </style>

  2.html页面:

<!-- 飘窗元素 -->
<a href="#"><img id="bay" src="images/piao.jpg" /></a>


3.插件启用:

<script  type="text/javascript">
  //测试插件
  $('#bay').autoMove({angle:-Math.PI/4, speed:200});

</script>

官网下载源码

注意事项:


 插件中 使用了绝对位置,若想图片随着浏览器的显示一值滚动,可将
$(this).css({position: 'absolute', left: setobj['startL']+'px', top: setobj['startT']+'px'});

里的position: 'absolute',改为   position: 'fixed'

本文原创,转载必追究版权。

分享给朋友:

相关文章

ajax提交表单、ajax实现文件上传(multipart/form-data)

方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持...

如何查询端口占用情况 并禁止占用

如何查询端口占用情况 并禁止占用

开始---->运行---->cmd,或者是window+R组合键,调出命令窗口输入命令:netstat -ano可看到是:pid为 2160 的程序占用了80端口;启动任务管理器:ctrl...

UUID 生成方法

import java.util.UUID;/**     * UUID 生成方法     * @return uuid &nbs...

Jfinal+Jquery uploadify实现多文件上传实例

Jfinal+Jquery uploadify实现多文件上传实例

包文件外部jar包jfinal-2.0-bin-with-src.jar(JFinal核心包)  fastjson-1.2.7.jar(用于json数据的处理)  cos-26De...

微信小程序如何查找使用

打开微信——点击下方【发现】——最下面找到【小程序】并点击——在搜索框中输入小程序的名称进行搜索 并点击进入即可过如果【发现】中没有【小程序】,直接在搜索框中 输入小程序的名称 ,例如:美团。即可看到...

java实现日期加1

直接附代码:      public static final Date getNextDay(){...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。