Jquery小练习Jquery小练习一、星星评分效果思路：(1)iconfond找到两个星星（空心、实星）(2)let一

Jquery小练习

一、星星评分效果

思路：

(1) iconfond找到两个星星（空心、实星）

(2) let 一个量确定你需要几个星星 (let count = 10) 进行循环 for (let i = 0; i < count; i++)

(3) 将星星添加到body/div里 let star = $('<i/>').addClass('iconfont star')$ ('.container').append(star)

(4) 初始可能需要几个实心的星星判断一下初始的星星

（let score=5）添加至body/div里

     if(i<score){
         }else{
             star.addClass('icon-star1')
         }

初始已经完成初始步骤

2.1 鼠标事件 mouseenter

让鼠标碰到星星就有高亮效果 $('.star').mouseenter(function(){

         let index = $(this).index()
        //    console.log(i)
        for (let i = 0; i < count; i++) {   //循环10次，拿到i
           if(i<=index){                    
               $('.star').eq(i).addClass('icon-start-copy').removeClass('icon-star1')
           }else{
               $('.star').eq(i).addClass('icon-star1')
           }
            
        }
      }

2.2 鼠标离开事件 mouseleave

当鼠标离开的时候就回复初始

$('.star').mouseleave(function(){ //当鼠标离开时候恢复到初始值

        //    console.log(i)
        for (let i = 0; i < count; i++) {   //循环10次，拿到i
           if(i < score){                    
               $('.star').eq(i).addClass('icon-start-copy').removeClass('icon-star1')
           }else{
               $('.star').eq(i).addClass('icon-star1')
           }
            
        }
      })

2.3 鼠标点击数件 onclick

当鼠标点击时候就将点击的时候就确定实心的星星

  $('.star').click(function(){

          score = $(this).index()+1
          
      })

二、简单QQ下拉框框 1、 CSS列表格式如下

穿越火线
- 幻影
- 复仇者
- 堕天使
- 潘多拉

思路：（1）：先获取 li的list属性设置鼠标点击事件

$('.menu>li .title').click(function(){

点击就收起，再次点击就下拉

list.toggle(100) // 帮助切换，如果显示就是隐藏，如果隐藏就显示 toggle（） //list.slideToggle() 卷帘门效果

toggle（）怎么来的代码如下

function toggle(){
if(this.css('display')==='none') this.show() else this.hide() }

三：整个屏幕翻页效果注意点：鼠标滚轮事件

 //适配火狐      window.addEventListener('DOMMouseScroll',function(e){

//适合谷歌的事件 window.onmousewheel=function(e){

代码如下

             endTime = new Date()
          }
          
      }