开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Internet/网络编程 > SilverLight > 查看源码
2_page.xaml.js
资源名称：3D.zip　[点击查看]
上传用户：apgaozhao
上传日期：2017-08-19
资源大小：126k
文件大小：17k
源码类别：

SilverLight

开发平台：

C#

2_page.xaml.js：源码内容
  1. if (!window.wpfhome_3Dturn)
  2. wpfhome_3Dturn = {};
  3. //<!--from slcenter.cn Silverlight开源中心-->
  4. wpfhome_3Dturn.Page = function() 
  5. {
  6. }
  7. var Infos=new Array(
  8. {"img":"images/1.jpg","link":"http://www.wpfhome.com","bigpic":"images/1.jpg","width":500,"height":500,"target":"_blank"},
  9. {"img":"images/2.jpg","link":"http://www.wpfhome.com","bigpic":"images/2.jpg","width":500,"height":500,"target":"_blank"},
  10. {"img":"images/3.jpg","link":"http://www.wpfhome.com","bigpic":"images/3.jpg","width":500,"height":500,"target":"_blank"},
  11. {"img":"images/4.jpg","link":"http://www.wpfhome.com","bigpic":"images/4.jpg","width":500,"height":500,"target":"_blank"},
  12. {"img":"images/5.jpg","link":"http://www.wpfhome.com","bigpic":"images/5.jpg","width":500,"height":500,"target":"_blank"},
  13. {"img":"images/6.jpg","link":"http://www.wpfhome.com","bigpic":"images/6.jpg","width":500,"height":500,"target":"_blank"},
  14. {"img":"images/7.jpg","link":"http://www.wpfhome.com","bigpic":"images/7.jpg","width":500,"height":500,"target":"_blank"},
  15. {"img":"images/1.jpg","link":"http://www.wpfhome.com","bigpic":"images/1.jpg","width":500,"height":500,"target":"_blank"},
  16. {"img":"images/2.jpg","link":"http://www.wpfhome.com","bigpic":"images/2.jpg","width":500,"height":500,"target":"_blank"},
  17. {"img":"images/3.jpg","link":"http://www.wpfhome.com","bigpic":"images/3.jpg","width":500,"height":500,"target":"_blank"},
  18. {"img":"images/4.jpg","link":"http://www.wpfhome.com","bigpic":"images/4.jpg","width":500,"height":500,"target":"_blank"},
  19. {"img":"images/5.jpg","link":"http://www.wpfhome.com","bigpic":"images/5.jpg","width":500,"height":500,"target":"_blank"},
  20. {"img":"images/6.jpg","link":"http://www.wpfhome.com","bigpic":"images/6.jpg","width":500,"height":500,"target":"_blank"},
  21. {"img":"images/7.jpg","link":"http://www.wpfhome.com","bigpic":"images/7.jpg","width":500,"height":500,"target":"_blank"}
  22. );
  23. var img_width=190,img_height=190,bezier=20,sl_width=900,sl_height=600;
  24. var boundLeft=50,boundRight=50,boundBottom=100,boundTop=50;
  25. var a_width=sl_width-img_width-(boundLeft+boundRight),//a_height=10;
  26. a_height=sl_height-img_height-(boundBottom+boundTop);//减法是边
  27. var OX=(sl_width-img_width-boundRight-boundLeft)/2,OY=(sl_height-img_height-boundBottom-boundTop)/2; //半径
  28. var nMaxSpeed=0.02;
  29. var nDX = 0;
  30. wpfhome_3Dturn.Page.prototype =
  31. {
  32.     handleLoad: function(sl_c, cc, root) {
  33.         this.sl_c = sl_c;
  34.         this.findName('bg_c').Source = 'bg.jpg';
  35.         this.findName('bg_c')["Canvas.Top"] = 0;
  36.         this.findName('bg_c')["Canvas.Left"] = 0;
  37.         this.findName('bg_c').Width = sl_width;
  38.         this.findName('bg_c').Height = sl_height;
  39.         this.findName("showMoreBtn").addEventListener("MouseEnter", function(s, e) { s.findName("showMore_btnOn").begin(); });
  40.         this.findName("showMoreBtn").addEventListener("MouseLeave", function(s, e) { s.findName("showMore_mouseOut").begin(); });
  41.         this.findName("showMoreBtn").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, function(s, e) {
  42.             s.findName("showMore_down").begin();
  43.             window.open(Infos[this.prevDownInfo.id].link, Infos[this.prevDownInfo.id].target);
  44.         }));
  45.         this.findName("ComeBackBtn").addEventListener("MouseEnter", function(s, e) { s.findName("hiddenBtn_On").begin(); });
  46.         this.findName("ComeBackBtn").addEventListener("MouseLeave", function(s, e) { s.findName("hiddenBtn_mouseOut").begin(); });
  47.         this.findName("ComeBackBtn").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.hiddenClick));
  48.         var centerCxaml = '<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="center_C" Canvas.Left="0" Canvas.Top="0">' +
  49. '<Canvas.Resources>';
  50.         var xaml = "";
  51.         for (var i = 0; i < Infos.length; i++) {
  52.             var obj = Infos[i];
  53.             xaml += '<Canvas Cursor="Hand" RenderTransformOrigin="0.5,0.5" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="imageItem' + i + '" Width="' + img_width + '" Height="' + img_height + '">' +
  54.  '<Canvas.Clip>' +
  55.   '<PathGeometry>' +
  56.         '<PathGeometry.Figures>' +
  57.           '<PathFigure StartPoint="0,' + bezier + '">' +
  58.             '<PathFigure.Segments>' +
  59.               '<BezierSegment ' +
  60.                 'Point1="0,0" ' +
  61.                 'Point2="' + bezier + ',0" ' +
  62.                 'Point3="' + bezier + ',0" />' +
  63. '<LineSegment Point="' + (img_width - bezier) + ',0" />' +
  64. '<BezierSegment ' +
  65.                 'Point1="' + (img_width - bezier) + ',0" ' +
  66.                 'Point2="' + (img_width) + ',0" ' +
  67.                 'Point3="' + (img_width) + ',' + bezier + '"/>' +
  68. '<LineSegment Point="' + (img_width) + ',' + (img_height - bezier) + '" />' +
  69. '<BezierSegment ' +
  70.                 'Point1="' + (img_width) + ',' + (img_height) + '" ' +
  71.                 'Point2="' + (img_width) + ',' + (img_height) + '" ' +
  72.                 'Point3="' + (img_width - bezier) + ',' + (img_height) + '"/>' +
  73. '<LineSegment Point="' + bezier + ',' + (img_height) + '" />' +
  74. '<BezierSegment ' +
  75.                 'Point1="0,' + (img_height) + '" ' +
  76.                 'Point2="0,' + (img_height) + '" ' +
  77.                 'Point3="0,' + (img_height - bezier) + '"/>' +
  78. '<LineSegment Point="0,' + bezier + '" />' +
  79.             '</PathFigure.Segments>' +
  80.           '</PathFigure>' +
  81.         '</PathGeometry.Figures>' +
  82.       '</PathGeometry>' +
  83.   '</Canvas.Clip>' +
  84. '<Canvas.Resources>' +
  85.    '<Storyboard x:Name="imageItem_hover' + i + '">' +
  86. '<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imageItemShow' + i + '" Storyboard.TargetProperty="(UIElement.Opacity)">' +
  87. '<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.865"/>' +
  88. '<SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>' +
  89. '</DoubleAnimationUsingKeyFrames>' +
  90. '</Storyboard>' +
  91. '<Storyboard x:Name="imateItem_out' + i + '">' +
  92. '<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imageItemShow' + i + '" Storyboard.TargetProperty="(UIElement.Opacity)">' +
  93. '<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" KeySpline="0,1,1,1"/>' +
  94. '</DoubleAnimationUsingKeyFrames>' +
  95. '</Storyboard>' +
  96. '</Canvas.Resources>' +
  97. '<Canvas.RenderTransform>' +
  98. '<TransformGroup>' +
  99. '<ScaleTransform ScaleX="1" ScaleY="1" x:Name="imageItem' + i + '_scale"/>' +
  100. '<TranslateTransform X="0" Y="0"/>' +
  101. '</TransformGroup>' +
  102. '</Canvas.RenderTransform>' +
  103.  '<Image x:Name="image' + i + '" Source="' + obj.img + '" Stretch="Fill" Width="' + img_width + '" Height="' + img_height + '">' +
  104. '</Image>' +
  105. '<Rectangle Width="' + img_width + '" Height="' + img_height + '" Fill="#FFFFFFFF" Canvas.Left="0" Canvas.Top="0" Opacity="0" x:Name="imageItemShow' + i + '"/>' +
  106.  '</Canvas>';
  107.             centerCxaml += '<Storyboard x:Name="ScaleShow' + i + '" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">' +
  108. '<DoubleAnimationUsingKeyFrames x:Name="ScaleShow_X' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">' +
  109. '<SplineDoubleKeyFrame x:Name="ScaleShow_X_V' + i + '" KeyTime="00:00:00.8000000" Value="0"/>' +
  110. '</DoubleAnimationUsingKeyFrames>' +
  111. '<DoubleAnimationUsingKeyFrames x:Name="ScaleShow_Y' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">' +
  112. '<SplineDoubleKeyFrame x:Name="ScaleShow_Y_V' + i + '" KeyTime="00:00:00.8000000" Value="0"/>' +
  113. '</DoubleAnimationUsingKeyFrames>' +
  114. '<DoubleAnimationUsingKeyFrames x:Name="TransShow_X' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)">' +
  115. '<SplineDoubleKeyFrame x:Name="TransShow_X_V' + i + '" KeyTime="00:00:00.6000000" KeySpline="0.608,0.029,1,1" Value="0"/>' +
  116. '</DoubleAnimationUsingKeyFrames>' +
  117. '<DoubleAnimationUsingKeyFrames x:Name="TransShow_Y' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)">' +
  118. '<SplineDoubleKeyFrame x:Name="TransShow_Y_V' + i + '" KeyTime="00:00:00.6000000" KeySpline="0.608,0.029,1,1" Value="0"/>' +
  119. '</DoubleAnimationUsingKeyFrames>' +
  120. '<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" x:Name="OpacityShow' + i + '" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.Opacity)">' +
  121. '<SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1" x:Name="OpacityShow_V' + i + '"/>' +
  122. '</DoubleAnimationUsingKeyFrames>' +
  123. '</Storyboard>' +
  125. '<Storyboard x:Name="ScaleHidden' + i + '" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">' +
  126. '<DoubleAnimationUsingKeyFrames x:Name="ScaleHidden_X' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">' +
  127. '<SplineDoubleKeyFrame x:Name="ScaleHidden_X_V' + i + '" KeyTime="00:00:01.0000000" Value="0"/>' +
  128. '</DoubleAnimationUsingKeyFrames>' +
  129. '<DoubleAnimationUsingKeyFrames x:Name="ScaleHidden_Y' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">' +
  130. '<SplineDoubleKeyFrame x:Name="ScaleHidden_Y_V' + i + '" KeyTime="00:00:01.0000000" Value="0"/>' +
  131. '</DoubleAnimationUsingKeyFrames>' +
  132. '<DoubleAnimationUsingKeyFrames x:Name="TransHidden_X' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)">' +
  133. '<SplineDoubleKeyFrame x:Name="TransHidden_X_V' + i + '" KeyTime="00:00:01.0000000" KeySpline="0.608,0.029,1,1" Value="0"/>' +
  134. '</DoubleAnimationUsingKeyFrames>' +
  135. '<DoubleAnimationUsingKeyFrames x:Name="TransHidden_Y' + i + '" BeginTime="00:00:00" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)">' +
  136. '<SplineDoubleKeyFrame x:Name="TransHidden_Y_V' + i + '" KeyTime="00:00:01.0000000" KeySpline="0.608,0.029,1,1" Value="0"/>' +
  137. '</DoubleAnimationUsingKeyFrames>' +
  138. '<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" x:Name="OpacityHidden' + i + '" Storyboard.TargetName="imageItem' + i + '" Storyboard.TargetProperty="(UIElement.Opacity)">' +
  139. '<SplineDoubleKeyFrame KeyTime="00:00:01.0000000" Value="1" x:Name="OpacityHidden_V' + i + '"/>' +
  140. '</DoubleAnimationUsingKeyFrames>' +
  141. '</Storyboard>';
  142.         }
  143.         centerCxaml += '</Canvas.Resources>' + xaml +
  144. '<Rectangle Width="392" Height="401" Fill="#FFFFFFFF" Opacity="0.58" Canvas.Left="-' + OX + '" Canvas.Top="' + (-OY) + '" Visibility="Collapsed" Canvas.ZIndex="99999" x:Name="top_window_bg">' +
  145. '</Rectangle>' +
  146. '</Canvas>';
  147.         var centerC = sl_c.content.createFromXaml(centerCxaml);
  148.         root.Children.Add(centerC);
  149.         this.findName('top_window_bg').Width = sl_width;
  150.         this.findName('top_window_bg').Height = sl_height;
  151.         centerC.setValue("Canvas.Top", OY);  //动画中心
  152.         centerC.setValue("Canvas.Left", OX);  //动画中心
  154.         for (var i = 0; i < Infos.length; i++) {
  155.             var obj = Infos[i];
  156.             obj.c = this.findName("imageItem" + i);
  157.             obj.c.addEventListener("MouseEnter", Silverlight.createDelegate(this, function(s, e) {
  158.                 this.mouseOver = true;
  159.                 if (!this.clicked) {
  160.                     var id = s.name.substr(9, s.name.length - 9);
  161.                     this.findName("imageItem_hover" + id).begin();
  162.                     this.findName("a_d").stop();
  163.                 }
  164.             }));
  165.             obj.c.addEventListener("MouseLeave", Silverlight.createDelegate(this, function(s, e) {
  166.                 if (this.mouseOver && !this.clicked) {
  167.                     var id = s.name.substr(9, s.name.length - 9);
  168.                     this.findName("imateItem_out" + id).begin();
  169.                     this.findName("a_d").begin();
  170.                 }
  171.                 this.mouseOver = false;
  172.             }));
  173.             this.findName("ScaleHidden" + i).addEventListener("Completed", Silverlight.createDelegate(this, function(s, e) {
  174.                 var id = parseInt(s.name.substr(11, s.name.length - 11));
  175.                 this.clicked = false;
  176.                 var obj = Infos[id];
  177.                 obj.c["Canvas.ZIndex"] = this.prevDownInfo.ZIndex;
  178.                 this.findName("image" + id).Source = this.prevDownInfo.img;
  179.                 this.prevDownInfo = null;
  180.                 if (!this.mouseOver)
  181.                     this.playAnimation();
  182.             }));
  183.             obj.c.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, function(s, e) {
  184.                 if (!this.clicked) {
  185.                     this.clicked = true;
  186.                     var id = parseInt(s.name.substr(9, s.name.length - 9));
  188.                     var obj = Infos[id];
  189.                     var image = this.findName("image" + id), image_scale = this.findName('imageItem' + id + '_scale');
  190.                     var pic_btns = this.findName("pic_btns");
  191.                     this.prevDownInfo = { "ZIndex": s["Canvas.ZIndex"], "Left": s["Canvas.Left"], "Top": s["Canvas.Top"], "img": image.Source, "w": s.Width, "h": s.Height, "sx": image_scale.ScaleX, "sy": image_scale.ScaleY, "id": id, "opacity": s.Opacity };
  192.                     image.Source = obj.bigpic;
  193.                     var sx = obj.width / image.width;
  194.                     var sy = obj.height / image.height;
  195.                     this.findName("ScaleShow_X_V" + id).Value = sx;
  196.                     this.findName("ScaleShow_Y_V" + id).Value = sy;
  197.                     var bestX = (sl_width / 2) - (img_width / 2) - OX;
  198.                     var bestY = (sl_height / 2) - (img_height / 2) - OY;
  199.                     this.findName("TransShow_X_V" + id).Value = bestX - s["Canvas.Left"];
  200.                     this.findName("TransShow_Y_V" + id).Value = bestY - s["Canvas.Top"];
  201.                     this.findName("OpacityShow_V" + id).Value = 1;
  202.                     this.findName("ScaleShow" + id).begin();
  203.                     s["Canvas.ZIndex"] = this.findName("top_window_bg")["Canvas.ZIndex"] + 100;
  204.                     this.findName("top_window_bg").Visibility = "Visible";
  205.                     pic_btns.Visibility = "Visible";
  206.                     pic_btns["Canvas.ZIndex"] = s["Canvas.ZIndex"] + 1;
  207.                 } else {
  209.                 }
  210.             }));
  211.         }
  213.         this.amount = 0.0;
  214.         this.pace = 0.01;
  215.         this.duration = 2;
  216.         this.findName("a_d").addEventListener("Completed", Silverlight.createDelegate(this, this.playAnimation));
  217.         this.playAnimation();
  218.     },
  219.     findName: function(n) {
  220.         return this.sl_c.content.findName(n);
  221.     },
  222.     hiddenClick: function(s, e) {
  223.         s.findName("hiddenBtn_down").begin();
  224.         if (this.clicked) {
  225.             var id = this.prevDownInfo.id;
  226.             var obj = Infos[id];
  227.             var pic_btns = this.findName("pic_btns");
  228.             this.findName("ScaleHidden_X_V" + id).Value = this.prevDownInfo.sx;
  229.             this.findName("ScaleHidden_Y_V" + id).Value = this.prevDownInfo.sy;
  230.             this.findName("TransHidden_X_V" + id).Value = 0;
  231.             this.findName("TransHidden_Y_V" + id).Value = 0;
  232.             this.findName("OpacityHidden_V" + id).Value = this.prevDownInfo.opacity;
  233.             this.findName("top_window_bg").Visibility = "Collapsed";
  234.             pic_btns.Visibility = "Collapsed";
  235.             this.findName("ScaleHidden" + id).begin();
  236.         }
  238.     },
  239.     playAnimation: function() {
  240.         var nPer = (240 - a_width) / a_height;
  241.         nDX += nMaxSpeed * nPer;
  242.         var h = "";
  243.         for (var i = 0; i < Infos.length; i++) {
  244.             var objThis = this.findName("imageItem" + i);
  245.             var nFactor_x = (2 * Math.PI) * (i / Infos.length) + nDX;
  246.             var nFactor_c = (OX) * Math.cos(nFactor_x) + boundLeft;
  247.             var nFactor_s = (OY) * Math.sin(nFactor_x) + boundTop;
  248.             objThis.setValue("Canvas.Left", nFactor_c);
  249.             objThis.setValue("Canvas.Top", nFactor_s);
  250.             var nCurZIndex = Math.floor(objThis.getValue("Canvas.Top"));
  251.             objThis.setValue("Canvas.ZIndex", nCurZIndex);
  252.             var nPerY = (objThis.getValue("Canvas.Top") - boundTop + OY) / (a_height);
  253.             var nNewOpacity = 0.3 + (0.7 * nPerY);
  254.             objThis.setValue("Opacity", nNewOpacity);
  255.             var nCurScale = 0.3 + ((1 - 0.3) * nPerY);
  256.             //(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)
  257.             //var oCurScale = objThis.findName('imageItem' + i + '_scale');
  258.             var oCurScale = objThis.findName('imageItem' + i).RenderTransform.Children.getItem(0);
  259.             oCurScale.setValue("ScaleX", nCurScale);
  260.             oCurScale.setValue("ScaleY", nCurScale);
  261.         }
  262.         this.findName('a_d').begin();
  263.     }
  264. }