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

访客8年前 (2017-09-08)javaScript8809

效果:图片.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'

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

分享给朋友:

相关文章

plsql 中number类型字段 取消科学计数法显示

 PL/SQL DEVELOPER中禁用科学计数法:Tools - Prefrence - SQL Window - 选择:"Number fields to_char&quo...

org.tigris.subversion.javahl.ClientException:Attempted to lock an already-locked dir

 svn更新或提交时候报错:org.tigris.subversion.javahl.ClientException:Attempted to lock an already-locke...

使用Myeclipse 8.5开发基于JAX-WS的Web service实例

 本文为Web service 开发入门篇,主要介绍在Myeclipse 8.5环境下开发Web service的服务程序和客户端程序的基本流程。 在Weblogic 11g...

freeMarker 截取字符串(操作字符串函数 )

<#if c.proSummary!?length gt 25>  <!-- 如果长度 >25 截取25个字-->    ...

freemarker 判断日期变量为空处理 及InvalidReferenceException异常处理

at freemarker.core.InvalidReferenceException.getInstance(InvalidReferenceException.java:98);InvalidR...

jquery 操作html元素(及CSS)

jquery 操作html元素(及CSS)

 $("li").addClass("aui-user-view-cell aui-img") ;  //给元素添加样式$('#a1...

发表评论

访客

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