WORKS作品

• 页面撕皮效果代码

  2008-02-17

  版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
  http://shipin.blogbus.com/logs/15512529.html
  
  

  页面撕皮效果代码由webpicasso提供。

  当我看到页面撕皮效果的时候真的吓了一跳，真的是活生生把你的页面扒了一层皮，这个效果用来做广告真不错呢。先来看一下效果：点击这里看效果

  效果应该是：页面右上方本来被撕破了一角，把鼠标移到它上方页面整个被撕了下来，漏出了后面的内容，点击它转到指定的网站。

  于是马上琢磨了下编写代码，原来要完成这个效果需要两个flash文件，两张图片文件和两个javascript脚本文件。下载：页面撕皮效果代码.zip

  现在来讲解一下使用方法：
  在下载包里你将看到以下几个文件：
    两个javascript脚本文件AC_OETags.js/pageear.js
    两张图片文件pageear_b.jpg/pageear_s.jpg
    两个flash文件pageear_b.swf/pageear_s.swf
    两个文本文件copyright.txt/history.txt
  其中我们将要修改到pageear.js/pageear_b.jpg/pageear_s.jpg三个文件，其他不动。

  图片文件就不说怎么改了，根据自己需要制作，但是要保证修改后的图片大小不变，一个是100x100px，一个是500x500px。

  主要是pageear.js要修改正确，因为如果你打算用到大巴上图片地址肯定不相符。
  如果手头上没有frontpage等网页制作软件的朋友就用记事本打开pageear.js文件吧（不知道如何用记事本打开？晕！）
  打开后找到下面的参数：
  var pagearSmallImg = 'pageear_s.jpg';  //定义小图片的地址
  var pagearSmallSwf = 'pageear_s.swf';  //定义小flash的地址
  var pagearBigImg = 'pageear_b.jpg';  //定义大图片的地址
  var pagearBigSwf = 'pageear_b.swf';  //定义大flash的地址
  var jumpTo = 'http://www.webpicasso.de/blog/'  //定义点击后转向的地址
  var openLink = 'self';  //定义如何开启转向的地址，是新窗口还是本窗口，self指本窗口，new指新窗口
  上面的参数都需要根据自己需要更换引号中的内容，特别是地址要改成你上传到网络上的连接地址，如果是上传到大巴那更要改正确。

  如果你对javascript比较通的话我不介意更改其他的内容，但是一般只要更改上面说的几个就够了，更改好后保存，注意，还是要保存为.js格式，别捣鼓半天保存为.txt格式还跑过来问我是怎么回事。

  把文件都改好了以后上传。然后进入大巴后台，在head代码块中加上下面代码
         
     
  记得要改AC_OETags.js和pageear.js为正确的地址

  在index代码块中加上下面代码
  
  ok，到此这样就完成工作了

  这里还要补充一下，我在大巴做这个效果的时候发现在firefox下无法实现效果，于是给作者留言，回复说其实这个效果是兼容各个浏览器的，但是如果没上传copyright.txt文件到相同目录下的，将在firefox中无法显示该效果，这可就苦了大巴上的我们了，别说文件上传后不在根目录下，就连文件名都给改了，所以大家看到的页面撕皮效果其实是我在别的空间上制作好后嵌入到大巴的。

  
  

  随机文章：

  BOX随时随地文件分享插件 2008-07-05

  规定时间内显示*隐藏浮动层效果代码 2008-06-29

  超链接按类型加样式效果代码 2008-06-22

  鼠标点击(click)选项卡(TAB)效果代码 2008-06-15

  鼠标滑过(hover)选项卡(TAB)效果代码 2008-06-15

  
  收藏到：Del.icio.us

  
  
  
  
  

  Tags: Javascript 时尚型

  引用: