zoukankan      html  css  js  c++  java
  • 乐蜂网宽屏左右滚动效果

    第一张图片:

    刚开始刷新时,图片显示的效果是这样,过了200秒之后,图片向左无间断的移动一个模特图片;当你鼠标移动上去的时候,会显示出另外一张模特说明的照片跟产品的名称跟价格

    如图:

    在模特身上有两个一直在闪动的点,当鼠标移动上去就会出现了白色框框说明的效果

    这个效果是一个非常不错的效果

    Javascript代码如下:


    $(function(){
      //乐峰宽屏滚动效果
      function scroll(){
        var _this=$("ul.hxScrollcnt li");
     var _ul=$("ul.hxScrollcnt");
     var first=_this.first();
     var last=_this.last();
     ul.animate({left:_this.eq(0).width()},300,function(){
           first.insertAfter(last);
        ul.css({left:0});
     });
      }
      var timeer=setInterval(scroll,2000);
      $("ul.hxScrollcnt li").hover(function(){
       clearInterval(timeer);
       $(this).find("img.start").hide().end().find("div.changepic").show();
      },function(){
         timeer=setInterval(scroll,2000);
      $(this).find("img.start").show().end().find("div.changepic").hide();
      }); 
      $(".btn").hover(function(){
          $(this).next(".hoverbox").show();
      },function(){
          $(this).next(".hoverbox").hide();
      });
      $(".hoverbox").hover(function(){
           $(this).show();
      },function(){
           $(this).hide();
      });

    });


    其中代码分享下载网址:http://yunpan.cn/QXSuiiuFRBNvD

  • 相关阅读:
    align 的用法
    layui 验证用法
    C# Post请求方法
    SQL 查询今天、昨天、7天内、30天的数据
    对Dijkstra名字发音的看法
    Ubuntu桌面图标消失且右键失效的解决办法
    Ubuntu下安装与配置Matlab
    ns 简单网络模拟
    JAVA包含第三方包的部署方法
    Ubuntu下配置ftp服务端
  • 原文地址:https://www.cnblogs.com/chenguiya/p/3279428.html
Copyright © 2011-2022 走看看