jquery实现淘宝按颜色选择产品特效

发表于2012-05-23 10:41:49来源于www.163css.net

次点击[] [] [] [打印] [关闭窗口] [评论]

欢迎大家加入创想工作室QQ群 网络瘫痪上不了网?电脑出故障?找破解软件?加入创想工作室QQ群,向大神求助,一步解决问题!QQ群号码:326338868[点此获取更多QQ群]

经常在网上购物的朋友,对这个功能一定非常熟悉,就是你在选择产品的时候,有一个按颜色选择的功能。这可以说是一个必不可少的功能,因为用户是有色彩偏好的。我们以淘宝商城为例子:

在这个页面中,当我选择了我白色的时候,淘宝给它加了一个对勾,还有红色的边框,在这里有一个CSS的小技巧,我是从淘宝上学的,我们先看下我们的HTML结构:

如果我们想要淘宝那样的红色边框,可以对li的position写为relative,接着写个padding:1px;这个估计是针对ie6的,其它就写border了,不得不承认,淘宝的CSS代码还是细致的,那个小色是通过一个i标签来实现的,这个值得我们学习。。。

对于淘宝是如何实现点击右侧小图实现左侧切换的,我也是无法理解,人家将代码写在background,但我们也要实现这样的功能。我们采用jquery,我们通过定义样式名的添加减少,实现图片的切换:

如果把这个定义为一个tab切换,其实也是对的。。。只不过代码写得不一样。。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用: jquery实现淘宝按颜色选择产品特效.zip

相关热词搜索:jquery淘宝特效

© copyright 2002-2024, 22BA.COM All Rights Reserved

网站备案号:粤ICP备19114910号

ChuangXiang Design Studio - WebDesign & Internet Marketing

关于我们业务范围联系我们开心一刻网站地图

QQ群一:326338868QQ群二:78712271

QQ群三:193078177

邮箱:news@22ba.com

地址:深圳市福田区金田路现代国际大厦2606