利用jquery实现电影网站选项卡切换特效



67 266 89



特效描述:利用jquery实现 电影网站 选项卡切换,利用jquery实现电影网站选项卡切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />

2. 引入JS

<script src="js/jquery-edge.min.js"></script>
<script src="js/zzsc.js"></script>
<script src="js/index_patch.js"></script>

3. HTML代码

<br>
<div class="box_20ov cl"></div>
<div class="layout" id="floor_1">
<div class="carousel slide" id="carousel_news" data-unit-config="{'onclass':'active', 'offclass':'', 'pause_on_act':'click', 'interval':8000, 'position':'left'}">
    <div class="carousel-inner">
      <div class="carousel-pos">
            <div class="f_out style01">
      <ul>
<li>
  <a class="mtitle" href="http://51qianduan.com/?news/20131121/706943.shtml" target="_blank" title="金马奖预测 本土狂欢或华语电影拐点?">金马奖预测 本土狂欢或华语电影拐点?</a>
  <a target="_blank" href="http://51qianduan.com/?news/20131121/706943.shtml"><img alt="金马奖预测 本土狂欢或华语电影拐点?" src="images/thumb_1_256_353_20131121030546228066.jpg" width="256" height="353"></a>
</li>
<li>
  <a class="mtitle" href="http://51qianduan.com/?news/20131114/705165.shtml" target="_blank" title="反乌托邦电影折射当代社会焦虑">反乌托邦电影折射当代社会焦虑</a>
  <a target="_blank" href="http://51qianduan.com/?news/20131114/705165.shtml"><img alt="反乌托邦电影折射当代社会焦虑" src="images/thumb_1_256_353_20131121101711206364.jpg" width="256" height="353"></a>
</li>
<li>
  <a class="mtitle" href="http://51qianduan.com/?news/20131121/706752.shtml" target="_blank" title="专访姚晨:《控制》床戏穿太多留遗憾">专访姚晨:《控制》床戏穿太多留遗憾</a>
  <a target="_blank" href="http://51qianduan.com/?news/20131121/706752.shtml"><img alt="专访姚晨:《控制》床戏穿太多留遗憾" src="images/thumb_1_256_353_20131121094349667566.jpg" width="256" height="353"></a>
</li>
</ul>
      </div>
            <div class="f_out style01">
      <ul>
    <li>
    <span class="cinemaTag"></span>    <a class="mtitle" href="http://51qianduan.com/?yx/film/c1f538140.html" target="_blank" title="《饥饿游戏2》:票房黑马续集再临">《饥饿游戏2》:票房黑马续集再临</a>
    <a target="_blank" href="http://51qianduan.com/?yx/film/c1f538140.html"><img alt="《饥饿游戏2》:票房黑马续集再临" src="images/thumb_1_256_353_20131008035404898.jpg" width="256" height="353"></a>
  </li>
    <li>
    <span class="payTag"></span>    <a class="mtitle" href="http://51qianduan.com/?play/706355.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=6" target="_blank" title="《残团》:可歌可泣抗日史诗">《残团》:可歌可泣抗日史诗</a>
    <a target="_blank" href="http://51qianduan.com/?play/706355.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=6"><img alt="《残团》:可歌可泣抗日史诗" src="images/thumb_1_256_353_20131119033225329206.jpg" width="256" height="353"></a>
  </li>
    <li>
    <span class="HDTag"></span>    <a class="mtitle" href="http://51qianduan.com/?vod/info/689905.shtml" target="_blank" title="《小小飞虎队》:四代童星合力抗日">《小小飞虎队》:四代童星合力抗日</a>
    <a target="_blank" href="http://51qianduan.com/?vod/info/689905.shtml"><img alt="《小小飞虎队》:四代童星合力抗日" src="images/thumb_1_256_353_20131114090552597360.jpg" width="256" height="353"></a>
  </li>
  </ul>
      </div>
            <div class="f_out style03">
          <ul class="sm_pc fr">
                          <li class="active ">
    <a href="#big_01" data-evt="hover" data-toggle="tab"><img title="【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市" alt="【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市" src="images/grey.gif" data-original="images/thumb_1_129_176_20131121095350924257.jpg" width="129" height="176"></a>
  </li>
                                                            <li class=" mt01">
    <a href="#big_02" data-evt="hover" data-toggle="tab"><img title="【海外动态】《机械战警》国际版预告 超级警察维护城市正义" alt="【海外动态】《机械战警》国际版预告 超级警察维护城市正义" src="images/grey.gif" data-original="images/thumb_1_129_176_20130913093028776.jpg" width="129" height="176"></a>
  </li>
  </ul>
