jQuery 学习笔记之十六评分

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moyiqun/archive/2013/06/06/3121196.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过点击小图自动切换对应大图及放大镜效果的方法，并展示了如何使用jQuery实现商品评分功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   单击产品小图片时，上面对应的大图片需要切换，并且大图片的放大镜效果和遮罩效果也必须同时切换。
  
   实现这个效果并不难，但为了使程序更加简单，需要为图片使用基于某种规则的命名。
  
   例如为小图片命名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}