Giter Club home page Giter Club logo

peizhivue's Introduction

<!doctype html>

<title></title> <script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script> <script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="../../lib/hash.js"></script>
  • 1
  • 2-3
  • 4-5
  • 6-7
  • 8-9
  • 10-11
  • 12-13
  • 14
<script type="text/javascript"> function loadApp() { $('#canvas').fadeIn(1000); var flipbook = $('.magazine'); if (flipbook.width() == 0 || flipbook.height() == 0) { setTimeout(loadApp, 10); return; } flipbook.turn({ width: 922, height: 600, duration: 1000, acceleration: !isChrome(), gradients: true, autoCenter: true, elevation: 50, pages: 12, when: { turning: function (event, page, view) { var book = $(this), currentPage = book.turn('page'), pages = book.turn('pages'); Hash.go('page/' + page).update(); disableControls(page); $('.thumbnails .page-' + currentPage). parent(). removeClass('current'); $('.thumbnails .page-' + page). parent(). addClass('current'); }, turned: function (event, page, view) { disableControls(page); $(this).turn('center'); if (page == 1) { $(this).turn('peel', 'br'); } }, missing: function (event, pages) { for (var i = 0; i < pages.length; i++) addPage(pages[i], $(this)); } } }); Hash.on('^page\/([0-9]*)$', { yep: function (path, parts) { var page = parts[1]; if (page !== undefined) { if ($('.magazine').turn('is')) $('.magazine').turn('page', page); } }, nop: function (path) { if ($('.magazine').turn('is')) $('.magazine').turn('page', 1); } }); $(window).resize(function () { resizeViewport(); }).bind('orientationchange', function () { resizeViewport(); }); $('.thumbnails').click(function (event) { var page; if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
			$('.magazine').turn('page', page[1]);
		}
	});
	$('.thumbnails li').
		bind($.mouseEvents.over, function () {
			$(this).addClass('thumb-hover');
		}).bind($.mouseEvents.out, function () {
			$(this).removeClass('thumb-hover');
		});
	if ($.isTouch) {
		$('.thumbnails').
			addClass('thumbanils-touch').
			bind($.mouseEvents.move, function (event) {
				event.preventDefault();
			});
	} else {
		$('.thumbnails ul').mouseover(function () {
			$('.thumbnails').addClass('thumbnails-hover');
		}).mousedown(function () {
			return false;
		}).mouseout(function () {
			$('.thumbnails').removeClass('thumbnails-hover');
		});
	}
	if ($.isTouch) {
		$('.magazine').bind('touchstart', regionClick);
	} else {
		$('.magazine').click(regionClick);
	}
	$('.next-button').bind($.mouseEvents.over, function () {
		$(this).addClass('next-button-hover');
	}).bind($.mouseEvents.out, function () {
		$(this).removeClass('next-button-hover');
	}).bind($.mouseEvents.down, function () {
		$(this).addClass('next-button-down');
	}).bind($.mouseEvents.up, function () {
		$(this).removeClass('next-button-down');
	}).click(function () {
		$('.magazine').turn('next');
	});
	$('.previous-button').bind($.mouseEvents.over, function () {
		$(this).addClass('previous-button-hover');
	}).bind($.mouseEvents.out, function () {
		$(this).removeClass('previous-button-hover');
	}).bind($.mouseEvents.down, function () {
		$(this).addClass('previous-button-down');
	}).bind($.mouseEvents.up, function () {
		$(this).removeClass('previous-button-down');
	}).click(function () {
		$('.magazine').turn('previous');
	});
	resizeViewport();
	$('.magazine').addClass('animated');
}
yepnope({
	test: Modernizr.csstransforms,
	yep: ['../../lib/turn.js'],
	nope: ['../../lib/turn.html4.min.js'],
	both: ['../../lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
	complete: loadApp
});
// ture banner slideshow magazine magezoom previous  addclass butdown
// loadapp complete extras 
$(window).resize(function () {
		resizeViewport();
	}).bind('orientationchange', function () {
		resizeViewport();
	});
	$('.thumbnails').click(function (event) {
		var page;
		if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {

			$('.magazine').turn('page', page[1]);
		}
	});

	/*
		function dara(){
			let magaine = window.on scrollTop || windwos.documentBodyHeight
		  	let mapData = data.map((item,index)=>{
				return	item.id = index+1
			})
			$('.thumbnails').removeClass('thumbnails-hover');
		}
		console.log(data._photo_.type)
		
		

	*/
</script>

peizhivue's People

Contributors

myfloret avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.