这插件可以帮助你在网页上加入可移动背景Background。你可以用于整个文件的背景,或是某几个banner的背景。 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片。单靠jquery和图片,你便可以做出不同的效果。由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作。
引用jQuery和MyFloatingBg.js到您的网页中
1 2 | < script type = "text/javascript" src = "js/jquery.js" ></ script > < script type = "text/javascript" src = "js/jquery.MyFloatingBg.js" ></ script > |
Html中加入元素
1 2 3 4 5 6 7 8 9 10 | < 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代码中引用
1 2 3 4 5 6 7 | <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>里最下面引用,冲突就消失了。
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com