EN中文
开发者社区 > 程序

基于jQuery 3D旋转明星人物展示特效

发表于2015-07-31
评论0 1.1k浏览
　　摘要: 分享一款基于jQuery 3D旋转明星人物展示特效。这是一款来自百度换肤活动的明星旋转展示效果。
　　分享一款基于jQuery 3D旋转明星人物展示特效。这是一款来自百度换肤活动的明星旋转展示效果。效果图如下：

12.jpg

　　实现的代码

　　html代码：
  1. <div class="s-skin-wrap" data-d="">
  2. <div class="s-skin-inner">
  3. <div class="s-skin-content">
  4. <div class="s-star-wrap" id="s-skin-tshow">
  5. <div class="s-star-list" id="s-star-list">
  6. <ul style="padding: 0px; position: relative;" class="clearfix roundabout-holder">
  7. <li data-scale="0.7509" style="position: absolute; left: -37px; top: 129px; z-index: 3; transform: scale(0.7509); opacity: 0.75;" class="s-star-item s-star-p1 roundabout-moveable-item" data-index="0" data-starid="1016" data-starname="林心如"> <img src="info/413.png" alt="林心如">
  8. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1016" data-log="skinPreview" data-logparam="starId=1016">林心如</span> <a href="#" class="s-star-preview" data-starid="1016" data-log="skinPreview" data-logparam="starId=1016" noxss="return false;">换肤预览</a> </div>
  9. </li>
  10. <li data-scale="0.6463" style="position: absolute; left: 88px; top: 101px; z-index: 1; transform: scale(0.6463); opacity: 0.65;" class="s-star-item s-star-p2 roundabout-moveable-item" data-index="1" data-starid="1018" data-starname="郑爽"> <img src="info/416.png" alt="郑爽">
  11. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1018" data-log="skinPreview" data-logparam="starId=1018">郑爽</span> <a href="#" class="s-star-preview" data-starid="1018" data-log="skinPreview" data-logparam="starId=1018" noxss="return false;">换肤预览</a> </div>
  12. </li>
  13. <li data-scale="0.6004" style="position: absolute; left: 294px; top: 89px; z-index: 1; transform: scale(0.6004); opacity: 0.6;" class="s-star-item s-star-p3 roundabout-moveable-item" data-index="2" data-starid="1020" data-starname="戚薇"> <img src="info/414.png" alt="戚薇">
  14. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1020" data-log="skinPreview" data-logparam="starId=1020">戚薇</span> <a href="#" class="s-star-preview" data-starid="1020" data-log="skinPreview" data-logparam="starId=1020" noxss="return false;">换肤预览</a> </div>
  15. </li>
  16. <li data-scale="0.6308" style="position: absolute; left: 502px; top: 97px; z-index: 1; transform: scale(0.6308); opacity: 0.63;" class="s-star-item s-star-p4 roundabout-moveable-item" data-index="3" data-starid="1017" data-starname="佟丽娅"> <img src="info/417.png" alt="佟丽娅">
  17. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1017" data-log="skinPreview" data-logparam="starId=1017">佟丽娅</span> <a href="#" class="s-star-preview" data-starid="1017" data-log="skinPreview" data-logparam="starId=1017" noxss="return false;">换肤预览</a> </div>
  18. </li>
  19. <li data-scale="0.7257" style="position: absolute; left: 631px; top: 122px; z-index: 2; transform: scale(0.7257); opacity: 0.73;" class="s-star-item s-star-p5 angelababy roundabout-moveable-item" data-index="4" data-starid="1012" data-starname="Angelababy"> <img src="info/410.png" alt="Angelababy">
  20. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1012" data-log="skinPreview" data-logparam="starId=1012">Angelababy</span> <a href="#" class="s-star-preview" data-starid="1012" data-log="skinPreview" data-logparam="starId=1012" noxss="return false;">换肤预览</a> </div>
  21. </li>
  22. <li data-scale="0.8491" style="position: absolute; left: 634px; top: 155px; z-index: 3; transform: scale(0.8491); opacity: 0.85;" class="s-star-item s-star-p6 roundabout-moveable-item" data-index="5" data-starid="1019" data-starname="唐嫣"> <img src="info/413.png" alt="唐嫣">
  23. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1019" data-log="skinPreview" data-logparam="starId=1019">唐嫣</span> <a href="#" class="s-star-preview" data-starid="1019" data-log="skinPreview" data-logparam="starId=1019" noxss="return false;">换肤预览</a> </div>
  24. </li>
  25. <li data-scale="0.9537" style="position: absolute; left: 508px; top: 182px; z-index: 5; transform: scale(0.9537); opacity: 0.95;" class="s-star-item s-star-p7 roundabout-moveable-item" data-index="6" data-starid="1011" data-starname="李冰冰"> <img src="info/416.png" alt="李冰冰">
  26. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1011" data-log="skinPreview" data-logparam="starId=1011">李冰冰</span> <a href="#" class="s-star-preview" data-starid="1011" data-log="skinPreview" data-logparam="starId=1011" noxss="return false;">换肤预览</a> </div>
  27. </li>
  28. <li data-scale="0.9996" style="position: absolute; left: 302px; top: 194px; z-index: 5; transform: scale(0.9996); opacity: 1;" class="s-star-item s-star-p8 roundabout-moveable-item roundabout-in-focus" data-index="7" data-starid="1013" data-starname="高圆圆"> <img src="info/417.png" alt="高圆圆">
  29. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1013" data-log="skinPreview" data-logparam="starId=1013">高圆圆</span> <a href="#" class="s-star-preview" data-starid="1013" data-log="skinPreview" data-logparam="starId=1013" noxss="return false;">换肤预览</a> </div>
  30. </li>
  31. <li data-scale="0.9692" style="position: absolute; left: 95px; top: 186px; z-index: 5; transform: scale(0.9692); opacity: 0.97;" class="s-star-item s-star-p9 roundabout-moveable-item" data-index="8" data-starid="1014" data-starname="孙俪"> <img src="info/410.png" alt="孙俪">
  32. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1014" data-log="skinPreview" data-logparam="starId=1014">孙俪</span> <a href="#" class="s-star-preview" data-starid="1014" data-log="skinPreview" data-logparam="starId=1014" noxss="return false;">换肤预览</a> </div>
  33. </li>
  34. <li data-scale="0.8743" style="position: absolute; left: -35px; top: 161px; z-index: 4; transform: scale(0.8743); opacity: 0.87;" class="s-star-item s-star-p10 roundabout-moveable-item" data-index="9" data-starid="1015" data-starname="姚晨"> <img src="info/418.png" alt="姚晨">
  35. <div class="s-star-label clearfix"> <span class="s-star-name" data-starid="1015" data-log="skinPreview" data-logparam="starId=1015">姚晨</span> <a href="#" class="s-star-preview" data-starid="1015" data-log="skinPreview" data-logparam="starId=1015" noxss="return false;">换肤预览</a> </div>
  36. </li>
  37. </ul>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <div id="rightArea" class="right-area">
  43. <div id="advertisement" class="ad-area"> </div>
  44. </div>
  45. </div>
 

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

游戏开发HTML5jQueryList