注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery制作动感特效且全屏的banner

媒体 fishcity 1519浏览

jquery制作全屏的banner

一款jquery制作的极具动感的全屏Banner,4个层次的动画效果,动感十足,让您的网站不再平庸,但代码有些复杂,想研究的朋友,需要有一定JS底子,不过里面的方法还是值得借签的,另外,如果是拿来主义的朋友就有福气了,可以直接使用,加到自己的网站是非常简单的。

jquery实例jquery制作全屏banner。

首先,引入核心库文件,一个是jquery,一个是jquery插件jquery.easing,动画效果就是由它来完成的

<script src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

接着,创建html标签,这里的标签看起来有些复杂,但仔细看下,也就那么回事,先贴上代码

<div id="focusBar"> 
  <a href="javascript:void(0)" class="arrL" onclick="prePage()" style="left: 0px;">左</a>
  <a href="javascript:void(0)" class="arrR" onclick="nextPage()" style="right: 0px;">右</a>
  <ul class="mypng">
    <li id="focusIndex1" style="background:url(./img/banner_bj_001.gif) repeat-x;">
      <div class="focusL"><a href="http://www.jqcool.net"><img src="img/1.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="http://www.jqcool.net"><img src="img/2.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_01.jpg) no-repeat;">
    </li>
    <li id="focusIndex2" style="background:url(./img/banner_bj_002.gif) repeat-x;">
      <div class="focusL"><a href="http://www.jqcool.net"><img src="img/3.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="http://www.jqcool.net"><img src="img/4.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto;"></div>
    </li>
    <li id="focusIndex3" style="background:url(./img/banner_bj_003.gif) repeat-x;">
      <div class="focusL"><a href="http://www.jqcool.net"><img src="img/5.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="http://www.jqcool.net"><img src="img/6.png" width="1000" height="540"></a></div>
      <div style="width:1000px;height:540px; margin:0 auto; background:url(./img/banner_bj_03.jpg) no-repeat; "></div>
    </li>
    <li id="focusIndex4" style="background:url(./img/banner_bj_004.gif) repeat-x;">
      <div class="focusL"><a href="http://www.jqcool.net"><img src="img/7.png" width="1000" height="540"></a></div>
      <div class="focusR"><a href="http://www.jqcool.net"><img src="img/8.png" width="1000" height="540"></a></div>
      <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_04.jpg) no-repeat;"></div>
    </li>
  </ul>
  </div>

前面两个A标答,就是左右按钮,加上了单加事件。接下来的<ul class="mypng">内就是banner的主内容了,li标签内有3个div,加上li本身,就一切成了4个层次的动画,大大的丰富了动画的层次(本例的特点就在此,里面的元素以不同的时间进入或退出主画面)。

完成以上工作后,还有引入一个JS文件,这个是动画执行的文件,因为代码太长,所以就放一个文件内,单独引用

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

好了,打开浏览器来测试自己的劳动成果吧。这里要说下,这个例实的动画效果是不错,但代码的写法不敢恭维,太乱,也写得太死了,不建议朋友们用这样的方法来写自己的东西,ok,就唠嗑到这了,ths!

转载请注明:jQ酷 » jquery制作动感特效且全屏的banner

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。