jQuery的复习（4）

1.京东商品详情界面
这里可以参考B站的尚硅谷 web全栈工程师jQuery的最后一节视频，看起来很复杂，其实就是写的顺序问题，写的过程中打乱了顺序，从头写，挺好理解的，这里面有一个图片加载的问题，等下午下课回来继续写
下面的js代码给出来了
然后给一个完整的包
提取码是05p8

$(function () {
  /*
 1. 鼠标移入显示,移出隐藏
 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
 3. 输入搜索关键字, 列表显示匹配的结果
 4. 点击显示或者隐藏更多的分享图标
 5. 鼠标移入移出切换地址的显示隐藏
 6. 点击切换地址tab

 7. 鼠标移入移出切换显示迷你购物车
 8. 点击切换产品选项 (商品详情等显示出来)

 9. 点击向右/左, 移动当前展示商品的小图片
 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
 */

  /*
  1. 对哪个/些元素绑定什么监听?
  2. 对哪个/些元素进行什么DOM操作?
   */
  showhide()
  hoverSubMenu()
  seach()
  share()
  address()
  clickTabs()
  shoppingCar()
  clickProductTabs()
  moveMiniImg()
  hoverMiniImg()
  bigImg()
  // 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
  function bigImg() {
    var $mediumImg = $('#mediumImg')
    var $mask = $('#mask')//小黄块遮罩
    var $maskTop = $('#maskTop')
    var $largeImgContainer = $('#largeImgContainer')
    var $loding = $('#loading')
    var $largeImg = $('#largeImg')
    var maskWidth = $mask.width()
    var maskHeight = $mask.height()
    var maskTopWidth = $maskTop.width()
    var maskTopHeight = $maskTop.height()
    $maskTop.hover(function () {
      //显示小黄块
      $mask.show()
      //动态加载动图
      //取到中图的src  src="images/products/product-s1-m.jpg
      //大图src   src="images/products/product-s1-l.jpg
      var src = $mediumImg.attr('src').replace('-m.','-l.')
      $largeImg.attr('src',src)
      $largeImgContainer.show()
      // 这里有点疑惑  不是明白很清晰，这里是图片加载的问题
      //等下午上完课  这我再去想想，晚上回来补充
      $largeImg.on('load',function () {//大图加载完成
        //此时动态得到大图尺寸
        var largeWidth = $largeImg.width()
        var largeHeight = $largeImg.height()
        //给$largeImgContainer设置尺寸
        $largeImgContainer.css({
          width:largeWidth/2,
          height:largeHeight/2
        })
        $largeImg.show()//大图显示出来了
        $loding.hide()//加载出来loading要隐藏
        //绑定mouseMove监听
        $maskTop.mousemove(function (event) {//在移动过程中反复调用

          //鼠标移动要做两件事，移动小黄块和移动大图

          // 1.移动小黄块
          //计算出小黄块的left值和top值
          //这里鼠标的坐标减去小黄块的宽高一半，把这个值给小黄块，不就设置完成了么
          var left = 0
          var top = 0
          //事件坐标
          // offsetX：
          // 获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离
          // (确切的说是到边框外边界的距离)

          var eventleft =  event.offsetX
          var eventTop =  event.offsetY
          left = eventleft - maskWidth/2
          top =  eventTop - maskHeight/2
          console.log(left)
          //设置到这里，黄块会多出去，所以要限制范围
          //left在[0,maskTopWidth - maskWidth]
          // top在[0,maskTopHeight - maskHeight]
          if (left < 0){
            left = 0
          } else if(left > maskTopWidth - maskWidth){
            left = maskTopHeight - maskHeight
          }
          if (top < 0) {
            top = 0
          } else if(top >  maskTopHeight - maskHeight){
            top = maskTopHeight - maskHeight
          }
          $mask.css({
            left:left,
            top:top,
          })

          // 2.移动大图
          //得到大图坐标  这里的left值不会影响，当函数执行完，就释放了，
          // 再次调用函数又是从left=0开始算起，
          // 这和修改全局变量不同，这是生命在函数内部的
          left = -left * largeWidth/maskTopWidth
          top = -top * largeHeight/maskTopHeight
          $largeImg.css({
            left:left,
            top:top
          })
        })
      })

    },function () {
      $mask.hide()
      $largeImgContainer.hide()
      $largeImg.hide()
    })

  }
  // 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
  function hoverMiniImg() {
    $('#icon_list>li').hover(function () {
      var $img = $(this).children()
      $img.addClass('hoveredThumb')
      //显示对应的中图
      //attr('src')读取src属性
      //这里大图和小图的区别是：大图就多了个-m
      var src = $img.attr('src').replace('.jpg','-m.jpg')
      $('#mediumImg').attr('src',src)
    },function () {
      $(this).children().removeClass('hoveredThumb')
    })
  }
  // 9. 点击向右/左, 移动当前展示商品的小图片
  function moveMiniImg() {
    var $as = $('#preview>h1>a')
    var $backward = $as.first()
    var $forward = $as.last()
    //一次性看5个
    var SHOW_COUNT = 5
    var $ul = $('#icon_list')
    var imgCount = $ul.children('li').length
    var moveCount = 0//移动次数，向右为正，向左为负，这里指箭头不是图片
    var liWidth = $ul.children(':first').width()//每一次移动的宽度
    //初始化更新，为了一上来就变黑色箭头
    if(imgCount > SHOW_COUNT){
      $forward.attr('class','forward')
    }
    //向右按钮绑定点击监听
    $forward.click(function () {
      //判断是否可以移动？不需要直接结束
      //这里写到最后回头又想了下，如果只显示4个会不会出问题
      //感觉应该会出问题，但实际没人那样做。。
      if(moveCount === imgCount-SHOW_COUNT){
        return
      }
      moveCount++
      //更新向左的按钮
      $backward.attr('class','backward')
      //更新向右的按钮
      if (moveCount === imgCount-SHOW_COUNT){
        $forward.attr('class','forward_disabled')
      }
      //移动图片ul
      $ul.css('left',(-moveCount)*liWidth)
    })
    //给向左的按钮绑定监听
    $backward.click(function () {
      //判断是否可以移动？不需要直接结束
      if(moveCount === 0){
        return
      }
      moveCount--
      //更新向右的按钮
      $forward.attr('class','forward')
      //更新向左的按钮
      if (moveCount === 0){
        $backward.attr('class','backward_disabled')
      }
      //移动图片ul,这里不用改变负值，因为值从假如-120变到-60，ul不还是向右移动了么
      //移动的是ul，和轮播图一样
      $ul.css('left',-(moveCount)*liWidth)
    })
  }
  // 1. 鼠标移入显示,移出隐藏
  function showhide(){
    $('[name = show_hide]').hover(function () {//显示
      var id = this.id + '_items'
      $('#'+id).show()

    },function () {//隐藏
      var id = this.id + '_items'
      $('#'+id).hide()
    })
  }
  // 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
  function hoverSubMenu(){
    $('#category_items>div').hover(function () {
      $(this).children(':last').show()
    },function () {
      $(this).children(':last').hide()
    })
  }
  // 3. 输入搜索关键字, 列表显示匹配的结果
  function seach() {
    $('#txtSearch')
      .on('keyup focus',function () {
        var txt = this.value.trim()
        if(txt){
          $('#search_helper').show()
        }
      })
      .blur(function () {
        $('#search_helper').hide()

      })
  }
  // 4. 点击显示或者隐藏更多的分享图标?
  function share() {
    var isOpen = false
    var $shareMore = $('#shareMore')
    var $parent = $shareMore.parent()
    var $as = $shareMore.prevAll('a:lt(2)')
    var $b = $shareMore.children()
    $shareMore.click(function () {

      if (isOpen){
        $parent.css('width','155')
        $as.hide()
        $b.removeClass('backword')
      } else{
        $parent.css('width','200')
        $as.show()
        $b.addClass('backword')
      }
      isOpen = !isOpen
    })
  }
  /*
  5. 鼠标移入移出切换地址的显示隐藏
  */
  function address () {
    var $select = $('#store_select')

    $select.hover(function () {
      $(this).children(':gt(0)').show()
    }, function () {
      $(this).children(':gt(0)').hide()
    })
      .children(':last')
      .click(function () {
        // $(this).children(':gt(0)').hide()  // 不能用, this不对
        $select.children(':gt(0)').hide()
      })
  }
  /*
   6. 点击切换地址tab
   */
  function clickTabs() {
    $('#store_tabs>li').click(function () {
      $('#store_tabs>li').removeClass('hover')
      // $('#store_tabs>li').attr('class')
      this.className = 'hover'
      // $(this).addClass('hover')
    })
  }
  // 7. 鼠标移入移出切换显示迷你购物车
  function shoppingCar() {
    $('#minicart').hover(function () {
      $(this).children('div').show()
       // this.className = 'minicart'
      $(this).attr('class','minicart')
    },function () {
      $(this).children('div').hide()
      $(this).removeClass('minicart')
    })
  }

  // 8. 点击切换产品选项 (商品详情等显示出来)
  function clickProductTabs() {
     var $contents = $('#product_detail').children(':gt(1)')
    // var $contents = $('#product_detail>div:gt(0)')
    $('#product_detail>ul>li').click(function () {
       $('#product_detail>ul>li').removeClass('current')
      //这里有一些问题
      //$('#product_detail>ul>li')和$(this)不是一样的，如果写成this，
      // 只不过是在当前选择的li里移除增加class，没效果的，它会一直有那个class
      // $(this).removeClass('current')
      this.className = 'current'
      $contents.hide()
      var index = $(this).index() //同辈中的索引
      $contents.eq(index).show()
    })
  }

})