Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>banner</title>
- <meta name="description" content="" />
- <style type="text/css">
- html,
- body {
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- font-size: 16px;
- font-family: Arial, sans-serif;
- cursor: pointer;
- }
- a,
- img {
- text-decoration: none;
- border: none;
- }
- #frame {
- position: relative;
- width: 238px;
- height: 398px;
- border: 1px solid #A6A8AA;
- overflow: hidden;
- font-family: Calibri, calibriregular,Carlito,'PT Sans','VL Gothic',sans-serif;
- /* -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- -ms-user-select: none; */
- }
- #segmento-logo {
- position: absolute;
- bottom: 3px;
- right: 5px;
- z-index: 10;
- }
- #logo_box {
- width: 238px;
- height: 50px;
- margin: 0 auto;
- text-align: center;
- line-height: 50px;
- }
- #logo {
- max-width: 220px;
- max-height: 48px;
- vertical-align: middle;
- }
- #viewport {
- width: 238px;
- height: 285px;
- overflow: hidden;
- margin: auto;
- position: relative;
- }
- .product-image-box {
- width: 220px;
- height: 260px;
- position: absolute;
- visibility: hidden;
- text-align: center;
- line-height: 250px;
- margin: auto;
- overflow: hidden;
- padding-left: 9px;
- padding-right: 9px;
- }
- .product-image {
- width: 7920px;
- height: 311px;
- margin: auto;
- margin-top: -55px;
- vertical-align: top;
- visibility: hidden;
- }
- .product-data {
- width: 120px;
- height: 100px;
- position: absolute;
- visibility: hidden;
- text-align: center;
- padding-top: 10px;
- padding-left: 5px;
- padding-right: 5px;
- z-index: 5;
- }
- .name {
- width: 100%;
- text-align: center;
- position: relative;
- font-size: 16px;
- color: #000;
- font-weight: bold;
- }
- .price {
- width: 100%;
- position: relative;
- font-size: 16px;
- color: #000;
- }
- .buy {
- background: #d1d2d3;
- width: 100%;
- height: 30px;
- font-size: 20px;
- color: #cc0033;
- margin-top: 255px;
- text-align: center;
- line-height: 30px;
- font-weight: bold;
- position: absolute;
- }
- .buy-arrow {
- width: 0;
- height: 0;
- border: 6px solid transparent;
- border-right: 0;
- border-left-color: #cc0033;
- position: absolute;
- top: 10px;
- left: 67%;
- }
- #info {
- width: 210px;
- margin-top: 2px;
- position: absolute;
- font-size: 8px;
- padding-left: 10px;
- color: #6e5957;
- line-height: 9px;
- font-weight: bold;
- }
- #nav-left {
- width: 25px;
- height: 200px;
- z-index: 100;
- position: absolute;
- }
- #nav-right {
- width: 25px;
- height: 200px;
- z-index: 100;
- position: absolute;
- top: 52px;
- left: 213px;
- }
- #circle-left {
- width: 60px;
- height: 60px;
- background-color: #d1d2d3;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- margin: auto;
- top: 94px;
- z-index: 100;
- position: relative;
- left: -40px;
- }
- #circle-right {
- width: 60px;
- height: 60px;
- background-color: #d1d2d3;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
- margin: auto;
- top: 92px;
- z-index: 100;
- position: relative;
- right: -5px;
- }
- #arrow-left {
- width: 0;
- height: 0;
- border: 10px solid transparent;
- border-left: 0;
- border-right-color: #cc0033;
- margin: auto;
- top: 20px;
- z-index: 100;
- position: absolute;
- left: 42px;
- }
- #arrow-right {
- width: 0;
- height: 0;
- border: 10px solid transparent;
- border-right: 0;
- border-left-color: #cc0033;
- margin-left: auto;
- margin-right: auto;
- top: 20px;
- right: 42px;
- z-index: 100;
- position: absolute;
- }
- #icon {
- padding-left: 5px;
- padding-right: 5px;
- padding-top: 5px;
- text-align: center;
- }
- #icon img {
- max-height: 30px;
- max-width: 100px;
- padding-right: 10px;
- padding-left: 10px;
- }
- </style>
- </head>
- <body>
- <script type="text/javascript">
- shop_url = '$SHOP_URL';
- //for IE8, add getElementsByClassName if it isn't exist
- ( function ()
- {
- if ( !document.getElementsByClassName )
- {
- var indexOf = [].indexOf || function ( prop )
- {
- for ( var i = 0; i < this.length; i++ )
- {
- if ( this[i] === prop ) return i;
- }
- return -1;
- };
- getElementsByClassName = function ( className, context )
- {
- var elems = document.querySelectorAll ? context.querySelectorAll( "." + className ) : ( function ()
- {
- var all = context.getElementsByTagName( "*" ),
- elements = [],
- i = 0;
- for ( ; i < all.length; i++ )
- {
- if ( all[i].className && ( " " + all[i].className + " " ).indexOf( " " + className + " " ) > -1 && indexOf.call( elements, all[i] ) === -1 ) elements.push( all[i] );
- }
- return elements;
- } )();
- return elems;
- };
- document.getElementsByClassName = function ( className )
- {
- return getElementsByClassName( className, document );
- };
- Element.prototype.getElementsByClassName = function ( className )
- {
- return getElementsByClassName( className, this );
- };
- }
- } )();
- window.onload = function ()
- {
- //cross-browser addEventListener function.
- addEventListener_ = function ( element, evt, fn ) {
- if ( window.addEventListener ) {
- element.addEventListener( evt, fn, false );
- } else {
- element.attachEvent( 'on' + evt, fn );
- }
- };
- checkParent = function ( target, element ) {
- if ( target ) {
- if ( target.parentNode ) {
- while ( target.parentNode ) {
- if ( target == element ) return true;
- target = target.parentNode;
- }
- }
- else if ( target.offsetParent ) {
- while ( target.offsetParent ) {
- if ( target == element ) return true;
- target = target.offsetParent;
- }
- }
- }
- return false;
- };
- addMouseEnterEventListener = function ( element, fn ) {
- var wrapper = function ( e ) {
- var evt = e || window.event;
- var targetElement = evt.target || evt.srcElement;
- var relTarg = evt.relatedTarget || evt.fromElement;
- if ( checkParent( relTarg, element ) ) return;
- setTimeout( fn, 0 );
- };
- addEventListener_( element, 'mouseover', wrapper );
- };
- addMouseLeaveEventListener = function ( element, fn ) {
- var wrapper = function ( e ) {
- var evt = e || window.event;
- var targetElement = evt.target || evt.srcElement;
- var relTarg = evt.relatedTarget || evt.toElement;
- if ( checkParent( relTarg, element ) ) return;
- setTimeout( fn, 0 );
- };
- addEventListener_( element, 'mouseout', wrapper );
- };
- //needed variables
- var frame = document.getElementById( 'frame' ),
- offers = document.getElementsByClassName( 'offer' ),
- productImgBox = document.getElementsByClassName( 'product-image-box' ),
- productData = document.getElementsByClassName( 'product-data' ),
- rotateImage = document.getElementsByClassName( 'product-image' ),
- logo = document.getElementById( 'logo' ),
- urInfo = document.getElementById( 'ur-info' ),
- icon = document.getElementById( 'icon' ),
- arrLeft = document.getElementById( 'nav-left' ),
- arrRight = document.getElementById( 'nav-right' ),
- oneScrollLength = productImgBox[0].clientWidth,
- active = true,
- productsShown = 0,
- offersCount = 5,
- allFrame = 36,
- isScrollNow = false,
- isRotateNow = false,
- rotatePeriod = rotateImage[0].clientWidth / allFrame;
- //click = go to site
- logo.onclick = urInfo.onclick = icon.onclick = function () {
- window.open( shop_url );
- };
- addMouseEnterEventListener( frame, function () { active = false; } );
- //navigation-arrow eventa
- arrLeft.onclick = function () {
- scrolling( 1 );
- };
- arrRight.onclick = function () {
- scrolling( -1 );
- };
- //Circle Linked List Prototype
- var Node = function ( value ) {
- this.value = value;
- this.prev = null;
- this.next = null;
- return this;
- };
- function LinkedList() { }
- LinkedList.prototype = {
- node: null,
- length: 0,
- first: null,
- last: null
- };
- LinkedList.prototype.append = function ( currentNode ) {
- if ( this.first === null ) {
- this.node = currentNode;
- currentNode.prev = currentNode;
- currentNode.next = currentNode;
- this.first = currentNode;
- this.last = currentNode;
- } else {
- this.node = currentNode;
- currentNode.prev = this.last;
- currentNode.next = this.first;
- this.first.prev = currentNode;
- this.last.next = currentNode;
- this.last = currentNode;
- }
- this.length++;
- };
- LinkedList.prototype.setCursor = function ( node ) {
- this.cursor = node;
- };
- LinkedList.prototype.getCursor = function () {
- return this.cursor;
- };
- var mylistImage = new LinkedList();
- for ( i = 0; i < productImgBox.length; i++ ) {
- mylistImage.append( new Node( productImgBox[i] ) );
- }
- var mylistData = new LinkedList();
- for ( i = 0; i < productData.length; i++ ) {
- mylistData.append( new Node( productData[i] ) );
- }
- var mylistRotate = new LinkedList();
- for ( i = 0; i < rotateImage.length; i++ ) {
- mylistRotate.append( new Node( rotateImage[i] ) );
- }
- //first element to cursor and visible onload
- mylistData.setCursor( mylistData.first );
- mylistImage.setCursor( mylistImage.first );
- mylistRotate.setCursor( mylistRotate.first );
- mylistData.getCursor().value.style.visibility = 'visible';
- mylistImage.getCursor().value.style.visibility = 'visible';
- mylistRotate.getCursor().value.style.visibility = 'visible';
- //pattern of animation
- function animate( opts ) {
- var start = new Date;
- var timer = setInterval( function () {
- var progress = ( new Date - start ) / opts.duration;
- if ( progress > 1 ) progress = 1;
- opts.step( progress );
- if ( progress == 1 || opts.done ) {
- clearInterval( timer );
- }
- }, opts.delay || 10 );
- }
- //auto animation
- function oneSecond( action ) {
- if ( ( productsShown <= offersCount ) || ( !active ) ) {
- setTimeout( function () {
- if ( action == 'rotate' ) {
- productsShown++;
- rotateProduct();
- }
- else if ( action == 'change' ) {
- scrolling( -1 );
- }
- }, 500 );
- }
- }
- oneSecond( 'rotate' );
- //sprite animation
- function rotateProduct() {
- if ( !isRotateNow ) {
- isRotateNow = true;
- var frameCount = 1;
- animate( {
- duration: 6000,
- delay: 50,
- step: function ( progress ) {
- if ( isRotateNow ) {
- mylistRotate.getCursor().value.style.marginLeft = -1 * frameCount * rotatePeriod + 'px';
- frameCount++;
- if ( ( frameCount == allFrame ) || ( progress == 1 ) || ( isScrollNow ) ) {
- if ( active )
- oneSecond( 'change' );
- isRotateNow = false;
- this.done = true;
- }
- }
- else
- this.done = true;
- }
- } );
- }
- }
- //show data
- function showProductData( direction ) {
- mylistData.getCursor().value.style.visibility = 'hidden';
- if ( direction < 0 )
- mylistData.setCursor( mylistData.getCursor().next );
- else
- mylistData.setCursor( mylistData.getCursor().prev );
- mylistData.getCursor().value.style.visibility = 'visible';
- }
- //scroll image
- function scrolling( direction ) {
- if ( !isScrollNow ) {
- isScrollNow = true;
- isRotateNow = false;
- showProductData( direction );
- var element = mylistImage.getCursor().value,
- move = oneScrollLength,
- nextElement;
- if ( direction < 0 ) {
- nextElement = mylistImage.getCursor().next.value;
- mylistRotate.getCursor().next.value.style.visibility = 'visible';
- }
- else {
- nextElement = mylistImage.getCursor().prev.value;
- mylistRotate.getCursor().prev.value.style.visibility = 'visible';
- }
- nextElement.style.marginLeft = -move + 'px';
- nextElement.style.visibility = 'visible';
- animate( {
- duration: 350,
- delay: 10,
- step: function ( progress ) {
- element.style.marginLeft = direction * move * progress + 'px';
- nextElement.style.marginLeft = direction * move * progress - direction * move + 'px';
- if ( progress == 1 ) {
- mylistImage.getCursor().value.style.visibility = 'hidden';
- mylistImage.getCursor().value.style.marginLeft = '0px';
- mylistRotate.getCursor().value.style.visibility = 'hidden';
- mylistRotate.getCursor().value.style.marginLeft = '0px';
- if ( direction < 0 ) {
- mylistImage.setCursor( mylistImage.getCursor().next );
- mylistRotate.setCursor( mylistRotate.getCursor().next );
- }
- else {
- mylistImage.setCursor( mylistImage.getCursor().prev );
- mylistRotate.setCursor( mylistRotate.getCursor().prev );
- }
- oneSecond( 'rotate' );
- isScrollNow = false;
- }
- }
- } );
- }
- }
- }
- </script>
- <div id="frame">
- <div id="logo_box">
- <img id="logo" src="${CDN_URL}/creative/1714/logo_butik_ru.png" />
- </div>
- <a href="http://www.segmento.ru/OptOut?utm_source=segmento&utm_medium=cpm&utm_campaign=banner_optout" target="_blank" id="segmento-logo">
- <img src="${CDN_URL}/ad/s_black.png" class="images" />
- </a>
- <div id="nav-left">
- <div id="circle-left">
- <div id="arrow-left"></div>
- </div>
- </div>
- <div id="viewport">
- #foreach( $offer in $OFFERS )
- <a href="$offer.clickUrl" target="_blank" class="product_link">
- <div class="product-data">
- <div class="name"></div>
- <div class="price">$offer.price</div>
- </div>
- <div class="product-image-box">
- <img src="$offer.getCustomField('img360_src')" class="product-image" />
- </div>
- <div class="buy">КУПИТЬ
- <div class="buy-arrow"></div>
- </div>
- </a>
- #end
- </div>
- <div id="nav-right">
- <div id="circle-right">
- <div id="arrow-right"></div>
- </div>
- </div>
- <div id="icon">
- <img src="${CDN_URL}/creative/1714/freeDelivery.png" />
- <img src="${CDN_URL}/creative/1714/moscow.png" />
- </div>
- <div id="info">ООО «Бутик», ОГРН 1137746980238, 115184, г. Москва, Большой Овчинниковский пер., дом 16</div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement