• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  仿迅雷看看横向拉伸正文

仿迅雷看看横向拉伸擦除滚动幻灯图片jQuery代码

作者:网页模板
大小:1.8MB
点击次数:
发布时间:2014-06-09 09:45
分享到:

特效介绍

仿迅雷看看横向拉伸擦除滚动幻灯图片jQuery代码,七屏,带大标题和副标题。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。

使用方法

1、在head区域引入5imoban.net.css文件。
2、把以下代码拷贝到你想引用的地方:
<div class="focus">
    <div class="focusbox">         
        <div class="focusimg">
        <ul class="fimglist clearfix">
            <li><a href="http://www.5imoban.net/"><img src="images/Gintama.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/SteinsGate.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/Unicorn.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/Berserk.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/SummerWars.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/akito.jpg" title="模板网"></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/EVA.jpg" title="模板网"></a></li>
        </ul>
        </div>
        <div class="focustool">
        <ul class="ftoollist clearfix"><!--通过控制该ul的left值来实现列表的左右移动,增量为931px-->
            <li class="on"><a href="http://www.5imoban.net/"><img src="images/Gintama_s.jpg"><p class="imgname">银魂剧场版</p><p class="imgshortcat">永远的万事屋</p></a></li><!--当前项时为该li添加class: on-->
            <li><a href="http://www.5imoban.net/"><img src="images/SteinsGate_s.jpg"><p class="imgname">石头门剧场版</p><p class="imgshortcat">负荷领域的既视感</p></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/Unicorn_s.jpg"><p class="imgname">高达UC</p><p class="imgshortcat">Gundam Unicorn</p></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/Berserk_s.jpg"><p class="imgname">剑风传奇</p><p class="imgshortcat">黄金时代</p></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/SummerWars_s.jpg"><p class="imgname">夏日大作战</p><p class="imgshortcat">Summer Wars</p></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/akito_s.jpg"><p class="imgname">亡国的阿基德</p><p class="imgshortcat">Code Geass</p></a></li>
            <li><a href="http://www.5imoban.net/"><img src="images/EVA_s.jpg"><p class="imgname">新EVA剧场版</p><p class="imgshortcat">New Evangelion</p></a></li>
        </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){
        $(".guidelist li").hover(
            function () {
                $(this).attr("class", "mouseon");
              },
              function () {
                $(this).attr("class", "mouseout");
              }
        );
        $(".ftoollist li").mouseover(function(){
            $(this).siblings().removeClass("on");
            $(this).addClass("on");
            var preNumber=$(this).prevAll().size();
            $(".fimglist li").removeClass("onpre");
            $(".fimglist li:nth-child("+preNumber+")").addClass("onpre");
            var margin = 990;
            margin = margin *preNumber;
            margin = margin * -1;
            $(".fimglist").stop().animate({marginLeft: margin + "px"}, {duration: 500});
        });
    });
</script>
  • 本文标签:
  • 幻灯图片jQuery代码
非常常见的js+flash图片滚动代码
HTML5+css3制作的超酷3D照片墙jQuery特效代码