3D旋转木马--文字效果(源码)

                        html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 旋转木马3D文字效果</title>
<style type="text/css" media="screen">
#item {width:100px;
   height:100px;
   margin:0 auto;
   top:100px;
   left:100px;
   position: relative;
}
a {color:#FFFFFF;
}
ul {list-style-type: none;
}
body {background-color: #111;
   color: #69c;
   font-family: Arial, "MS Trebuchet", sans-serif;
   font-weight: bold;
   font-size:1em;
}
</style>
</head>
<body>
<div id="item">
  <ul>
    <li>website</li>
    <li>jQuery</li>
    <li>JavaScript</li>
    <li>HTML</li>
    <li>PHP</li>
    <li>3D</li>
    <li>Ajax</li>
    <li>CSS</li>
    <li>Design</li>
    <li>Flash</li>
    <li>Experimental</li>
    <li>Development</li>
    <li>web</li>
    <li>Tutorial</li>
    <li>ASP</li>
  </ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Ring.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
      //<![CDATA[

      $(document).ready(function() {

         var camera = new Camera3D();
         camera.init(0,0,0,300);

         var container = $("#item");

         var item = new Object3D(container);

         item.addChild(new Ring(200, $("#item ul li").length));

         var scene = new Scene3D();
         scene.addToScene(item);

         var mouseX,mouseY = 0;
         var offsetX = $("#item").offset().left;
         var offsetY = $("#item").offset().top;
         var speed = 6000;

         $().mousemove(function(e){
            mouseX = e.clientX - offsetX - (container.width() / 2);
            mouseY = e.clientY - offsetY - (container.height() / 2);
         });

         axisRotation.x = 1.5;

         var animateIt = function(){
            if (mouseX != undefined){
               axisRotation.y += (mouseX) / speed;
            }

            scene.renderCamera(camera);

         };

         setInterval(animateIt, 20);

         });
      //]]>
   </script>
</body>
</html>

                          3d js 部分

// 代码整理：懒人之家 lanrenzhijia.com
var DisplayObject3D = function(){
   return this;
};

DisplayObject3D.prototype._x = 0;
DisplayObject3D.prototype._y = 0;

//Create 3d Points
DisplayObject3D.prototype.make3DPoint = function(x,y,z) {
   var point = {};
   point.x = x;
   point.y = y;
   point.z = z;
   return point;
};

//Create 2d Points
DisplayObject3D.prototype.make2DPoint = function(x,y, depth, scaleFactor){
   var point = {};
   point.x = x;
   point.y = y;
   point.depth = depth;
   point.scaleFactor = scaleFactor;
   return point;
};

DisplayObject3D.prototype.container = undefined;
DisplayObject3D.prototype.pointsArray = [];

DisplayObject3D.prototype.init = function (container){

   this.container = $(container);
   this.containerId = this.container.attr("id");

   //if there isn't a ul than it creates a list of +'s
   if ($(container+":has(ul)").length === 0){
      for (i=0; i < this.pointsArray.length; i++){
         this.container.append('<b id="item'+i+'">+</b>');
      }
   }
}; 

/*
* DisplayObject3D End ----------------------------------------------
*/

/*
* Camera3D ----------------------------------------------
*/
var Camera3D = function (){};

Camera3D.prototype.x = 0;
Camera3D.prototype.y = 0;
Camera3D.prototype.z = 500;
Camera3D.prototype.focalLength = 1000;

Camera3D.prototype.scaleRatio = function(item){
   return this.focalLength/(this.focalLength + item.z - this.z);
};

Camera3D.prototype.init = function (x,y,z,focalLength){
   this.x = x;
   this.y = y;
   this.z = z;
   this.focalLength = focalLength;
};

/*
* Camera3D End ----------------------------------------------
*/
// 代码整理：懒人之家 lanrenzhijia.com

/*
* Object3D ----------------------------------------------
*/
var Object3D = function (container){
   this.container = $(container);
};

Object3D.prototype.objects = [];

Object3D.prototype.addChild = function (object3D){

   this.objects.push(object3D);

   object3D.init(this.container);

   return object3D;
};

/*
* Object3D End ----------------------------------------------
*/

// 代码整理：懒人之家 lanrenzhijia.com
/*
* Scene3D ----------------------------------------------
*/

var Scene3D = function (){};

