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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
介绍下Java的输入输出流
2014/01/22 面试题
实现向右循环移位
2014/07/31 面试题
益达广告词
2014/03/14 职场文书
标准版离职证明书
2014/09/12 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript