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基础资料整理3 正则
Dec 06 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
javascript cookie的简单应用
Feb 24 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
全国中波电台频率表
2020/03/11 无线电
3.从实例开始
2006/10/09 PHP
PHP制作图型计数器的例子
2006/10/09 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP安全下载文件的方法
2016/04/07 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
package.json中homepage属性的作用详解
2020/03/11 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
教师竞聘演讲稿
2014/05/16 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
sql server 累计求和实现代码
2022/02/28 SQL Server
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers