jQuery 学习笔记之十六 评分
2011-04-01 14:35
405 查看
单击产品小图片时,上面对应的大图片需要切换,并且大图片的放大镜效果和遮罩效果也必须同时切换。 实现这个效果并不难,但为了使程序更加简单,需要为图片使用基于某种规则的命名。 例如为小图片命名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}
相关文章推荐
- jQuery 学习笔记之十六 评分
- learning jQuery 学习笔记十六(+jQuery 1.4.1 API)-- AJAX----$.get() & $.post()
- 我的Jquery学习笔记
- jQuery 学习笔记之十二 (选项卡)
- 黑马程序员--JQuery学习笔记
- 前端学习笔记-jquery-13-其他选择/过滤函数方法
- JQuery学习笔记(二):jQuery 效果
- Metro UI CSS 学习笔记之组件(进度条、按钮组和评分)
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
- jQuery学习笔记(2)---表格隔行变色
- jQuery学习笔记
- 学习笔记:基于jquery的tab切换函数
- Objective-C基础教程学习笔记(十六)键/值编码
- jquery 绘图工具 flot 学习笔记
- JQuery学习总结笔记1
- 【学习笔记】jQuery中$.get()和$.post()的用法
- jquery源码学习笔记
- jQuery学习笔记 —— 1. 选择器
- jquery 学习笔记(三)