API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 15th, 2014
212
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 16.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <title>banner</title>
  6.   <meta name="description" content="" />
  7.   <style type="text/css">
  8.     html,
  9.     body {
  10.       height: 100%;
  11.       width: 100%;
  12.       margin: 0;
  13.       padding: 0;
  14.       font-size: 16px;
  15.       font-family: Arial, sans-serif;
  16.       cursor: pointer;
  17.     }
  18.  
  19.     a,
  20.     img {
  21.       text-decoration: none;
  22.       border: none;
  23.     }
  24.  
  25.     #frame {
  26.       position: relative;
  27.       width: 238px;
  28.       height: 398px;
  29.       border: 1px solid #A6A8AA;
  30.       overflow: hidden;
  31.       font-family: Calibri, calibriregular,Carlito,'PT Sans','VL Gothic',sans-serif;
  32.     /*  -moz-user-select: none;
  33.       -khtml-user-select: none;
  34.       -webkit-user-select: none;
  35.       -o-user-select: none;
  36.     -ms-user-select: none; */
  37.     }
  38.  
  39.     #segmento-logo {
  40.       position: absolute;
  41.       bottom: 3px;
  42.       right: 5px;
  43.       z-index: 10;
  44.     }
  45.  
  46.     #logo_box {
  47.       width: 238px;
  48.       height: 50px;
  49.       margin: 0 auto;
  50.       text-align: center;
  51.       line-height: 50px;
  52.     }
  53.  
  54.     #logo {
  55.       max-width: 220px;
  56.       max-height: 48px;
  57.       vertical-align: middle;
  58.     }
  59.  
  60.     #viewport {
  61.       width: 238px;
  62.       height: 285px;
  63.       overflow: hidden;
  64.       margin: auto;
  65.       position: relative;
  66.     }
  67.  
  68.     .product-image-box {
  69.       width: 220px;
  70.       height: 260px;
  71.       position: absolute;
  72.       visibility: hidden;
  73.       text-align: center;
  74.       line-height: 250px;
  75.       margin: auto;
  76.       overflow: hidden;
  77.       padding-left: 9px;
  78.       padding-right: 9px;
  79.     }
  80.  
  81.     .product-image {
  82.       width: 7920px;
  83.       height: 311px;
  84.       margin: auto;
  85.       margin-top: -55px;
  86.       vertical-align: top;
  87.       visibility: hidden;
  88.     }
  89.  
  90.     .product-data {
  91.       width: 120px;
  92.       height: 100px;
  93.       position: absolute;
  94.       visibility: hidden;
  95.       text-align: center;
  96.       padding-top: 10px;
  97.       padding-left: 5px;
  98.       padding-right: 5px;
  99.       z-index: 5;
  100.     }
  101.  
  102.     .name {
  103.       width: 100%;
  104.       text-align: center;
  105.       position: relative;
  106.       font-size: 16px;
  107.       color: #000;
  108.       font-weight: bold;
  109.     }
  110.  
  111.     .price {
  112.       width: 100%;
  113.       position: relative;
  114.       font-size: 16px;
  115.       color: #000;
  116.     }
  117.  
  118.     .buy {
  119.       background: #d1d2d3;
  120.       width: 100%;
  121.       height: 30px;
  122.       font-size: 20px;
  123.       color: #cc0033;
  124.       margin-top: 255px;
  125.       text-align: center;
  126.       line-height: 30px;
  127.       font-weight: bold;
  128.       position: absolute;
  129.     }
  130.  
  131.     .buy-arrow {
  132.       width: 0;
  133. height: 0;
  134. border: 6px solid transparent;
  135. border-right: 0;
  136. border-left-color: #cc0033;
  137. position: absolute;
  138. top: 10px;
  139. left: 67%;
  140.     }
  141.  
  142.     #info {
  143.       width: 210px;
  144.       margin-top: 2px;
  145.       position: absolute;
  146.       font-size: 8px;
  147.       padding-left: 10px;
  148.       color: #6e5957;
  149.       line-height: 9px;
  150.       font-weight: bold;
  151.     }
  152.  
  153.     #nav-left {
  154.       width: 25px;
  155.       height: 200px;
  156.       z-index: 100;
  157.       position: absolute;
  158.     }
  159.  
  160.     #nav-right {
  161.       width: 25px;
  162.       height: 200px;
  163.       z-index: 100;
  164.       position: absolute;
  165.       top: 52px;
  166.       left: 213px;
  167.     }
  168.  
  169.     #circle-left {
  170.     width: 60px;
  171. height: 60px;
  172. background-color: #d1d2d3;
  173. -moz-border-radius: 50%;
  174. -webkit-border-radius: 50%;
  175. border-radius: 50%;
  176. margin: auto;
  177. top: 94px;
  178. z-index: 100;
  179. position: relative;
  180. left: -40px;
  181.     }
  182.  
  183.     #circle-right {
  184.      width: 60px;
  185. height: 60px;
  186. background-color: #d1d2d3;
  187. -moz-border-radius: 50%;
  188. -webkit-border-radius: 50%;
  189. border-radius: 50%;
  190. margin: auto;
  191. top: 92px;
  192. z-index: 100;
  193. position: relative;
  194.  right: -5px;
  195.     }
  196.  
  197.     #arrow-left {
  198.      width: 0;
  199. height: 0;
  200. border: 10px solid transparent;
  201. border-left: 0;
  202. border-right-color: #cc0033;
  203. margin: auto;
  204. top: 20px;
  205. z-index: 100;
  206. position: absolute;
  207. left: 42px;
  208.     }
  209.  
  210.     #arrow-right {
  211.       width: 0;
  212. height: 0;
  213. border: 10px solid transparent;
  214. border-right: 0;
  215. border-left-color: #cc0033;
  216. margin-left: auto;
  217. margin-right: auto;
  218. top: 20px;
  219. right: 42px;
  220. z-index: 100;
  221. position: absolute;
  222.     }
  223.     #icon {
  224.     padding-left: 5px;
  225. padding-right: 5px;
  226. padding-top: 5px;
  227. text-align: center;
  228. }
  229.     #icon img {
  230.    max-height: 30px;
  231. max-width: 100px;
  232. padding-right: 10px;
  233. padding-left: 10px;
  234.     }
  235.  
  236.   </style>
  237. </head>
  238. <body>
  239.   <script type="text/javascript">
  240. shop_url = '$SHOP_URL';
  241.     //for IE8, add getElementsByClassName if it isn't exist
  242.     ( function ()
  243.     {
  244.       if ( !document.getElementsByClassName )
  245.       {
  246.         var indexOf = [].indexOf || function ( prop )
  247.         {
  248.           for ( var i = 0; i < this.length; i++ )
  249.           {
  250.             if ( this[i] === prop ) return i;
  251.           }
  252.           return -1;
  253.         };
  254.         getElementsByClassName = function ( className, context )
  255.         {
  256.           var elems = document.querySelectorAll ? context.querySelectorAll( "." + className ) : ( function ()
  257.           {
  258.             var all = context.getElementsByTagName( "*" ),
  259.                 elements = [],
  260.                 i = 0;
  261.             for ( ; i < all.length; i++ )
  262.             {
  263.               if ( all[i].className && ( " " + all[i].className + " " ).indexOf( " " + className + " " ) > -1 && indexOf.call( elements, all[i] ) === -1 ) elements.push( all[i] );
  264.             }
  265.             return elements;
  266.           } )();
  267.           return elems;
  268.         };
  269.         document.getElementsByClassName = function ( className )
  270.         {
  271.           return getElementsByClassName( className, document );
  272.         };
  273.         Element.prototype.getElementsByClassName = function ( className )
  274.         {
  275.           return getElementsByClassName( className, this );
  276.         };
  277.       }
  278.     } )();
  279.  
  280.     window.onload = function ()
  281.     {
  282.     //cross-browser addEventListener function.
  283.       addEventListener_ = function ( element, evt, fn ) {
  284.         if ( window.addEventListener ) {
  285.           element.addEventListener( evt, fn, false );
  286.         } else {
  287.           element.attachEvent( 'on' + evt, fn );
  288.         }
  289.       };
  290.  
  291.       checkParent = function ( target, element ) {
  292.         if ( target ) {
  293.           if ( target.parentNode ) {
  294.             while ( target.parentNode ) {
  295.               if ( target == element ) return true;
  296.               target = target.parentNode;
  297.             }
  298.           }
  299.           else if ( target.offsetParent ) {
  300.             while ( target.offsetParent ) {
  301.               if ( target == element ) return true;
  302.               target = target.offsetParent;
  303.             }
  304.           }
  305.         }
  306.         return false;
  307.       };
  308.  
  309.       addMouseEnterEventListener = function ( element, fn ) {
  310.         var wrapper = function ( e ) {
  311.           var evt = e || window.event;
  312.           var targetElement = evt.target || evt.srcElement;
  313.  
  314.           var relTarg = evt.relatedTarget || evt.fromElement;
  315.           if ( checkParent( relTarg, element ) ) return;
  316.  
  317.           setTimeout( fn, 0 );
  318.         };
  319.  
  320.         addEventListener_( element, 'mouseover', wrapper );
  321.       };
  322.  
  323.       addMouseLeaveEventListener = function ( element, fn ) {
  324.         var wrapper = function ( e ) {
  325.           var evt = e || window.event;
  326.           var targetElement = evt.target || evt.srcElement;
  327.  
  328.           var relTarg = evt.relatedTarget || evt.toElement;
  329.           if ( checkParent( relTarg, element ) ) return;
  330.  
  331.           setTimeout( fn, 0 );
  332.         };
  333.  
  334.         addEventListener_( element, 'mouseout', wrapper );
  335.       };
  336.  
  337.       //needed  variables
  338.       var frame = document.getElementById( 'frame' ),
  339.           offers = document.getElementsByClassName( 'offer' ),
  340.           productImgBox = document.getElementsByClassName( 'product-image-box' ),
  341.           productData = document.getElementsByClassName( 'product-data' ),
  342.           rotateImage = document.getElementsByClassName( 'product-image' ),
  343.           logo = document.getElementById( 'logo' ),
  344.           urInfo = document.getElementById( 'ur-info' ),
  345.           icon = document.getElementById( 'icon' ),
  346.           arrLeft = document.getElementById( 'nav-left' ),
  347.           arrRight = document.getElementById( 'nav-right' ),
  348.           oneScrollLength = productImgBox[0].clientWidth,
  349.           active = true,
  350.           productsShown = 0,
  351.           offersCount = 5,
  352.           allFrame = 36,
  353.           isScrollNow = false,
  354.           isRotateNow = false,
  355.           rotatePeriod = rotateImage[0].clientWidth / allFrame;
  356.  
  357.       //click = go to site      
  358.       logo.onclick = urInfo.onclick = icon.onclick = function () {
  359.         window.open( shop_url );
  360.       };
  361.  
  362.       addMouseEnterEventListener( frame, function () { active = false; } );
  363.  
  364.       //navigation-arrow eventa
  365.  
  366.       arrLeft.onclick = function () {          
  367.           scrolling( 1 );
  368.       };
  369.  
  370.       arrRight.onclick = function () {
  371.           scrolling( -1 );
  372.       };
  373.  
  374.       //Circle Linked List Prototype
  375.       var Node = function ( value ) {
  376.         this.value = value;
  377.         this.prev = null;
  378.         this.next = null;
  379.         return this;
  380.       };
  381.  
  382.       function LinkedList() { }
  383.       LinkedList.prototype = {
  384.         node: null,
  385.         length: 0,
  386.         first: null,
  387.         last: null
  388.       };
  389.  
  390.       LinkedList.prototype.append = function ( currentNode ) {
  391.         if ( this.first === null ) {
  392.           this.node = currentNode;
  393.           currentNode.prev = currentNode;
  394.           currentNode.next = currentNode;
  395.           this.first = currentNode;
  396.           this.last = currentNode;
  397.         } else {
  398.           this.node = currentNode;
  399.           currentNode.prev = this.last;
  400.           currentNode.next = this.first;
  401.           this.first.prev = currentNode;
  402.           this.last.next = currentNode;
  403.           this.last = currentNode;
  404.         }
  405.         this.length++;
  406.       };
  407.  
  408.       LinkedList.prototype.setCursor = function ( node ) {
  409.         this.cursor = node;
  410.       };
  411.  
  412.       LinkedList.prototype.getCursor = function () {
  413.         return this.cursor;
  414.       };
  415.  
  416.       var mylistImage = new LinkedList();
  417.       for ( i = 0; i < productImgBox.length; i++ ) {
  418.         mylistImage.append( new Node( productImgBox[i] ) );
  419.       }
  420.  
  421.       var mylistData = new LinkedList();
  422.       for ( i = 0; i < productData.length; i++ ) {
  423.         mylistData.append( new Node( productData[i] ) );
  424.       }
  425.  
  426.       var mylistRotate = new LinkedList();
  427.       for ( i = 0; i < rotateImage.length; i++ ) {
  428.         mylistRotate.append( new Node( rotateImage[i] ) );
  429.       }
  430.  
  431.       //first element to cursor and visible onload
  432.       mylistData.setCursor( mylistData.first );
  433.       mylistImage.setCursor( mylistImage.first );
  434.       mylistRotate.setCursor( mylistRotate.first );
  435.       mylistData.getCursor().value.style.visibility = 'visible';
  436.       mylistImage.getCursor().value.style.visibility = 'visible';
  437.       mylistRotate.getCursor().value.style.visibility = 'visible';
  438.  
  439.       //pattern of animation
  440.       function animate( opts ) {
  441.         var start = new Date;
  442.         var timer = setInterval( function () {
  443.           var progress = ( new Date - start ) / opts.duration;
  444.           if ( progress > 1 ) progress = 1;
  445.           opts.step( progress );
  446.           if ( progress == 1 || opts.done ) {
  447.             clearInterval( timer );
  448.           }
  449.         }, opts.delay || 10 );
  450.  
  451.       }
  452.  
  453.       //auto animation    
  454.       function oneSecond( action ) {
  455.         if ( ( productsShown <= offersCount ) || ( !active ) ) {
  456.           setTimeout( function () {
  457.             if ( action == 'rotate' ) {
  458.               productsShown++;
  459.               rotateProduct();
  460.             }
  461.             else if ( action == 'change' ) {
  462.               scrolling( -1 );              
  463.             }
  464.           }, 500 );
  465.  
  466.         }
  467.       }
  468.  
  469.       oneSecond( 'rotate' );
  470.      
  471.       //sprite animation
  472.       function rotateProduct() {
  473.         if ( !isRotateNow ) {
  474.           isRotateNow = true;
  475.           var frameCount = 1;
  476.           animate( {
  477.             duration: 6000,
  478.             delay: 50,
  479.             step: function ( progress ) {
  480.               if ( isRotateNow ) {
  481.                 mylistRotate.getCursor().value.style.marginLeft = -1 * frameCount * rotatePeriod + 'px';
  482.                 frameCount++;
  483.                 if ( ( frameCount == allFrame ) || ( progress == 1 ) || ( isScrollNow ) ) {
  484.                   if ( active )
  485.                     oneSecond( 'change' );
  486.                   isRotateNow = false;
  487.                   this.done = true;
  488.                 }
  489.               }
  490.               else
  491.                 this.done = true;
  492.             }
  493.           } );
  494.         }
  495.       }
  496.  
  497.       //show data
  498.       function showProductData( direction ) {
  499.         mylistData.getCursor().value.style.visibility = 'hidden';
  500.         if ( direction < 0 )
  501.           mylistData.setCursor( mylistData.getCursor().next );
  502.         else
  503.           mylistData.setCursor( mylistData.getCursor().prev );
  504.         mylistData.getCursor().value.style.visibility = 'visible';
  505.       }
  506.            
  507.       //scroll image
  508.       function scrolling( direction ) {
  509.         if ( !isScrollNow ) {
  510.           isScrollNow = true;
  511.           isRotateNow = false;
  512.           showProductData( direction );
  513.           var element = mylistImage.getCursor().value,
  514.               move = oneScrollLength,
  515.               nextElement;
  516.           if ( direction < 0 ) {
  517.             nextElement = mylistImage.getCursor().next.value;
  518.             mylistRotate.getCursor().next.value.style.visibility = 'visible';
  519.           }
  520.           else {
  521.             nextElement = mylistImage.getCursor().prev.value;
  522.             mylistRotate.getCursor().prev.value.style.visibility = 'visible';
  523.           }
  524.           nextElement.style.marginLeft = -move + 'px';
  525.           nextElement.style.visibility = 'visible';
  526.           animate( {
  527.             duration: 350,
  528.             delay: 10,
  529.             step: function ( progress ) {
  530.               element.style.marginLeft = direction * move * progress + 'px';
  531.               nextElement.style.marginLeft = direction * move * progress - direction * move + 'px';
  532.               if ( progress == 1 ) {
  533.                 mylistImage.getCursor().value.style.visibility = 'hidden';
  534.                 mylistImage.getCursor().value.style.marginLeft = '0px';
  535.                 mylistRotate.getCursor().value.style.visibility = 'hidden';
  536.                 mylistRotate.getCursor().value.style.marginLeft = '0px';
  537.                 if ( direction < 0 ) {
  538.                   mylistImage.setCursor( mylistImage.getCursor().next );
  539.                   mylistRotate.setCursor( mylistRotate.getCursor().next );
  540.                 }
  541.                 else {
  542.                   mylistImage.setCursor( mylistImage.getCursor().prev );
  543.                   mylistRotate.setCursor( mylistRotate.getCursor().prev );
  544.                 }
  545.                 oneSecond( 'rotate' );
  546.                 isScrollNow = false;
  547.               }
  548.             }
  549.           } );
  550.         }
  551.       }
  552.     }
  553.   </script>
  554.   <div id="frame">
  555.     <div id="logo_box">
  556.       <img id="logo" src="${CDN_URL}/creative/1714/logo_butik_ru.png" />
  557.     </div>
  558.     <a href="http://www.segmento.ru/OptOut?utm_source=segmento&utm_medium=cpm&utm_campaign=banner_optout" target="_blank" id="segmento-logo">
  559.       <img src="${CDN_URL}/ad/s_black.png" class="images" />
  560.     </a>
  561.     <div id="nav-left">
  562.       <div id="circle-left">
  563.       <div id="arrow-left"></div>
  564. </div>    
  565.       </div>
  566.     <div id="viewport">
  567.       #foreach( $offer in $OFFERS )
  568.           <a href="$offer.clickUrl" target="_blank" class="product_link">
  569.             <div class="product-data">
  570.               <div class="name"></div>
  571.               <div class="price">$offer.price</div>              
  572.             </div>
  573.             <div class="product-image-box">
  574.               <img src="$offer.getCustomField('img360_src')" class="product-image" />
  575.             </div>
  576.             <div class="buy">КУПИТЬ
  577.               <div class="buy-arrow"></div>
  578.             </div>
  579.           </a>
  580.       #end
  581.     </div>
  582.     <div id="nav-right">
  583.       <div id="circle-right">
  584.       <div id="arrow-right"></div>
  585.     </div>  
  586.       </div>
  587.     <div id="icon">
  588.       <img src="${CDN_URL}/creative/1714/freeDelivery.png" />
  589.       <img src="${CDN_URL}/creative/1714/moscow.png" />
  590.     </div>
  591.     <div id="info">ООО «Бутик», ОГРН 1137746980238, 115184, г. Москва, Большой Овчинниковский пер., дом 16</div>
  592.   </div>
  593. </body>
  594. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!