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

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

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

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

分享给朋友:

相关文章

MyEclipse 10安装svn

MyEclipse 10安装svn

 方法一:在线安装(推荐)1.打开HELP->MyEclipse ConfigurationCenter。切换到SoftWare标签页。 2.点击Add Site 打开对话框...

目标管理法——目标分解法

让自己的人生更幸福更有意义关键是:要将梦想转化为具体的目标,然后合理的分解,达到量化,指标化!现将学习到的两种非常有效的目标分解法分享给所有梦想、有激情的朋友:祝愿大家都能梦想成真! 一、俄...

MyEclipse 中项目修改SVN的地址

MyEclipse 中项目修改SVN的地址

在工作环境调整时,有的时候SVN服务器的地址需要修改,而正在开发中的项目在Eclipse中有些代码没有提交,此时怎么修改SVN的地址呢?以下有一个简单的办法:一、在MyEclipse中选择Window...

我差不多是个废人了,感觉身体被掏空

林心如跟霍建华都结婚了,滴滴跟优步都在一起了。我们也应该抱住了吧? 终于8月了,超吃点吧,再一咬牙,坚持一下吧,马上秋天到了,就可以又能马上把肥肉藏起来了。 在这里迫不及待教大家一个夏天过后...

jfinal 定时任务

1、去quartz官网下载 定时任务jar包(http://www.quartz-scheduler.org/)quartz-*.*.*.jar2、创建定时任务:public class SetAre...

如果有人夸你漂亮,你会如何回复

如果有人夸你漂亮,你会如何回复

       因为长得好看,会经常被别人夸长得漂亮,该如何机智而又优雅的回复,才能表达出谦虚而又不失敷衍的??如果是对方谦虚:谢谢,你也很漂...

发表评论

访客

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