使用jquery制作文字背景图片特效

发布于，归属于jquery教程。 前4个座位已被强势霸占！ 共有475人围观    

前几天在gayadesign上看到了一个颇有意思的效果，自己就模范写了一个。

背景图片，可以自己更改，我这里面使用了《air》和《最终幻想7》的壁纸，嘿嘿，欢迎动漫爱好者交流。

由于使用的是png，不支持IE6。

制作教程：

创建一个文字遮罩图片：

使用ph0toshop制作图片如下：

图层关系如下：

创建如下html页面，引入jquery库还有动画增强插件easing，还有最重要的，务必引入jquery.backgroundPosition.js

backgroundPosition插件用于修正背景图片无法使用动画的问题。

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  2. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  3. <script type="text/javascript" src="jquery.backgroundPosition.js"></script>
  1. <div class="scrollBg">
  2.         <img src='mask.png' alt='RIA之家' width="500" height="109" />
  3.  </div>
  4.  
  5.  <div id="scrollBg2" class="scrollBg">
  6.         <img src='mask.png' alt='RIA之家' width="500" height="109" />
  7.  </div>

创建2个图片容器，里面为遮罩图片，就是文字图片

样式如下：

  1. body {background-color: #000000;}
  2. .scrollBg {
  3.     background-image: url(bg.jpg);
  4.     background-color: #000000;
  5.     width: 500px;
  6.     height: 109px;
  7. }
  8. .scrollBg img {display: block;}
  9.  
  10. #scrollBg2{background-image: url(bg2.jpg);}

js代码如下

  1. $(document).ready(function() {
  2.  
  3.     moveBgAround('.scrollBg');
  4. });
  5. /**
  6. *移动背景
  7. */
  8. function moveBgAround(applyTo,x,y) {
  9.     var _applyTo = applyTo;
  10.     var _maxX = x || 1000;
  11.     var _maxY = y || 700;
  12.     //随机移动距离
  13.     var x = Math.floor(Math.random()*_maxX);
  14.     var y = Math.floor(Math.random()*_maxY);
  15.  
  16.     //随机速度
  17.     var time = Math.floor(Math.random()*1001) + 2000;
  18.  
  19.     //让背景开始移动
  20.     $(_applyTo).animate({
  21.         backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
  22.     }, time, "swing", function() {
  23.         //回调函数
  24.         moveBgAround(_applyTo,_maxX,_maxY);
  25.     });
  26. }

脚本很短，有不明白的地方可以给我留言。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

4个座位已被强势霸占！

  1. 老饕

    囧~代码多了点~

  2. E网的那些事儿

    这文章的图片挂了 演示也挂了 不知道是不是我的网速不行的原因~

    明河共影回复于 2011年02月15日 11:48

    ……..不是你的网速问题，而是的确是挂了……

    明河共影回复于 2011年02月15日 11:54

    demo已经修复了，图片找不回来了，没办法修复了。

同类