<ul class="big_pc fl">
    <li class="active" id="big_01">
    <a class="mtitle" href="http://51qianduan.com/?video/play/706506.shtml" target="_blank" title="【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市">【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市</a>
    <a target="_blank" href="http://51qianduan.com/?video/play/706506.shtml"><img title="【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市" alt="【内地票房播报】《雷神2》近3亿强势连庄 进口片称霸影市" src="images/grey.gif" data-original="images/thumb_1_641_353_20131121095219423573.jpg" width="641" height="353"></a>
  </li>
    <li class="" id="big_02">
    <a class="mtitle" href="http://51qianduan.com/?video/play/706810.shtml" target="_blank" title="【海外动态】《机械战警》国际版预告 超级警察维护城市正义">【海外动态】《机械战警》国际版预告 超级警察维护城市正义</a>
    <a target="_blank" href="http://51qianduan.com/?video/play/706810.shtml"><img title="【海外动态】《机械战警》国际版预告 超级警察维护城市正义" alt="【海外动态】《机械战警》国际版预告 超级警察维护城市正义" src="images/grey.gif" data-original="images/thumb_1_641_353_20131121102629748335.jpg" width="641" height="353"></a>
  </li>
  </ul>
      </div>
            <div class="f_out style01">
      <ul>
<li>
  <span class="payTag"></span>
  <a class="mtitle" href="http://51qianduan.com/?play/700590.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7" target="_blank" title="《非常幸运》:章子怡王力宏尴尬性事">《非常幸运》:章子怡王力宏尴尬性事</a>
  <a target="_blank" href="http://51qianduan.com/?play/700590.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7"><img title="《非常幸运》:章子怡王力宏尴尬性事" alt="《非常幸运》:章子怡王力宏尴尬性事" src="images/grey.gif" data-original="images/thumb_1_256_353_20131121090449864349.jpg" width="256" height="353"></a>
</li>
<li>
  <span class="payTag"></span>
  <a class="mtitle" href="http://51qianduan.com/?play/691798.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7" target="_blank" title="《一夜惊喜》:范冰冰与壮汉艳事">《一夜惊喜》:范冰冰与壮汉艳事</a>
  <a target="_blank" href="http://51qianduan.com/?play/691798.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7"><img title="《一夜惊喜》:范冰冰与壮汉艳事" alt="《一夜惊喜》:范冰冰与壮汉艳事" src="images/grey.gif" data-original="images/thumb_1_256_353_20131121090151727949.jpg" width="256" height="353"></a>
</li>
<li>
  <span class="payTag"></span>
  <a class="mtitle" href="http://51qianduan.com/?play/706892.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7" target="_blank" title="《风雪武者》:中国首部武道微电影">《风雪武者》:中国首部武道微电影</a>
  <a target="_blank" href="http://51qianduan.com/?play/706892.shtml?utm_source=m1905&utm_medium=cps&utm_campaign=7"><img title="《风雪武者》:中国首部武道微电影" alt="《风雪武者》:中国首部武道微电影" src="images/grey.gif" data-original="images/thumb_1_256_353_20131121105844598743.jpg" width="256" height="353"></a>
</li>
</ul>
      </div>
            <div class="f_out style01">
      <ul>
<li>
  <a class="mtitle" href="http://51qianduan.com/?vod/info/703995.shtml" target="_blank" title="《疯狂的导演》:王宝强变身国际大盗">《疯狂的导演》:王宝强变身国际大盗</a>
  <a target="_blank" href="http://51qianduan.com/?vod/info/703995.shtml"><img title="《疯狂的导演》:王宝强变身国际大盗" alt="《疯狂的导演》:王宝强变身国际大盗" src="images/grey.gif" data-original="images/thumb_1_256_353_20131111044525214509.jpg" width="256" height="353"></a>
</li>
<li>
  <a class="mtitle" href="http://51qianduan.com/?vod/info/701868.shtml" target="_blank" title="《囧人之越挠越痒》:软饭男包小三">《囧人之越挠越痒》:软饭男包小三</a>
  <a target="_blank" href="http://51qianduan.com/?vod/info/701868.shtml"><img title="《囧人之越挠越痒》:软饭男包小三" alt="《囧人之越挠越痒》:软饭男包小三" src="images/grey.gif" data-original="images/thumb_1_256_353_20131101034734909.jpg" width="256" height="353"></a>
</li>
<li>
  <a class="mtitle" href="http://51qianduan.com/?vod/info/699619.shtml" target="_blank" title="《心战》:任达华、张家辉“攻心计”">《心战》:任达华、张家辉“攻心计”</a>
  <a target="_blank" href="http://51qianduan.com/?vod/info/699619.shtml"><img title="《心战》:任达华、张家辉“攻心计”" alt="《心战》:任达华、张家辉“攻心计”" src="images/grey.gif" data-original="images/thumb_1_256_353_20131025094054125.jpg" width="256" height="353"></a>
</li>
</ul>
      </div>
            <div class="f_out style01">
      <ul>
<li class="li01">
  <a class="mtitle" href="http://51qianduan.com/?apps/gyt?url=http://51qianduan.com/?app/gyt/index/detail/218" target="_blank" title="电影《控制》北京免费观影">电影《控制》北京免费观影</a>
  <a target="_blank" href="http://51qianduan.com/?apps/gyt?url=http://51qianduan.com/?app/gyt/index/detail/218"><img title="电影《控制》北京免费观影" alt="电影《控制》北京免费观影" src="images/grey.gif" data-original="images/thumb_1_206_353_20131120020419876767.jpg" width="206" height="353"></a>
</li>
<li class="li02">
  <a class="mtitle" href="http://51qianduan.com/?apps/gyt?url=http://51qianduan.com/?app/gyt/index/detail/182" target="_blank" title="[全国]奥纳影城《饥饿游戏2:星火燎原》免费抢票">[全国]奥纳影城《饥饿游戏2:星火燎原》免费抢票</a>
  <a target="_blank" href="http://51qianduan.com/?apps/gyt?url=http://51qianduan.com/?app/gyt/index/detail/182"><img title="[全国]奥纳影城《饥饿游戏2:星火燎原》免费抢票" alt="[全国]奥纳影城《饥饿游戏2:星火燎原》免费抢票" src="images/grey.gif" data-original="images/thumb_1_356_353_20131120020407750026.jpg" width="356" height="353"></a>
</li>
<li class="li01">
  <a class="mtitle" href="http://51qianduan.com/?weibo/1022705?open=1" target="_blank" title="《地心引力》拍的好还是CG好">《地心引力》拍的好还是CG好</a>
  <a target="_blank" href="http://51qianduan.com/?weibo/1022705?open=1"><img title="《地心引力》拍的好还是CG好" alt="《地心引力》拍的好还是CG好" src="images/grey.gif" data-original="images/thumb_1_206_353_20131120045112979302.jpg" width="206" height="353"></a>