Scene3D.prototype.sceneItems = [];
Scene3D.prototype.addToScene = function (object){
   this.sceneItems.push(object);
};

Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations,camera){
   var TransformedPointsArray = [];
   var sx = Math.sin(axisRotations.x);
   var cx = Math.cos(axisRotations.x);
   var sy = Math.sin(axisRotations.y);
   var cy = Math.cos(axisRotations.y);
   var sz = Math.sin(axisRotations.z);
   var cz = Math.cos(axisRotations.z);
   var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

   var i = points.length;

   while (i--){
      x = points[i].x;
      y = points[i].y;
      z = points[i].z;

      // rotation around x
      xy = cx*y - sx*z;
      xz = sx*y + cx*z;
      // rotation around y
      yz = cy*xz - sy*x;
      yx = sy*xz + cy*x;
      // rotation around z
      zx = cz*yx - sz*xy;
      zy = sz*yx + cz*xy;

      scaleFactor = camera.focalLength/(camera.focalLength + yz);
      x = zx*scaleFactor;
      y = zy*scaleFactor;
      z = yz;

      var displayObject = new DisplayObject3D();
      TransformedPointsArray[i] = displayObject.make2DPoint(x, y, -z, scaleFactor);
   }

   return TransformedPointsArray;
};

Scene3D.prototype.renderCamera = function (camera){

   for(var i = 0 ; i< this.sceneItems.length; i++){

      var obj = this.sceneItems[i].objects[0];

      var screenPoints = this.Transform3DPointsTo2DPoints(obj.pointsArray, axisRotation, camera);

      var hasList = (document.getElementById(obj.containerId).getElementsByTagName("ul").length > 0);

      for (k=0; k < obj.pointsArray.length; k++){
         var currItem = null;

         if (hasList){
            currItem = document.getElementById(obj.containerId).getElementsByTagName("ul")[0].getElementsByTagName("li")[k];
         }else{

            currItem = document.getElementById(obj.containerId).getElementsByTagName("*")[k];
         }

         if(currItem){
            currItem._x = screenPoints[k].x;
            currItem._y = screenPoints[k].y;
            currItem.scale = screenPoints[k].scaleFactor;

            currItem.style.position = "absolute";
            currItem.style.top = currItem._y+'px';
            currItem.style.left = currItem._x+'px';
            currItem.style.fontSize = 100*currItem.scale+'%';

            $(currItem).css({opacity:(currItem.scale-.5)});

         }

      }

   }
};

/*
* Scene3D End ----------------------------------------------
*/

// 代码整理：懒人之家 lanrenzhijia.com
//Center for rotation
var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

js 部分

// 代码整理：懒人之家 lanrenzhijia.com
var Ring = function (radius, numOfItems){

   for (var i = numOfItems - 1; i >= 0; i--)
   {
       var angle = i * Math.PI * 2 / numOfItems;

       var x =  Math.sin(angle) * radius;
        var y = Math.cos(angle) * radius;
        var z = 0;

        this.pointsArray.push(this.make3DPoint(x,y,z));
   }

};

Ring.prototype = new DisplayObject3D();

3D旋转木马--文字效果(源码)相关推荐

50个Android开发人员必备UI效果源码[转载]
Android 仿微信之主页面实现篇 Android 仿微信之界面导航篇 Android 高仿QQ 好友分组列表 Android 高仿QQ 界面滑动效果 Android 高仿QQ 登陆界面 Andro ...
50个Android开发人员必备UI效果源码
2019独角兽企业重金招聘Python工程师标准>>> Android 仿微信之主页面实现篇 Android 仿微信之界面导航篇 Android 高仿QQ 好友分组列表 Androi ...
jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
雨松MOMO《Unity 3D游戏开发》源码公布
原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:雨松MOMO<Unity 3D游戏开发>源码公布下载源码时,首先大家请登陆图灵社区找到<Unity 3D游戏开发 ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码...
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
css 视频播放列表,jquery结合CSS实现的多样式多视频列表连播效果源码
jquery结合CSS实现的多样式多视频列表连播效果源码是一段实现了右侧缩略图片+文字列表显示所有视频.右侧文字列表显示所有视频及底部缩略图片+文字列表显示所有视频三种样式的视频连播效果代码,本段代码 ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码... 1
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码
Android精选源码仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...
ios开发学习-手势交互（Gesture）效果源码分享
qianqianlianmeng ios开发学习-手势交互(Gesture)效果源码分享 All Around Pull View 介绍:实现视图四个方向(上下左右)都能够拖动更新(pull to r ...

3D旋转木马--文字效果(源码)

3D旋转木马--文字效果(源码)相关推荐

最新文章

热门文章