jquery背景移动插件MyFloatingBg.js

所属分类:UI-背景

 64052  440  查看评论 (12)
分享到微信朋友圈
X
jquery背景移动插件MyFloatingBg.js ie兼容6

这插件可以帮助你在网页上加入可移动背景Background。你可以用于整个文件的背景,或是某几个banner的背景。 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片。单靠jquery和图片,你便可以做出不同的效果。由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作。

使用方法

引用jQuery和MyFloatingBg.js到您的网页中

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.MyFloatingBg.js"></script>

Html中加入元素

<div id="demoDiv1" bg="img/fw2.jpg" class="m">
  <div style="color:#fff">
      7 billion friends
  </div>
</div>
<div id="demoDiv2" bg="img/star.jpg" class="m">
  <div style="color:#fff">
      wonderful world
  </div>
</div>

jQuery代码中引用

<script type="text/javascript">
$(document).ready(function(){
  //weather
	$("#demoDiv1").MyFloatingBg({direction:-1});
	$("#demoDiv2").MyFloatingBg({direction:0, speed:50});
});
</script>


=========== 以下方法由 我的2009 提供 =====================

这个插件的使用方法和过程作者已经写的很清楚了,效果不错只要换张图片。

开始我是将下面:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.MyFloatingBg.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#bannerBg").MyFloatingBg({direction:0, speed:50});
  });
</script>

放在上面<head></head>里面的,结果在ie7和ie8里面跟我写的js代码有冲突导致另外的一个功能有问题,

我试着将此插件的js(即上面一段代码)放到<body></body>里最下面引用,冲突就消失了。

相关插件-背景

漂亮的全屏Slideshow幻灯滑块效果(jQuery)

漂亮的全屏Slideshow幻灯滑块效果(jQuery)
  背景
 42650  419

jQuery动态改变文字和背景颜色效果

jQuery动态改变文字和背景颜色效果
  背景
 49370  373

全屏背景滚动

基于HTML5的炫酷个人网站模板
  背景
 77565  1080

jquery固定标题控制插件Midnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery插件,所以对应下面的内容你总能看到一个标题。
  背景
 42546  533

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

    云峰雁晓 0
    2017/5/23 21:49:11
    ? 0
    2017/5/3 16:08:59
    小树~ 0
    2017/3/22 17:22:35

    怎么让它左右移动呢??

    回复
    李肖阳55552 0
    2017/2/16 20:36:56

    搞版本jquery不兼容 

    回复
    亚伯拉罕 0
    2015/6/13 19:15:15
    求问,这个div标签中的bg是个啥了?能这样加背景图吗?
        YG。0
        2016/11/29 15:11:21
        这个是插件自定义标签的写法 相当于data-value
    回复
    Min-Jquery 0
    2015/4/9 13:34:45
    不错赞一个多像你学习 回复
    Legend 0
    2014/12/8 18:12:34
    全兼容的话 赞一个 回复
    魔界小鸟 0
    2014/6/30 16:56:00

    sky你的问题应该是jQuery版本兼容问题,这个插件要用jquery1.7版本。

    回复
    济公 0
    2014/6/30 11:30:00

    中的jsjquery.MyFloatingBg.js在哪儿啊,,我每次运行的时候就报TypeErr: $(...).MyFloatingBg is not a function的错,,,求大神指点。。

    回复
    魔界小鸟 0
    2014/1/16 23:09:00

    帅,代码很少,使用非常方便。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复