Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Three sixty - поворот изображения на 360°


Three sixty - поворот изображения на 360° Kод CSS #container .threesixty { position: relative; overflow: hidden; border: solid 1px #999; margin: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container .threesixty .spinner { width: 60px; display: block; margin: 0 auto; height: 30px; background: #333; background: rgba(0, 0, 0, 0.7); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container .threesixty .spinner span { font-family: Arial, "MS Trebuchet", sans-serif; font-size: 12px; font-weight: bolder; color: #FFF; text-align: center; line-height: 30px; display: block; } #container .threesixty .threesixty_images { display: none; list-style: none; margin: 0; padding: 0; } #container .threesixty .threesixty_images img { position: absolute; top: 0; width: 100%; height: auto; } #container .threesixty .threesixty_images img.current-image { visibility: visible; width: 100%; } #container .threesixty .threesixty_images img.previous-image { visibility: hidden; width: 0; } #container .threesixty .nav_bar { position: absolute; top: 10px; right: 10px; z-index: 11; } #container .threesixty .nav_bar a { display: block; width: 32px; height: 32px; float: left; background: url('../images/sprites.png') no-repeat; text-indent: -99999px; } #container .threesixty .nav_bar a.nav_bar_previous { background-position: 0 -73px; } #container .threesixty .nav_bar a.nav_bar_next { background-position: 0 -104px; } #container .threesixty .nav_bar a.nav_bar_play { background-position: 0 0; } #container .threesixty .nav_bar a.nav_bar_stop { background-position: 0 -37px; } /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou / code[class="language-"], pre[class="language-"] { color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } / Code blocks / pre[class="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } :not(pre) > code[class="language-"], pre[class="language-"] { background: #f5f2f0; } /* Inline code / :not(pre) > code[class="language-"] { padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number { color: #905; } .token.selector, .token.attr-name, .token.string { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #a67f59; background: hsla(0,0%,100%,.5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.regex, .token.important { color: #e90; } .token.important { font-weight: bold; } .token.entity { cursor: help; } pre[data-line] { position: relative; padding: 1em 0 1em 3em; } .line-highlight { position: absolute; left: 0; right: 0; padding: inherit 0; margin-top: 1em; /* Same as .prism’s padding-top / background: hsla(24, 20%, 50%,.08); background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); pointer-events: none; line-height: inherit; white-space: pre; } .line-highlight:before, .line-highlight[data-end]:after { content: attr(data-start); position: absolute; top: .4em; left: .6em; min-width: 1em; padding: 0 .5em; background-color: hsla(24, 20%, 50%,.4); color: hsl(24, 20%, 95%); font: bold 65%/1.5 sans-serif; text-align: center; vertical-align: .3em; border-radius: 999px; text-shadow: none; box-shadow: 0 1px white; } .line-highlight[data-end]:after { content: attr(data-end); top: auto; bottom: .4em; } .token a { color: inherit; } JAVASCRIPT* /global $, window, CanvasLoader, jQuery, alert, requestAnimationFrame, cancelAnimationFrame / /jslint browser:true, devel:true / /! 360 degree Image Slider v1.0.0 * http://gaurav.jassal.me/#360 * * Copyright 2012, gaurav@jassal.me * Dual licensed under the MIT or GPL Version 3 licenses. * / (function ($) { "use strict"; /* * @class ThreeSixty * The ThreeSixty slider class. * * This as jQuery plugin to create 360 degree product image slider. * The plugin is full customizable with number of options provided. The plugin * have the power to display images in any angle 360 degrees. This feature can be * used successfully in many use cases e.g. on an e-commerce site to help customers * look products in detail, from any angle they desire. * * Features * * - Smooth Animation * - Plenty of option parameters for customization * - Api interaction * - Simple mouse interaction * - Custom behavior tweaking * - Support for touch devices * - Easy to integrate * - No flash * * Example code: * var product1 = $('.product1').ThreeSixty({ * totalFrames: 72, * endFrame: 72, * currentFrame: 1, * imgList: '.threesixty_images', * progress: '.spinner', * imagePath:'/assets/product1/', * filePrefix: 'ipod-', * ext: '.jpg', * height: 265, * width: 400, * navigation: true * }); * Note: There are loads other options that you can override to customize * this plugin. * @extends jQuery * @singleton * @param {String} [el] jQuery selector string for the parent container * @param {Object} [options] An optional config object * * @return this / $.ThreeSixty = function (el, options) { // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this, AppCongif, frames = []; // Access to jQuery and DOM versions of element /* * @property {$el} * jQuery Dom node attached to the slider inherits all jQuery public functions. / base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("ThreeSixty", base); /* * @method init * The function extends the user options with default settings for the * slider and initilize the slider. * Style Override example * * var product1 = $('.product1').ThreeSixty({ * totalFrames: 72, * endFrame: 72, * currentFrame: 1, * imgList: '.threesixty_images', * progress: '.spinner', * imagePath:'/assets/product1/', * filePrefix: 'ipod-', * ext: '.jpg', * height: 265, * width: 400, * navigation: true, * styles: { * border: 2px solide #b4b4b4, * background: url(../images/loader.gif) no-repeat * } * }); * @return this / base.init = function () { AppCongif = $.extend({}, $.ThreeSixty.defaultOptions, options); if (!AppCongif.parallel) { base.loadImages(); } base.initProgress(); }; /* * @method initProgress * @private * This function setup the progress indicator styles. * If you want to overreide the default styles of the progress indicator * you need to pass the css styles in the styles property in plugin options. * / base.initProgress = function() { base.$el.css({ width: AppCongif.width + "px", height: AppCongif.height + "px" }).css(AppCongif.styles); base.$el.find(AppCongif.progress).css({ marginTop: ((AppCongif.height / 2) - 15) + 'px' }); base.$el.find(AppCongif.progress).fadeIn("slow"); base.$el.find(AppCongif.imgList).hide(); }; /* * @method loadImages * @private * The function asynchronously loads images and inject into the slider. / base.loadImages = function() { var li, imageName, image, host; li = document.createElement('li'); imageName = AppCongif.domain + AppCongif.imagePath + AppCongif.filePrefix + (AppCongif.loadedImages + 1) + AppCongif.ext + (($.browser.msie) ? '?' + new Date().getTime() : ''); image = $('<img>').attr('src', imageName).addClass('previous-image').appendTo(li); frames.push(image); base.$el.find(AppCongif.imgList).append(li); $(image).load(function () { base.imageLoaded(); }); }; /* * @method loadImages * @private * The function gets triggers once the image is loaded. We also update * the progress percentage in this function. / base.imageLoaded = function () { AppCongif.loadedImages += 1; $(AppCongif.progress + " span").text(Math.floor(AppCongif.loadedImages / AppCongif.totalFrames 100) + '%'); if (AppCongif.loadedImages >= AppCongif.totalFrames) { frames[0].removeClass("previous-image").addClass("current-image"); $(AppCongif.progress).fadeOut("slow", function () { $(this).hide(); base.showImages(); base.showNavigation(); }); } else { base.loadImages(); } }; /** * @method loadImages * @private * This function is called when all the images are loaded. * The function does following operations * - Removes background image placeholder * - Displays the 360 images * - Initilizes mouse intraction events / base.showImages = function () { base.$el.css("background-image", 'none'); base.$el.find('.txtC').fadeIn(); base.$el.find(AppCongif.imgList).fadeIn(); AppCongif.ready = true; base.initEvents(); base.refresh(); }; /* * @method showNavigation * Creates a navigation panel if navigation is set to true in the * settings. / base.showNavigation = function() { if (AppCongif.navigation && !AppCongif.navigation_init) { var nav_bar, next, previous, play_stop; nav_bar = $('<div/>').attr('class', 'nav_bar'); next = $('<a/>').attr({ 'href': '#', 'class': 'nav_bar_next' }).html('next'); previous = $('<a/>').attr({ 'href': '#', 'class': 'nav_bar_previous' }).html('previous'); play_stop = $('<a/>').attr({ 'href': '#', 'class': 'nav_bar_play' }).html('play'); nav_bar.append(previous); nav_bar.append(play_stop); nav_bar.append(next); base.$el.prepend(nav_bar); next.bind('mousedown touchstart', base.next); previous.bind('mousedown touchstart', base.previous); play_stop.bind('mousedown touchstart', base.play_stop); AppCongif.navigation_init = true; } }; /* * @method play_stop * @private * Function toggles the autoplay rotation of 360 slider * @param {Object} [event] jQuery events object. * / base.play_stop = function(event) { event.preventDefault(); if (!AppCongif.autoplay) { AppCongif.autoplay = true; AppCongif.play = setInterval(base.moveToNextFrame, 40); $(event.currentTarget).removeClass('nav_bar_play').addClass('nav_bar_stop'); } else { AppCongif.autoplay = false; $(event.currentTarget).removeClass('nav_bar_stop').addClass('nav_bar_play'); clearInterval(AppCongif.play); AppCongif.play = null; } }; /* * @method next * Using this function you can rotate 360 to next 5 frames. * @param {Object} [event] jQuery events object. * / base.next = function(event) { if (event) { event.preventDefault(); } AppCongif.endFrame -= 5; base.refresh(); }; /* * @method previous * Using this function you can rotate 360 to previous 5 frames. * @param {Object} [event] jQuery events object. * / base.previous = function(event) { if (event) { event.preventDefault(); } AppCongif.endFrame += 1; base.refresh(); }; /* * @method play * You are start the auto rotaion for the slider with this function. * / base.play = function() { if (!AppCongif.autoplay) { AppCongif.autoplay = true; AppCongif.play = setInterval(base.moveToNextFrame, 40); } }; /* * @method stop * You can stop the auto rotation of the 360 slider with this function. * / base.stop = function() { if (AppCongif.autoplay) { AppCongif.autoplay = false; clearInterval(AppCongif.play); AppCongif.play = null; } }; /* * @method endFrame * @private * Function animates to previous frame * / base.moveToNextFrame = function () { if (AppCongif.autoplayDirection === 1) { AppCongif.endFrame -= 1; } else { AppCongif.endFrame += 1; } base.refresh(); }; /* * @method initEvents * @private * Function initilizes all the mouse and touch events for 360 slider movement. * / base.initEvents = function () { base.$el.bind('mousedown touchstart touchmove touchend mousemove click', function (event) { event.preventDefault(); if ((event.type === 'mousedown' && event.which === 1) \|\| event.type === 'touchstart') { AppCongif.pointerStartPosX = base.getPointerEvent(event).pageX; AppCongif.dragging = true; } else if (event.type === 'touchmove') { base.trackPointer(event); } else if (event.type === 'touchend') { AppCongif.dragging = false; } if (event.type === 'click' && !$.browser.msie) { base.$el.css("cursor", "url(assets/images/hand_closed.png), auto"); } }); $(document).bind('mouseup', function (event) { //event.preventDefault(); AppCongif.dragging = false; $(this).css("cursor", "none"); }); $(document).bind('mousemove', function (event) { if (AppCongif.dragging) { event.preventDefault(); if(!$.browser.msie) { base.$el.css("cursor", "url(assets/images/hand_closed.png), auto"); } } else { if(!$.browser.msie) { base.$el.css("cursor", "url(assets/images/hand_open.png), auto"); } } base.trackPointer(event); }); }; /* * @method getPointerEvent * @private * Function returns touch pointer events * * @params {Object} [event] / base.getPointerEvent = function (event) { return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event; }; /* * @method trackPointer * @private * Function calculates the distance between the start pointer and end pointer/ * * @params {Object} [event] / base.trackPointer = function (event) { if (AppCongif.ready && AppCongif.dragging) { AppCongif.pointerEndPosX = base.getPointerEvent(event).pageX; if (AppCongif.monitorStartTime < new Date().getTime() - AppCongif.monitorInt) { AppCongif.pointerDistance = AppCongif.pointerEndPosX - AppCongif.pointerStartPosX; AppCongif.endFrame = AppCongif.currentFrame + Math.ceil((AppCongif.totalFrames - 1) AppCongif.speedMultiplier * (AppCongif.pointerDistance / base.$el.width())); base.refresh(); AppCongif.monitorStartTime = new Date().getTime(); AppCongif.pointerStartPosX = base.getPointerEvent(event).pageX; } } }; /** * @method refresh * @public * Function refeshes the timer and set interval for render cycle. * / base.refresh = function () { if (AppCongif.ticker === 0) { AppCongif.ticker = setInterval(base.render, Math.round(1000 / AppCongif.framerate)); } }; /* * @method refresh * @private * Function render the animation frames on the screen with easing effect. / base.render = function () { var frameEasing; if (AppCongif.currentFrame !== AppCongif.endFrame) { frameEasing = AppCongif.endFrame < AppCongif.currentFrame ? Math.floor((AppCongif.endFrame - AppCongif.currentFrame) 0.1) : Math.ceil((AppCongif.endFrame - AppCongif.currentFrame) * 0.1); base.hidePreviousFrame(); AppCongif.currentFrame += frameEasing; base.showCurrentFrame(); } else { window.clearInterval(AppCongif.ticker); AppCongif.ticker = 0; } }; /** * @method hidePreviousFrame * @private * Function hide the previous frame in the animation loop. / base.hidePreviousFrame = function () { frames[base.getNormalizedCurrentFrame()].removeClass("current-image").addClass("previous-image"); }; /* * @method showCurrentFrame * @private * Function shows the current frame in the animation loop. / base.showCurrentFrame = function () { frames[base.getNormalizedCurrentFrame()].removeClass("previous-image").addClass("current-image"); }; /* * @method getNormalizedCurrentFrame * @private * Function normalize and calculate the current frame once the user release the mouse and release touch event. / base.getNormalizedCurrentFrame = function () { var c = Math.ceil(AppCongif.currentFrame % AppCongif.totalFrames); if (c < 0) { c += (AppCongif.totalFrames - 1); } return c; }; base.init(); }; $.ThreeSixty.defaultOptions = { /* * @cfg {Boolean} dragging [dragging=false] * @private * Private propery contains a flags if users is in dragging mode. / dragging: false, /* * @cfg {Boolean} ready [ready=false] * @private * Private propery is set to true is all assets are loading and application is * ready to render 360 slider. / ready: false, /* * @cfg {Number} pointerStartPosX * @private * private property mouse pointer start x position when user starts dragging slider. / pointerStartPosX: 0, /* * @cfg {Number} pointerEndPosX * @private * private property mouse pointer start x position when user end dragging slider. / pointerEndPosX: 0, /* * @cfg {Number} pointerDistance * @private * private property contains the distance between the pointerStartPosX and pointerEndPosX / pointerDistance: 0, /* * @cfg {Number} monitorStartTime * @private * private property contains time user took in dragging mouse from pointerStartPosX and pointerEndPosX / monitorStartTime: 0, monitorInt: 10, /* * @cfg {Number} ticker * @private * Timer event that renders the 360 / ticker: 0, /* * @cfg {Number} speedMultiplier * This property controls the sensitivity for the 360 slider / speedMultiplier: 7, /* * @cfg {Number} totalFrames * Set total number for frames used in the 360 rotation / totalFrames: 180, /* * @cfg {Number} currentFrame * Current frame of the slider. / currentFrame: 0, /* * @cfg {Array} endFrame * Private perperty contains information about the end frame when user slides the slider. / endFrame: 0, /* * @cfg {Number} loadedImages * Private property contains count of loaded images. / loadedImages: 0, /* * @cfg {Array} framerate * Set framerate for the slider animation / framerate: 60, /* * @cfg {String} domains * Set comma seprated list of all parallel domain from where 360 assets needs to be loaded. / domains: null, /* * @cfg {String} domain * Domain from where assets needs to be loaded. Use this propery is you want to load all assets from * single domain. / domain: '', /* * @cfg {Boolean} parallel * Set to true if you want to load assets from parallel domain. Default false / parallel: false, /* * @cfg {Number} queueAmount * Set number of calls to be made on parallel domains. / queueAmount: 8, /* * @cfg {Number} idle * Mouse Inactivite idle time in seconds. If set more than 0 will auto spine the slider / idle: 0, /* * @cfg {String} filePrefix * Prefix for the image file name before the numeric value. / filePrefix: '', /* * @cfg {String} ext [ext=.png] * Slider image extension. / ext: 'png', /* * @cfg {Object} height [300] * Height of the slider / height: 300, /* * @cfg {Number} width [300] * Width of the slider / width: 300, /* * @cfg {Object} styles * CSS Styles for the 360 slider / styles: {}, /* * @cfg {Boolean} navigation[false] * State if navigation controls are visible or not. / navigation: false, /* * @cfg {Boolean} autoplay[false] * Autoplay the 360 animation / autoplay: false, /* * @cfg {number} autoplayDirection [1] * Direction for autoplay the 360 animation. 1 for right spin, and -1 for left spin. / autoplayDirection: 1 }; $.fn.ThreeSixty = function (options) { return Object.create(new $.ThreeSixty(this, options)); }; }(jQuery)); /* * * Object.create method for perform as a fallback if method not available. * The syntax just takes away the illusion that JavaScript uses Classical Inheritance. / if (typeof Object.create !== 'function') { Object.create = function (o) { 'use strict'; function F() {} F.prototype = o; return new F(); }; } <script type="text/javascript" src="http://samouchka-html.ucoz.ru/image/prism.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/image/threesixty.min.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/picture/canvasloader-min.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/picture/jquery-1.8.3.min.js"></script> window.onload = init; var car; function init(){ car = $('.car').ThreeSixty({ totalFrames: 52, // Total no. of image you have for 360 slider endFrame: 52, // end frame for the auto spin animation currentFrame: 1, // This the start frame for auto spin imgList: '.threesixty_images', // selector for image list progress: '.spinner', // selector to show the loading progress imagePath:'http://samouchka-html.ucoz.ru/dlya-grafiki/Three-sixty/image/product4', // path of the image assets filePrefix: '', // file prefix if any ext: '.png', // extention for the assets height: 447, width: 1000, navigation: true }); } Листинг* <div id="container"> <h1>Плагин поворота на 360 градусов с пользовательским управлением </h1> <div class="threesixty car"> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images"> </ol> </div> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon