分享一款基于jQuery 3D旋转明星人物展示特效。这是一款来自百度换肤活动的明星旋转展示效果。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div class="s-skin-wrap" data-d="">

  <div class="s-skin-inner">

    <div class="s-skin-content">

      <div class="s-star-wrap" id="s-skin-tshow">

        <div class="s-star-list" id="s-star-list">

          <ul style="padding: 0px; position: relative;" class="clearfix roundabout-holder">

            <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="林心如">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="郑爽">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="戚薇">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="佟丽娅">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="唐嫣">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="李冰冰">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="高圆圆">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="孙俪">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

            <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="姚晨">

              <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" onclick="return false;">换肤预览</a> </div>

            </li>

          </ul>

        </div>

      </div>

    </div>

  </div>

  <div id="rightArea" class="right-area">

    <div id="advertisement" class="ad-area"> </div>

  </div>

</div>

via：http://www.w2bc.com/article/53783

基于jQuery 3D旋转明星人物展示特效的更多相关文章

  1. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  2. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  3. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  5. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  6. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  7. jQuery 3D旋转展示焦点图

    在线演示 本地下载

  8. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

  9. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

随机推荐

  1. 南阳325----zb的生日

    //重量太大,用01背包容易超时 //数据只有20组.可以用dfs搜索最优解 #include<stdio.h> ]; int maxs,n,s; void dfs(int,int); i ...

  2. SpringBoot整合Mybatis完整详细版二：注册、登录、拦截器配置

    接着上个章节来,上章节搭建好框架,并且测试也在页面取到数据.接下来实现web端,实现前后端交互,在前台进行注册登录以及后端拦截器配置.实现简单的未登录拦截跳转到登录页面 上一节传送门:SpringBo ...

  3. [Web]flask-excel实现excel文件下载的前后端实现

    之前同事写了前端表格导出的功能, 前后端逻辑没有梳理, 导致后端代码十分臃肿. 接手之后, 重新选择了前端table插件, 从jqxGrid变更为bootstrapTable. 本来想依赖集成的tab ...

  4. 3.27模拟赛 sutoringu(后缀数组)

    \(\color{white}{mjt是机房模拟赛独自切过题的唯一的人...}\) (应本人要求删掉惹) \(Description\) 给你\(n,k\)和长为\(n\)的字符串\(s\).一个区间 ...

  5. 2004 ACM 成绩转换 两种方法

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2004 中文题目,简单题. 题意:将分数转换成ABC制 查表法 #include <stdio.h&g ...

  6. set_include_path和get_include_path用法详解

    首先set_include_path这个函数呢,是在脚本里动态地对PHP.ini中include_path进行修改的.而这个include_path呢,它可以针对下面的include和require的 ...

  7. Springboot2.x 启动报错：Bean named 'xxxService'... but was actually of type 'com.sun.proxy.$Proxy82'

    Springboot 2.0.5 搭建一个新项目启动后报错:Bean named 'xxxService'... but was actually of type 'com.sun.proxy.$Pr ...

  8. oracle 连接

    1.简述  1) 两个表的连接,是通过将一个表中的一列或者多列同另一个表中的列链接而建立起来的.用来连接两张表的表达式组成了连接条件.当连接成功后,第二张表中的数据就同第一张表连接起来了,并形成了复合 ...

  9. Sublime_SublimeServer

    1. 遇到问题:如下代码第17行,获取本地json文件,如果直接在浏览器中打开引用该文件的.html文件,在chrme浏览器中并不能读取到json文件. var vm=new Vue({ el:&qu ...

  10. GMA Round 1 函数求值

    传送门 函数求值 设函数$f(x)=x^{2018}+a_{2017}*x^{2017}+a_{2016}*x^{2016}+...+a_{2}*x^2+a_{1}*x+a_{0}$,其中$a_{0} ...