</li>
</ul>
      </div>
            <div class="f_out style01">
      <ul>
  <li>
      <a class="mtitle" href="http://51qianduan.com/?yx/film/c1f557924.html" target="_blank" title="《金蝉脱壳》:史泰龙、阿诺硬汉组合">《金蝉脱壳》:史泰龙、阿诺硬汉组合</a>
    <a target="_blank" href="http://51qianduan.com/?yx/film/c1f557924.html"><img title="《金蝉脱壳》:史泰龙、阿诺硬汉组合" alt="《金蝉脱壳》:史泰龙、阿诺硬汉组合" src="images/grey.gif" data-original="images/thumb_1_256_353_20131023053132210.jpg" width="256" height="353"></a>
    </li>
  <li>
      <a class="mtitle" href="http://51qianduan.com/?yx/film/c1f542947.html" target="_blank" title="《雷神2:黑暗世界》:锤哥来袭">《雷神2:黑暗世界》:锤哥来袭</a>
    <a target="_blank" href="http://51qianduan.com/?yx/film/c1f542947.html"><img title="《雷神2:黑暗世界》:锤哥来袭" alt="《雷神2:黑暗世界》:锤哥来袭" src="images/grey.gif" data-original="images/thumb_1_256_353_20131018091517147.jpg" width="256" height="353"></a>
    </li>
  <li>
      <a class="mtitle" href="http://51qianduan.com/?yx/film/c1f602129.html" target="_blank" title="《地心引力》:走入外太空">《地心引力》:走入外太空</a>
    <a target="_blank" href="http://51qianduan.com/?yx/film/c1f602129.html"><img title="《地心引力》:走入外太空" alt="《地心引力》:走入外太空" src="images/grey.gif" data-original="images/thumb_1_256_353_20130830095719266.jpg" width="256" height="353"></a>
    </li>
</ul>
      </div>
            <div class="f_out style04">
      <div class="fr s_listbox">
  <p class="white_f">电影频道精彩推荐</p>
  <ul>
                                                      <li class="active"><a href="#foucs_01" data-evt="hover" data-toggle="tab">中国电影报道</a></li>
                                                                  <li class=""><a href="#foucs_02" data-evt="hover" data-toggle="tab">音乐之声</a></li>
                                                                  <li class=""><a href="#foucs_03" data-evt="hover" data-toggle="tab">光影星播客</a></li>
                                                                  <li class=""><a href="#foucs_04" data-evt="hover" data-toggle="tab">动感英语</a></li>
                                                                  <li class=""><a href="#foucs_05" data-evt="hover" data-toggle="tab">创意星空</a></li>
                  </ul>
  <p class="mt15 white_f underline line-h24"><a href="http://51qianduan.com/?cctv6/program/dypdepg/list/" target="_blank">查看完整节目单</a><a href="http://51qianduan.com/?cctv6/live/" class="ml20" target="_blank">进入直播厅</a><br/><a href="http://51qianduan.com/?cctv6/" class="" target="_blank">进入CCTV6</a></p>
