jquery仿百度经验滑动切换浏览效果


Posted in Javascript onApril 14, 2015

jquery仿百度经验滑动切换浏览效果

$(function() {
  wordStrong();
  $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length);
  $("#header .top_right .vote").hover(function() {
    $(this).children(".hover-tip").css("display", "block");
    $(this).children(".num").css("display", "none");  
  }, function() {
    $(this).children(".hover-tip").css("display", "none");
    $(this).children(".num").css("display", "block");  
  });
   
   
  $("#content .left, #content .right").width(($(document).width()-$("#content").width())/4);
  $("#content .left").css("left", -$("#content .left").width());
  $("#content .right").css("right", -$("#content .right").width());
   
  var showId = 0;
  $("#content span.left").hover(function() {
    if ( checkFirst() ) return ;
    $(this).css("cursor", "pointer");
    $(this).siblings(".sl").stop().animate({
      opacity:0.5 
    }); 
  }, function() {
    $(this).siblings(".sl").stop().animate({
      opacity:0
    }); 
  }).click(function() {
    if ( checkFirst() ) return ;
    showId --;
    $("#content").attr("showId", showId);
    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
    center(showId);
  });
   
  $("#content span.right").hover(function() {
    if ( checkLast() ) return ;
    $(this).css("cursor", "pointer");
    $(this).siblings(".sr").stop().animate({
      opacity:0.5
    }); 
  }, function() {
    $(this).siblings(".sr").stop().animate({
      opacity:0
    }); 
  }).click(function() {
    if ( checkLast() ) return ;  
    showId ++;   
    $("#content").attr("showId", showId);
    $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
    center(showId); 
  });
   
  function checkFirst() {
    if ( $("#content").attr("showId") == 0 ) {
      $("#content span.left").css("cursor", "default");
      return true;    
    }
    return false;
  }
   
  function checkLast() {
    if ( $("#content").attr("showId") == $("#content ul li").length-1 ) {
      $("#content span.right").css("cursor", "default");
      return true;    
    }
    return false;  
  }
     
  /* 首字母大写 */
  function wordStrong() {
    var liList = $("#content ul li");
    for (var j = 0; j < liList.length; j ++) {
      var pList = $("#content .cont_"+(j+1)+" .cont_word p");
      for (var i = 0; i < pList.length; i ++) {
        var p = pList.get(i);
        var pCont = $(p).html();    
        var s = $("<b>"+(i+1)+"</b>");
        s.css("font-size", "24px");   
        $(p).html('');
        s.appendTo(p);
        $(p).append(pCont.substring(1));    
      }
    }
  }  
   
  center(0);
   
  //相对li居中
  function center(liIndex) {
    var li = $("#content ul li").css("opacity", 0.3).eq(liIndex).css("opacity", 1);
    $("#content ul").animate({
      left: (-li.width()*liIndex)
    });
  }
   
  var footLen = $("#content ul li").length;
  var foots = $("#footer ul");
  for (var i = 1; i < footLen-1; i ++) {
    var childA = $("<a>").html(i);
    childA.attr("href", "#");
    $("<li>").append(childA).insertBefore(foots.children("[step=last]")).attr("step", i);   
  }
  foots.children(":last").attr("step", footLen-1);
  foots.css("left", ($(window).width()-foots.width())/2); 
  $("#footer li").click(function() {
    $("#footer ul li").children().removeClass("active");
    $(this).children().addClass("active");
    center($(this).attr("step"));
  });
   
  function myAddEvent(obj, e, fn) {
    if ( obj.attachEvent ) {
      obj.attachEvent('on'+e, fn);
    }else obj.addEventListener(e, fn, false);
  }
   
  function onMouseWheel(ev) { 
    var ev = ev||event;   
    //IE
    //wheelDelta  下滚:负, 上滚:下
    //alert(oEvent.wheelDelta);
    //FF
    //detail:  下滚:正, 上滚: 负
    //alert(oEvent.detail)   
    var bDown = true;
    if ( ev.wheelDelta ) {
      bDown = ev.wheelDelta<0;
    }else {
      bDown = ev.detail>0;
    }    
    if ( !bDown ) {
      if ( checkFirst() ) return ;
      showId --;     
    }
    else {
      if ( checkLast() ) return ;
      showId ++;     
    }
    $("#content").attr("showId", showId);
    $("#footer ul li").children().removeClass("active").end().eq(showId).children().addClass("active");
    center(showId);
    if ( oEvent.preventDefault ) {
      oEvent.preventDefault();
    }
    return false;
  }
   
  myAddEvent(window, 'mousewheel', onMouseWheel);
  myAddEvent(window, 'DOMMouseScroll', onMouseWheel);
});

以上所述就是本文给大家介绍的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
js日历功能对象
Jan 12 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
详解JS ES6编码规范
May 07 Javascript
jQuery获得子元素个数的方法
Apr 14 #Javascript
jQuery简单实现遍历数组的方法
Apr 14 #Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 #Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 #Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 #Javascript
JavaScript将字符串转换为整数的方法
Apr 14 #Javascript
使用javascript实现判断当前浏览器
Apr 14 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
初婚未育未抱养证明
2014/01/12 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
同学聚会策划方案
2014/06/06 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
党员检讨书
2014/10/13 职场文书
《雷雨》教学反思
2016/02/20 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL