イメージHTMLを使用して共有ポイントでローテーションする

Question

共有ポイントコンテンツエディタのWebパーツでこのイメージを使用してイメージを回転しましたが、ここで動作しますが、共有ポイントでは動作しません。

Jsfiddle

コードサンプル

<img src="http://placekitten.com/100/100/" data-rotate="90"> 
<img src="http://placekitten.com/110/110/" data-rotate="45"> 
<img src="http://placekitten.com/120/120/"> 

<!-- or use CSS --> 
<img src="http://placekitten.com/130/130/" class="rotate90"> 

編集：私はテキストファイルに上記のコードを配置して、私の共有ポイントにそれをアップロードしています。私は新しいページを作成し、回転エフェクト付きの画像ファイルを表示するためにテキストファイルを配置したコンテンツエディタweb-part addを追加しました。

Answer 1

JsfiddleのコードをコンテンツエディタWebパーツに追加しました。これは非常にうまく動作します。私はすべてのコードを追加

• ：数に取るために

  <!-- HTML part --> 
  <img src="http://placekitten.com/100/100/" data-rotate="90" class="myClass"> 
  <img src="http://placekitten.com/110/110/" data-rotate="45" class="myClass"> 
  <img src="http://placekitten.com/120/120/"> 
  <img src="http://placekitten.com/130/130/" class="rotate90 myClass"> 
  
  <!-- JQuery reference --> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
  
  <!-- JS part --> 
  <script type="text/javascript"> 
      /* waits until all page elements are loaded */ 
      $(window).load(function() { 
       $('img.myClass').each(function() { 
        var deg = $(this).data('rotate') || 0; 
        var rotate = 'rotate(' + $(this).data('rotate') + 'deg)'; 
        $(this).css({ 
         '-webkit-transform': rotate, 
         '-moz-transform': rotate, 
         '-o-transform': rotate, 
         '-ms-transform': rotate, 
         'transform': rotate 
        }); 
       }); 
      }); 
  </script> 
  
  <!-- CSS part --> 
  <style type="text/css"> 
      img.myClass { 
       margin: 20px; 
       transition: all 400ms; /* duration is 400 miliseconds */ 
       transition-delay: 5s; /* starts after 5 seconds */ 
      } 
  
      /* or use CSS */ 
      .rotate90 { 
       -webkit-transform: rotate(90deg); 
       -moz-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
       -ms-transform: rotate(90deg); 
       transform: rotate(90deg); 
      } 
  </style> 
  

  いくつかのこと：ここで

  は（コメントに従って更新）私はCEWPに挿入された完全なコードです同じCEWPで
• Jsfiddleに含まれていなかったJQueryリファレンスを追加しました。そのページはバックグラウンドでロードされていたため、SharePointはマスターページに追加しない限り、デフォルトでは実行しません。
• CSSスタイルがあまりにも一般的で、CEWPの外にあってもページの他の要素に影響を与えていたため、img要素にクラス「myClass」を追加しました。

更新：

• は、すべてのページ要素がロードされた後、このように、必要な動作を確保、JavaScriptコードを実行するために、.LOAD $（ウィンドウ）を追加しました。
• 遷移遅延を追加しました。これにより、特定の秒数の後に移行を開始できます。