</div>
<ul class="big_pc fl">
    <li class="active" id="foucs_01">
    <a class="mtitle" href="http://51qianduan.com/?video/play/706973.shtml" target="_blank" title="【电影报道325期精彩推荐】吴奇隆拒绝当“大叔” 谢娜恳求大家支持海涛">【电影报道325期精彩推荐】吴奇隆拒绝当“大叔” 谢娜恳求大家支持海涛<br/>播出时间:11月21日 17:56</a>
    <a class="" target="_blank" href="http://51qianduan.com/?video/play/706973.shtml"><img title="【电影报道325期精彩推荐】吴奇隆拒绝当“大叔” 谢娜恳求大家支持海涛" alt="【电影报道325期精彩推荐】吴奇隆拒绝当“大叔” 谢娜恳求大家支持海涛" src="images/grey.gif" data-original="images/thumb_1_563_353_20131121033628254783.jpg" width="563" height="353"></a>
  </li>
    <li class="" id="foucs_02">
    <a class="mtitle" href="http://51qianduan.com/?video/play/706922.shtml" target="_blank" title="【音乐之声47期精彩推荐】韩庚加盟《前任攻略》 翻唱《想你的夜》制造惊喜">【音乐之声47期精彩推荐】韩庚加盟《前任攻略》 翻唱《想你的夜》制造惊喜<br/>播出时间:11月21日 17:28</a>
    <a class="" target="_blank" href="http://51qianduan.com/?video/play/706922.shtml"><img title="【音乐之声47期精彩推荐】韩庚加盟《前任攻略》 翻唱《想你的夜》制造惊喜" alt="【音乐之声47期精彩推荐】韩庚加盟《前任攻略》 翻唱《想你的夜》制造惊喜" src="images/grey.gif" data-original="images/thumb_1_563_353_20131121015107972123.jpg" width="563" height="353"></a>
  </li>
    <li class="" id="foucs_03">
    <a class="mtitle" href="http://51qianduan.com/?video/play/705700.shtml" target="_blank" title="【光影星播客】朱丹担任光影星播客 “黑富美”为山区孩子送温暖">【光影星播客】朱丹担任光影星播客 “黑富美”为山区孩子送温暖<br/>播出时间:11月16日—11月22日 轮番播出</a>
    <a class="" target="_blank" href="http://51qianduan.com/?video/play/705700.shtml"><img title="【光影星播客】朱丹担任光影星播客 “黑富美”为山区孩子送温暖" alt="【光影星播客】朱丹担任光影星播客 “黑富美”为山区孩子送温暖" src="images/grey.gif" data-original="images/thumb_1_563_353_20131117093810321306.jpg" width="563" height="353"></a>
  </li>
    <li class="" id="foucs_04">
    <a class="mtitle" href="http://51qianduan.com/?video/play/705179.shtml" target="_blank" title="【动感英语】353期:朱利安·摩尔作品盘点 洛佩兹喜怀双胞胎">【动感英语】353期:朱利安·摩尔作品盘点 洛佩兹喜怀双胞胎<br/>电影网独播</a>
    <a class="" target="_blank" href="http://51qianduan.com/?video/play/705179.shtml"><img title="【动感英语】353期:朱利安·摩尔作品盘点 洛佩兹喜怀双胞胎" alt="【动感英语】353期:朱利安·摩尔作品盘点 洛佩兹喜怀双胞胎" src="images/grey.gif" data-original="images/thumb_1_563_353_20131121015531735483.jpg" width="563" height="353"></a>
  </li>
    <li class="" id="foucs_05">
    <a class="mtitle" href="http://51qianduan.com/?special/dianbo/cyxk/" target="_blank" title="《创意星空》第五季盛大启动 刘晓庆、高晓松现身">《创意星空》第五季盛大启动 刘晓庆、高晓松现身<br/>独家策划</a>
    <a class="" target="_blank" href="http://51qianduan.com/?special/dianbo/cyxk/"><img title="《创意星空》第五季盛大启动 刘晓庆、高晓松现身" alt="《创意星空》第五季盛大启动 刘晓庆、高晓松现身" src="images/grey.gif" data-original="images/thumb_1_563_353_20131119042015946672.jpg" width="563" height="353"></a>
  </li>
  </ul>
      </div>
            </div>
    </div>
    <div class="carousel-panel">
      <ul>
              <li class="item1">今日头条</li>
              <li class="item0">今日佳片</li>
              <li class="item2">焦点视频</li>
              <li class="item3">付费影院</li>
              <li class="item4">免费高清</li>
              <li class="item5">互动社区</li>
              <li class="item7">近期热映</li>
              <li class="item6">CCTV6</li>
            </ul>    
    </div>
  </div>
<div style="text-align:center;clear:both"><br>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 滚动切换 滑动选项卡切换 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 选项卡切换 滑动手风琴 滑动星星打分 图片文字 文字导航菜单 文字 其他更多 css绘制样式 文字标签 图片切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到