jQuery 學習筆記之十六 評分

單擊產品小圖片時，上面對應的大圖片需要切換，並且大圖片的放大鏡效果和遮罩效果也必須同時切換。 實現這個效果並不難，但為了使程式更加簡單，需要為圖片使用基於某種規則的命名。 例如為小圖片命名blue_one_small.jpg ,為大圖片命名為blue_one_big.jpg 這樣就可以很容易地根據單擊的圖片(blue_one.jpg)來擷取相應的大圖片和小圖片，代碼如下: $(funciton(){    $( ".pro_detail_left ul li img" ).click(function(){       var imgSrc=$( this ).attr( "src" );       var i = imgSrc.subString(i);       imgSrc = imgSrc.substring(0,i);       var imgsrc_small=imgsrc+ "_small" +unit;       var imgsrc_big  = imgSrc+ "_big" +unit;       $( "#bigImg" ).attr({ "src" :imgSrc_small, "jqimg" :imgsrc_big});       $( "#thickImg" ).attr( "href" ,imgSrc_big);    }); )}; 通過lastindex()方法，擷取到圖片檔案名稱中最後一個 "." 的位置，然後在substring() 方法中使用該位置來分隔檔案名稱，得到 "blue_one" 和 ".jpg" 兩部分，最後通過拼接 "_small" 和 "_big" 來得到相應的小圖片和大圖片，將它們賦給id為 "bigImg" 和id為 "thickImg" 的元素。   <div class = "pro_rating" >          給商品評分：      <ul class = "rating nostar" >   // 設定樣式      <li class = "one" ><a href= "#" title= "1分" >1</a></li>      <li class = "two" ><a href= "#" title= "2分" >2</a></li>      <li class = "three" ><a href= "#" title= "3分" >3</a></li>      <li class = "four" ><a href= "#" title= "4分" >4</a></li>      <li class = "five" ><a href= "#" title= "5分" >5</a></li> </ul>      /* 評分css */ .rating{      width:80px;      height:16px;      margin:0 0 20px 0;      padding:0;      list-style:none;      clear:both;      position:relative;      background: url(../images/star-matrix.gif) no-repeat 0 0; }   .nostar   {background-position:0 0} .onestar  {background-position:0 -16px} .twostar  {background-position:0 -32px} .threestar{background-position:0 -48px} .fourstar {background-position:0 -64px} .fivestar {background-position:0 -80px}   ul.rating li {      cursor: pointer;      float :left;      text-indent:-999em; } ul.rating li a {      position:absolute;      left:0;      top:0;      width:16px;      height:16px;      text-decoration:none;      z-index: 200; }  ul.rating li.one a {left:0} ul.rating li.two a {left:16px;} ul.rating li.three a {left:32px;} ul.rating li.four a {left:48px;} ul.rating li.five a {left:64px;} ul.rating li a:hover {      z-index:2;      width:80px;      height:16px;      overflow:hidden;      left:0;      background: url(../images/star-matrix.gif) no-repeat 0 0 }   ul.rating li.one a:hover {background-position:0 -96px;} ul.rating li.two a:hover {background-position:0 -112px;} ul.rating li.three a:hover {background-position:0 -128px} ul.rating li.four a:hover {background-position:0 -144px} ul.rating li.five a:hover {background-position:0 -160px}

出處：http://www.cnblogs.com/liuyong/