devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue中引入jq使用turnjs实现翻页效果（动态background-image）_自动翻页效果 js

作者：weixin_40725706 | 2024-02-19 23:08:31

赞

踩

自动翻页效果 js

使用turnjs要使用jq，jq又需要在webpack设置一下，就直接把jq源码文件引进来了，turn的npm不下来，源码文件引入也没有效果，就直接写在了method里面，可读性差了一点

进入页面会自动先翻一页

完整代码示例：

  1. <template>
  2. 	<div class="boxbox" style="background-color: pink;">
  3. 		<div id="flipbook" >
  4. 			<div class="hard top"  :style="`background-image:url(${url1});`"></div>
  5. 			<div class="hard top1"  :style="`background-image:url(${url2});`"></div>
  6. 			<div class="hard"  :style="`background:url(${url3}) no-repeat; background-position:center;
  7. 	background-size: 100%;`"></div>
  8. 			<div class="hard"  :style="`background-image:url(${url4});`">
  9. 				<div>
  10. 					<img src="./../assets/a.jpg" alt="" style="height:60px;width:55px">
  11. 				</div>
  12. 				<div>
  13. 					<span>姓名：</span>
  14. 					<span>章节</span>
  15. 				</div>
  16. 			</div>
  17. 			<div class="hard" :style="`background-image:url(${url5});`"></div>
  18. 			<div class="hard" :style="`background-image:url(${url4});`"></div>
  19. 			<div class="hard" :style="`background-image:url(${url6});`"></div>
  20. 			<div class="hard" :style="`background-image:url(${url7});`"></div>
  21. 		</div>
  22. 		<div>居中</div>
  23. 	</div>
  24. </template>
  25.  
  26. <script>
  27. import '../utils/jquery.js'
  28. import '../utils/jquery.address-1.6.min.js'
  29. import '../utils/jquery.fullscreen.js'
  30. export default {
  31. 	name: 'HelloWorld',
  32. 	props: {
  33. 	},
  34. 	data(){
  35. 		return{
  36. 			url1:require('./../assets/1.png'),
  37. 			url2:require('./../assets/2.png'),
  38. 			url3:require('./../assets/3.png'),
  39. 			url4:require('./../assets/4.png'),
  40. 			url5:require('./../assets/5.png'),
  41. 			url6:require('./../assets/6.png'),
  42. 			url7:require('./../assets/7.png'),
  43. 		}
  44. 	},
  45. 	mounted() {
  46. 		this.$nextTick(() => {
  47. 			this.aa()
  48. 			$("#flipbook").turn("next")
  49. 			$("#flipbook").turn({
  50. 				width: 400,
  51. 				height: 275,
  52. 				autoCenter: true
  53. 			});
  54. 			$("#flipbook").turn("page",2)
  55. 		});
  56. 	},
  57. 	methods: {
  58. 		aa() {
  59.  
  60. 			(function ($) {
  61.  
  62. 				'use strict';
  63.  
  64. 				var has3d,
  65.  
  66. 					vendor = '',
  67.  
  68. 					PI = Math.PI,
  69.  
  70. 					A90 = PI / 2,
  71.  
  72. 					isTouch = 'ontouchstart' in window,
  73.  
  74. 					events = (isTouch) ? { start: 'touchstart', move: 'touchmove', end: 'touchend' }
  75. 						: { start: 'mousedown', move: 'mousemove', end: 'mouseup' },
  76.  
  77. 					// Contansts used for each corner
  78. 					// tl * tr
  79. 					// *     *
  80. 					// bl * br
  81.  
  82. 					corners = {
  83. 						backward: ['bl', 'tl'],
  84. 						forward: ['br', 'tr'],
  85. 						all: ['tl', 'bl', 'tr', 'br']
  86. 					},
  87.  
  88. 					displays = ['single', 'double'],
  89.  
  90. 					// Default options
  91.  
  92. 					turnOptions = {
  93.  
  94. 						// First page
  95.  
  96. 						page: 1,
  97.  
  98. 						// Enables gradients
  99.  
  100. 						gradients: true,
  101.  
  102. 						// Duration of transition in milliseconds
  103.  
  104. 						duration: 600,
  105.  
  106. 						// Enables hardware acceleration
  107.  
  108. 						acceleration: true,
  109.  
  110. 						// Display
  111.  
  112. 						display: 'double',
  113.  
  114. 						// Events
  115.  
  116. 						when: null
  117. 					},
  118.  
  119. 					flipOptions = {
  120.  
  121. 						// Back page
  122.  
  123. 						folding: null,
  124.  
  125. 						// Corners
  126. 						// backward: Activates both tl and bl corners
  127. 						// forward: Activates both tr and br corners
  128. 						// all: Activates all the corners
  129.  
  130. 						corners: 'forward',
  131.  
  132. 						// Size of the active zone of each corner
  133.  
  134. 						cornerSize: 100,
  135.  
  136. 						// Enables gradients
  137.  
  138. 						gradients: true,
  139.  
  140. 						// Duration of transition in milliseconds
  141.  
  142. 						duration: 600,
  143.  
  144. 						// Enables hardware acceleration
  145.  
  146. 						acceleration: true
  147. 					},
  148.  
  149. 					// Number of pages in the DOM, minimum value: 6
  150.  
  151. 					pagesInDOM = 6,
  152.  
  153. 					pagePosition = {
  154. 						0: { top: 0, left: 0, right: 'auto', bottom: 'auto' },
  155. 						1: { top: 0, right: 0, left: 'auto', bottom: 'auto' }
  156. 					},
  157.  
  158. 					// Gets basic attributes for a layer
  159.  
  160. 					divAtt = function (top, left, zIndex, overf) {
  161. 						return {
  162. 							'css': {
  163. 								position: 'absolute',
  164. 								top: top,
  165. 								left: left,
  166. 								'overflow': overf || 'hidden',
  167. 								'z-index': zIndex || 'auto'
  168. 							}
  169. 						};
  170. 					},
  171.  
  172. 					// Gets a 2D point from a bezier curve of four points
  173.  
  174. 					bezier = function (p1, p2, p3, p4, t) {
  175. 						var mum1 = 1 - t,
  176. 							mum13 = mum1 * mum1 * mum1,
  177. 							mu3 = t * t * t;
  178.  
  179. 						return point2D(Math.round(mum13 * p1.x + 3 * t * mum1 * mum1 * p2.x + 3 * t * t * mum1 * p3.x + mu3 * p4.x),
  180. 							Math.round(mum13 * p1.y + 3 * t * mum1 * mum1 * p2.y + 3 * t * t * mum1 * p3.y + mu3 * p4.y));
  181. 					},
  182.  
  183. 					// Converts an angle from degrees to radians
  184.  
  185. 					rad = function (degrees) {
  186. 						return degrees / 180 * PI;
  187. 					},
  188.  
  189. 					// Converts an angle from radians to degrees
  190.  
  191. 					deg = function (radians) {
  192. 						return radians / PI * 180;
  193. 					},
  194.  
  195. 					// Gets a 2D point
  196.  
  197. 					point2D = function (x, y) {
  198. 						return { x: x, y: y };
  199. 					},
  200.  
  201. 					// Returns the traslate value
  202.  
  203. 					translate = function (x, y, use3d) {
  204. 						return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) ';
  205. 					},
  206.  
  207. 					// Returns the rotation value
  208.  
  209. 					rotate = function (degrees) {
  210. 						return ' rotate(' + degrees + 'deg) ';
  211. 					},
  212.  
  213. 					// Checks if a property belongs to an object
  214.  
  215. 					has = function (property, object) {
  216. 						return Object.prototype.hasOwnProperty.call(object, property);
  217. 					},
  218.  
  219. 					// Gets the CSS3 vendor prefix
  220.  
  221. 					getPrefix = function () {
  222. 						var vendorPrefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
  223. 							len = vendorPrefixes.length,
  224. 							vendor = '';
  225.  
  226. 						while (len--)
  227. 							if ((vendorPrefixes[len] + 'Transform') in document.body.style)
  228. 								vendor = '-' + vendorPrefixes[len].toLowerCase() + '-';
  229.  
  230. 						return vendor;
  231. 					},
  232.  
  233. 					// Adds gradients
  234.  
  235. 					gradient = function (obj, p0, p1, colors, numColors) {
  236.  
  237. 						var j, cols = [];
  238.  
  239. 						if (vendor == '-webkit-') {
  240.  
  241. 							for (j = 0; j < numColors; j++)
  242. 								cols.push('color-stop(' + colors[j][0] + ', ' + colors[j][1] + ')');
  243.  
  244. 							obj.css({ 'background-image': '-webkit-gradient(linear, ' + p0.x + '% ' + p0.y + '%,  ' + p1.x + '% ' + p1.y + '%, ' + cols.join(',') + ' )' });
  245.  
  246. 						} else {
  247.  
  248. 							// This procedure makes the gradients for non-webkit browsers
  249. 							// It will be reduced to one unique way for gradients in next versions
  250.  
  251. 							p0 = { x: p0.x / 100 * obj.width(), y: p0.y / 100 * obj.height() };
  252. 							p1 = { x: p1.x / 100 * obj.width(), y: p1.y / 100 * obj.height() };
  253.  
  254. 							var dx = p1.x - p0.x,
  255. 								dy = p1.y - p0.y,
  256. 								angle = Math.atan2(dy, dx),
  257. 								angle2 = angle - Math.PI / 2,
  258. 								diagonal = Math.abs(obj.width() * Math.sin(angle2)) + Math.abs(obj.height() * Math.cos(angle2)),
  259. 								gradientDiagonal = Math.sqrt(dy * dy + dx * dx),
  260. 								corner = point2D((p1.x < p0.x) ? obj.width() : 0, (p1.y < p0.y) ? obj.height() : 0),
  261. 								slope = Math.tan(angle),
  262. 								inverse = -1 / slope,
  263. 								x = (inverse * corner.x - corner.y - slope * p0.x + p0.y) / (inverse - slope),
  264. 								c = { x: x, y: inverse * x - inverse * corner.x + corner.y },
  265. 								segA = (Math.sqrt(Math.pow(c.x - p0.x, 2) + Math.pow(c.y - p0.y, 2)));
  266.  
  267. 							for (j = 0; j < numColors; j++)
  268. 								cols.push(' ' + colors[j][1] + ' ' + ((segA + gradientDiagonal * colors[j][0]) * 100 / diagonal) + '%');
  269.  
  270. 							obj.css({ 'background-image': vendor + 'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')' });
  271. 						}
  272. 					},
  273.  
  274. 					turnMethods = {
  275.  
  276. 						// Singleton constructor
  277. 						// $('#selector').turn([options]);
  278.  
  279. 						init: function (opts) {
  280.  
  281. 							// Define constants
  282. 							if (has3d === undefined) {
  283. 								has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
  284. 								vendor = getPrefix();
  285. 							}
  286.  
  287. 							var i, data = this.data(), ch = this.children();
  288.  
  289. 							opts = $.extend({ width: this.width(), height: this.height() }, turnOptions, opts);
  290. 							data.opts = opts;
  291. 							data.pageObjs = {};
  292. 							data.pages = {};
  293. 							data.pageWrap = {};
  294. 							data.pagePlace = {};
  295. 							data.pageMv = [];
  296. 							data.totalPages = opts.pages || 0;
  297.  
  298. 							if (opts.when)
  299. 								for (i in opts.when)
  300. 									if (has(i, opts.when))
  301. 										this.bind(i, opts.when[i]);
  302.  
  303.  
  304. 							this.css({ position: 'relative', width: opts.width, height: opts.height });
  305.  
  306. 							this.turn('display', opts.display);
  307.  
  308. 							if (has3d && !isTouch && opts.acceleration)
  309. 								this.transform(translate(0, 0, true));
  310.  
  311. 							for (i = 0; i < ch.length; i++)
  312. 								this.turn('addPage', ch[i], i + 1);
  313.  
  314. 							this.turn('page', opts.page);
  315.  
  316. 							// allow setting active corners as an option
  317. 							corners = $.extend({}, corners, opts.corners);
  318.  
  319. 							// Event listeners
  320.  
  321. 							$(this).bind(events.start, function (e) {
  322. 								for (var page in data.pages)
  323. 									if (has(page, data.pages) && flipMethods._eventStart.call(data.pages[page], e) === false)
  324. 										return false;
  325. 							});
  326.  
  327. 							$(document).bind(events.move, function (e) {
  328. 								for (var page in data.pages)
  329. 									if (has(page, data.pages))
  330. 										flipMethods._eventMove.call(data.pages[page], e);
  331. 							}).
  332. 								bind(events.end, function (e) {
  333. 									for (var page in data.pages)
  334. 										if (has(page, data.pages))
  335. 											flipMethods._eventEnd.call(data.pages[page], e);
  336.  
  337. 								});
  338.  
  339. 							data.done = true;
  340.  
  341. 							return this;
  342. 						},
  343.  
  344. 						// Adds a page from external data
  345.  
  346. 						addPage: function (element, page) {
  347.  
  348. 							var incPages = false,
  349. 								data = this.data(),
  350. 								lastPage = data.totalPages + 1;
  351.  
  352. 							if (page) {
  353. 								if (page == lastPage) {
  354. 									page = lastPage;
  355. 									incPages = true;
  356. 								} else if (page > lastPage)
  357. 									throw new Error('It is impossible to add the page "' + page + '", the maximum value is: "' + lastPage + '"');
  358.  
  359. 							} else {
  360. 								page = lastPage;
  361. 								incPages = true;
  362. 							}
  363.  
  364. 							if (page >= 1 && page <= lastPage) {
  365.  
  366. 								// Stop animations
  367. 								if (data.done) this.turn('stop');
  368.  
  369. 								// Move pages if it's necessary
  370. 								if (page in data.pageObjs)
  371. 									turnMethods._movePages.call(this, page, 1);
  372.  
  373. 								// Update number of pages
  374. 								if (incPages)
  375. 									data.totalPages = lastPage;
  376.  
  377. 								// Add element
  378. 								data.pageObjs[page] = $(element).addClass('turn-page p' + page);
  379.  
  380. 								// Add page
  381. 								turnMethods._addPage.call(this, page);
  382.  
  383. 								// Update view
  384. 								if (data.done)
  385. 									this.turn('update');
  386.  
  387. 								turnMethods._removeFromDOM.call(this);
  388. 							}
  389.  
  390. 							return this;
  391. 						},
  392.  
  393. 						// Adds a page from internal data
  394.  
  395. 						_addPage: function (page) {
  396.  
  397. 							var data = this.data(),
  398. 								element = data.pageObjs[page];
  399.  
  400. 							if (element)
  401. 								if (turnMethods._necessPage.call(this, page)) {
  402.  
  403. 									if (!data.pageWrap[page]) {
  404.  
  405. 										var pageWidth = (data.display == 'double') ? this.width() / 2 : this.width(),
  406. 											pageHeight = this.height();
  407.  
  408. 										element.css({ width: pageWidth, height: pageHeight });
  409.  
  410. 										// Place
  411. 										data.pagePlace[page] = page;
  412.  
  413. 										// Wrapper
  414. 										data.pageWrap[page] = $('<div/>', {
  415. 											'class': 'turn-page-wrapper',
  416. 											page: page,
  417. 											css: {
  418. 												position: 'absolute',
  419. 												overflow: 'hidden',
  420. 												width: pageWidth,
  421. 												height: pageHeight
  422. 											}
  423. 										}).
  424. 											css(pagePosition[(data.display == 'double') ? page % 2 : 0]);
  425.  
  426. 										// Append to this
  427. 										this.append(data.pageWrap[page]);
  428.  
  429. 										// Move data.pageObjs[page] (element) to wrapper
  430. 										data.pageWrap[page].prepend(data.pageObjs[page]);
  431. 									}
  432.  
  433. 									// If the page is in the current view, create the flip effect
  434. 									if (!page || turnMethods._setPageLoc.call(this, page) == 1)
  435. 										turnMethods._makeFlip.call(this, page);
  436.  
  437. 								} else {
  438.  
  439. 									// Place
  440. 									data.pagePlace[page] = 0;
  441.  
  442. 									// Remove element from the DOM
  443. 									if (data.pageObjs[page])
  444. 										data.pageObjs[page].remove();
  445.  
  446. 								}
  447.  
  448. 						},
  449.  
  450. 						// Checks if a page is in memory
  451.  
  452. 						hasPage: function (page) {
  453.  
  454. 							return page in this.data().pageObjs;
  455.  
  456. 						},
  457.  
  458. 						// Prepares the flip effect for a page
  459.  
  460. 						_makeFlip: function (page) {
  461.  
  462. 							var data = this.data();
  463.  
  464. 							if (!data.pages[page] && data.pagePlace[page] == page) {
  465.  
  466. 								var single = data.display == 'single',
  467. 									even = page % 2;
  468.  
  469. 								data.pages[page] = data.pageObjs[page].
  470. 									css({ width: (single) ? this.width() : this.width() / 2, height: this.height() }).
  471. 									flip({
  472. 										page: page,
  473. 										next: (single && page === data.totalPages) ? page - 1 : ((even || single) ? page + 1 : page - 1),
  474. 										turn: this,
  475. 										duration: data.opts.duration,
  476. 										acceleration: data.opts.acceleration,
  477. 										corners: (single) ? 'all' : ((even) ? 'forward' : 'backward'),
  478. 										backGradient: data.opts.gradients,
  479. 										frontGradient: data.opts.gradients
  480. 									}).
  481. 									flip('disable', data.disabled).
  482. 									bind('pressed', turnMethods._pressed).
  483. 									bind('released', turnMethods._released).
  484. 									bind('start', turnMethods._start).
  485. 									bind('end', turnMethods._end).
  486. 									bind('flip', turnMethods._flip);
  487. 							}
  488. 							return data.pages[page];
  489. 						},
  490.  
  491. 						// Makes pages within a range
  492.  
  493. 						_makeRange: function () {
  494.  
  495. 							var page,
  496. 								data = this.data(),
  497. 								range = this.turn('range');
  498.  
  499. 							for (page = range[0]; page <= range[1]; page++)
  500. 								turnMethods._addPage.call(this, page);
  501.  
  502. 						},
  503.  
  504. 						// Returns a range of `pagesInDOM` pages that should be in the DOM
  505. 						// Example:
  506. 						// - page of the current view, return true
  507. 						// * page is in the range, return true
  508. 						// 0 page is not in the range, return false
  509. 						//
  510. 						// 1 2-3 4-5 6-7 8-9 10-11 12-13
  511. 						//    **  **  --   **  **
  512.  
  513. 						range: function (page) {
  514.  
  515. 							var remainingPages, left, right,
  516. 								data = this.data();
  517. 							page = page || data.tpage || data.page;
  518. 							var view = turnMethods._view.call(this, page);
  519.  
  520. 							if (page < 1 || page > data.totalPages)
  521. 								throw new Error('"' + page + '" is not a page for range');
  522.  
  523. 							view[1] = view[1] || view[0];
  524.  
  525. 							if (view[0] >= 1 && view[1] <= data.totalPages) {
  526.  
  527. 								remainingPages = Math.floor((pagesInDOM - 2) / 2);
  528.  
  529. 								if (data.totalPages - view[1] > view[0]) {
  530. 									left = Math.min(view[0] - 1, remainingPages);
  531. 									right = 2 * remainingPages - left;
  532. 								} else {
  533. 									right = Math.min(data.totalPages - view[1], remainingPages);
  534. 									left = 2 * remainingPages - right;
  535. 								}
  536.  
  537. 							} else {
  538. 								left = pagesInDOM - 1;
  539. 								right = pagesInDOM - 1;
  540. 							}
  541.  
  542. 							return [Math.max(1, view[0] - left), Math.min(data.totalPages, view[1] + right)];
  543.  
  544. 						},
  545.  
  546. 						// Detects if a page is within the range of `pagesInDOM` from the current view
  547.  
  548. 						_necessPage: function (page) {
  549.  
  550. 							if (page === 0)
  551. 								return true;
  552.  
  553. 							var range = this.turn('range');
  554.  
  555. 							return page >= range[0] && page <= range[1];
  556.  
  557. 						},
  558.  
  559. 						// Releases memory by removing pages from the DOM
  560.  
  561. 						_removeFromDOM: function () {
  562.  
  563. 							var page, data = this.data();
  564.  
  565. 							for (page in data.pageWrap)
  566. 								if (has(page, data.pageWrap) && !turnMethods._necessPage.call(this, page))
  567. 									turnMethods._removePageFromDOM.call(this, page);
  568.  
  569.  
  570. 						},
  571.  
  572. 						// Removes a page from DOM and its internal references
  573.  
  574. 						_removePageFromDOM: function (page) {
  575.  
  576. 							var data = this.data();
  577.  
  578. 							if (data.pages[page]) {
  579. 								var dd = data.pages[page].data();
  580. 								if (dd.f && dd.f.fwrapper)
  581. 									dd.f.fwrapper.remove();
  582. 								data.pages[page].remove();
  583. 								delete data.pages[page];
  584. 							}
  585.  
  586. 							if (data.pageObjs[page])
  587. 								data.pageObjs[page].remove();
  588.  
  589. 							if (data.pageWrap[page]) {
  590. 								data.pageWrap[page].remove();
  591. 								delete data.pageWrap[page];
  592. 							}
  593.  
  594. 							delete data.pagePlace[page];
  595.  
  596. 						},
  597.  
  598. 						// Removes a page
  599.  
  600. 						removePage: function (page) {
  601.  
  602. 							var data = this.data();
  603.  
  604. 							if (data.pageObjs[page]) {
  605. 								// Stop animations
  606. 								this.turn('stop');
  607.  
  608. 								// Remove `page`
  609. 								turnMethods._removePageFromDOM.call(this, page);
  610. 								delete data.pageObjs[page];
  611.  
  612. 								// Move the pages behind `page`
  613. 								turnMethods._movePages.call(this, page, -1);
  614.  
  615. 								// Resize the size of this magazine
  616. 								data.totalPages = data.totalPages - 1;
  617. 								turnMethods._makeRange.call(this);
  618.  
  619. 								// Check the current view
  620. 								if (data.page > data.totalPages)
  621. 									this.turn('page', data.totalPages);
  622. 							}
  623.  
  624. 							return this;
  625.  
  626. 						},
  627.  
  628. 						// Moves pages
  629.  
  630. 						_movePages: function (from, change) {
  631.  
  632. 							var page,
  633. 								data = this.data(),
  634. 								single = data.display == 'single',
  635. 								move = function (page) {
  636.  
  637. 									var next = page + change,
  638. 										odd = next % 2;
  639.  
  640. 									if (data.pageObjs[page])
  641. 										data.pageObjs[next] = data.pageObjs[page].removeClass('page' + page).addClass('page' + next);
  642.  
  643. 									if (data.pagePlace[page] && data.pageWrap[page]) {
  644. 										data.pagePlace[next] = next;
  645. 										data.pageWrap[next] = data.pageWrap[page].css(pagePosition[(single) ? 0 : odd]).attr('page', next);
  646.  
  647. 										if (data.pages[page])
  648. 											data.pages[next] = data.pages[page].flip('options', {
  649. 												page: next,
  650. 												next: (single || odd) ? next + 1 : next - 1,
  651. 												corners: (single) ? 'all' : ((odd) ? 'forward' : 'backward')
  652. 											});
  653.  
  654. 										if (change) {
  655. 											delete data.pages[page];
  656. 											delete data.pagePlace[page];
  657. 											delete data.pageObjs[page];
  658. 											delete data.pageWrap[page];
  659. 											delete data.pageObjs[page];
  660. 										}
  661. 									}
  662. 								};
  663.  
  664. 							if (change > 0)
  665. 								for (page = data.totalPages; page >= from; page--) move(page);
  666. 							else
  667. 								for (page = from; page <= data.totalPages; page++) move(page);
  668.  
  669. 						},
  670.  
  671. 						// Sets or Gets the display mode
  672.  
  673. 						display: function (display) {
  674.  
  675. 							var data = this.data(),
  676. 								currentDisplay = data.display;
  677.  
  678. 							if (display) {
  679.  
  680. 								if ($.inArray(display, displays) == -1)
  681. 									throw new Error('"' + display + '" is not a value for display');
  682.  
  683. 								if (display == 'single') {
  684. 									if (!data.pageObjs[0]) {
  685. 										this.turn('stop').
  686. 											css({ 'overflow': 'hidden' });
  687. 										data.pageObjs[0] = $('<div />', { 'class': 'turn-page p-temporal' }).
  688. 											css({ width: this.width(), height: this.height() }).
  689. 											appendTo(this);
  690. 									}
  691. 								} else {
  692. 									if (data.pageObjs[0]) {
  693. 										this.turn('stop').
  694. 											css({ 'overflow': '' });
  695. 										data.pageObjs[0].remove();
  696. 										delete data.pageObjs[0];
  697. 									}
  698. 								}
  699.  
  700. 								data.display = display;
  701.  
  702. 								if (currentDisplay) {
  703. 									var size = this.turn('size');
  704. 									turnMethods._movePages.call(this, 1, 0);
  705. 									this.turn('size', size.width, size.height).
  706. 										turn('update');
  707. 								}
  708.  
  709. 								return this;
  710.  
  711. 							} else
  712. 								return currentDisplay;
  713.  
  714. 						},
  715.  
  716. 						// Detects if the pages are being animated
  717.  
  718. 						animating: function () {
  719.  
  720. 							return this.data().pageMv.length > 0;
  721.  
  722. 						},
  723.  
  724. 						// Disables and enables the effect
  725.  
  726. 						disable: function (bool) {
  727.  
  728. 							var page,
  729. 								data = this.data(),
  730. 								view = this.turn('view');
  731.  
  732. 							data.disabled = bool === undefined || bool === true;
  733.  
  734. 							for (page in data.pages)
  735. 								if (has(page, data.pages))
  736. 									data.pages[page].flip('disable', bool ? $.inArray(page, view) : false);
  737.  
  738. 							return this;
  739.  
  740. 						},
  741.  
  742. 						// Gets and sets the size
  743.  
  744. 						size: function (width, height) {
  745.  
  746. 							if (width && height) {
  747.  
  748. 								var data = this.data(), pageWidth = (data.display == 'double') ? width / 2 : width, page;
  749.  
  750. 								this.css({ width: width, height: height });
  751.  
  752. 								if (data.pageObjs[0])
  753. 									data.pageObjs[0].css({ width: pageWidth, height: height });
  754.  
  755. 								for (page in data.pageWrap) {
  756. 									if (!has(page, data.pageWrap)) continue;
  757. 									data.pageObjs[page].css({ width: pageWidth, height: height });
  758. 									data.pageWrap[page].css({ width: pageWidth, height: height });
  759. 									if (data.pages[page])
  760. 										data.pages[page].css({ width: pageWidth, height: height });
  761. 								}
  762.  
  763. 								this.turn('resize');
  764.  
  765. 								return this;
  766.  
  767. 							} else {
  768.  
  769. 								return { width: this.width(), height: this.height() };
  770.  
  771. 							}
  772. 						},
  773.  
  774. 						// Resizes each page
  775.  
  776. 						resize: function () {
  777.  
  778. 							var page, data = this.data();
  779.  
  780. 							if (data.pages[0]) {
  781. 								data.pageWrap[0].css({ left: -this.width() });
  782. 								data.pages[0].flip('resize', true);
  783. 							}
  784.  
  785. 							for (page = 1; page <= data.totalPages; page++)
  786. 								if (data.pages[page])
  787. 									data.pages[page].flip('resize', true);
  788.  
  789.  
  790. 						},
  791.  
  792. 						// Removes an animation from the cache
  793.  
  794. 						_removeMv: function (page) {
  795.  
  796. 							var i, data = this.data();
  797.  
  798. 							for (i = 0; i < data.pageMv.length; i++)
  799. 								if (data.pageMv[i] == page) {
  800. 									data.pageMv.splice(i, 1);
  801. 									return true;
  802. 								}
  803.  
  804. 							return false;
  805.  
  806. 						},
  807.  
  808. 						// Adds an animation to the cache
  809.  
  810. 						_addMv: function (page) {
  811.  
  812. 							var data = this.data();
  813.  
  814. 							turnMethods._removeMv.call(this, page);
  815. 							data.pageMv.push(page);
  816.  
  817. 						},
  818.  
  819. 						// Gets indexes for a view
  820.  
  821. 						_view: function (page) {
  822.  
  823. 							var data = this.data();
  824. 							page = page || data.page;
  825.  
  826. 							if (data.display == 'double')
  827. 								return (page % 2) ? [page - 1, page] : [page, page + 1];
  828. 							else
  829. 								return [page];
  830.  
  831. 						},
  832.  
  833. 						// Gets a view
  834.  
  835. 						view: function (page) {
  836.  
  837. 							var data = this.data(), view = turnMethods._view.call(this, page);
  838.  
  839. 							return (data.display == 'double') ? [(view[0] > 0) ? view[0] : 0, (view[1] <= data.totalPages) ? view[1] : 0]
  840. 								: [(view[0] > 0 && view[0] <= data.totalPages) ? view[0] : 0];
  841.  
  842. 						},
  843.  
  844. 						// Stops animations
  845.  
  846. 						stop: function (ok) {
  847.  
  848. 							var i, opts, data = this.data(), pages = data.pageMv;
  849.  
  850. 							data.pageMv = [];
  851.  
  852. 							if (data.tpage) {
  853. 								data.page = data.tpage;
  854. 								delete data['tpage'];
  855. 							}
  856.  
  857. 							for (i in pages) {
  858. 								if (!has(i, pages)) continue;
  859. 								opts = data.pages[pages[i]].data().f.opts;
  860. 								flipMethods._moveFoldingPage.call(data.pages[pages[i]], null);
  861. 								data.pages[pages[i]].flip('hideFoldedPage');
  862. 								data.pagePlace[opts.next] = opts.next;
  863.  
  864. 								if (opts.force) {
  865. 									opts.next = (opts.page % 2 === 0) ? opts.page - 1 : opts.page + 1;
  866. 									delete opts['force'];
  867. 								}
  868.  
  869. 							}
  870.  
  871. 							this.turn('update');
  872.  
  873. 							return this;
  874. 						},
  875.  
  876. 						// Gets and sets the number of pages
  877.  
  878. 						pages: function (pages) {
  879.  
  880. 							var data = this.data();
  881.  
  882. 							if (pages) {
  883. 								if (pages < data.totalPages) {
  884.  
  885. 									for (var page = pages + 1; page <= data.totalPages; page++)
  886. 										this.turn('removePage', page);
  887.  
  888. 									if (this.turn('page') > pages)
  889. 										this.turn('page', pages);
  890. 								}
  891.  
  892. 								data.totalPages = pages;
  893.  
  894. 								return this;
  895. 							} else
  896. 								return data.totalPages;
  897.  
  898. 						},
  899.  
  900. 						// Sets a page without effect
  901.  
  902. 						_fitPage: function (page, ok) {
  903.  
  904. 							var data = this.data(), newView = this.turn('view', page);
  905.  
  906. 							if (data.page != page) {
  907. 								this.trigger('turning', [page, newView]);
  908. 								if ($.inArray(1, newView) != -1) this.trigger('first');
  909. 								if ($.inArray(data.totalPages, newView) != -1) this.trigger('last');
  910. 							}
  911.  
  912. 							if (!data.pageObjs[page])
  913. 								return;
  914.  
  915. 							data.tpage = page;
  916.  
  917. 							this.turn('stop', ok);
  918. 							turnMethods._removeFromDOM.call(this);
  919. 							turnMethods._makeRange.call(this);
  920. 							this.trigger('turned', [page, newView]);
  921.  
  922. 						},
  923.  
  924. 						// Turns to a page
  925.  
  926. 						_turnPage: function (page) {
  927.  
  928. 							var current, next,
  929. 								data = this.data(),
  930. 								view = this.turn('view'),
  931. 								newView = this.turn('view', page);
  932.  
  933. 							if (data.page != page) {
  934. 								this.trigger('turning', [page, newView]);
  935. 								if ($.inArray(1, newView) != -1) this.trigger('first');
  936. 								if ($.inArray(data.totalPages, newView) != -1) this.trigger('last');
  937. 							}
  938.  
  939. 							if (!data.pageObjs[page])
  940. 								return;
  941.  
  942. 							data.tpage = page;
  943.  
  944. 							this.turn('stop');
  945.  
  946. 							turnMethods._makeRange.call(this);
  947.  
  948. 							if (data.display == 'single') {
  949. 								current = view[0];
  950. 								next = newView[0];
  951. 							} else if (view[1] && page > view[1]) {
  952. 								current = view[1];
  953. 								next = newView[0];
  954. 							} else if (view[0] && page < view[0]) {
  955. 								current = view[0];
  956. 								next = newView[1];
  957. 							}
  958.  
  959. 							if (data.pages[current]) {
  960.  
  961. 								var opts = data.pages[current].data().f.opts;
  962. 								data.tpage = next;
  963.  
  964. 								if (opts.next != next) {
  965. 									opts.next = next;
  966. 									data.pagePlace[next] = opts.page;
  967. 									opts.force = true;
  968. 								}
  969.  
  970. 								if (data.display == 'single')
  971. 									data.pages[current].flip('turnPage', (newView[0] > view[0]) ? 'br' : 'bl');
  972. 								else
  973. 									data.pages[current].flip('turnPage');
  974. 							}
  975.  
  976. 						},
  977.  
  978. 						// Gets and sets a page
  979.  
  980. 						page: function (page) {
  981.  
  982. 							page = parseInt(page, 10);
  983.  
  984. 							var data = this.data();
  985.  
  986. 							if (page > 0 && page <= data.totalPages) {
  987. 								if (!data.done || $.inArray(page, this.turn('view')) != -1)
  988. 									turnMethods._fitPage.call(this, page);
  989. 								else
  990. 									turnMethods._turnPage.call(this, page);
  991.  
  992. 								return this;
  993.  
  994. 							} else
  995. 								return data.page;
  996.  
  997. 						},
  998.  
  999. 						// Turns to the next view
  1000.  
  1001. 						next: function () {
  1002.  
  1003. 							var data = this.data();
  1004. 							return this.turn('page', turnMethods._view.call(this, data.page).pop() + 1);
  1005.  
  1006. 						},
  1007.  
  1008. 						// Turns to the previous view
  1009.  
  1010. 						previous: function () {
  1011.  
  1012. 							var data = this.data();
  1013. 							return this.turn('page', turnMethods._view.call(this, data.page).shift() - 1);
  1014.  
  1015. 						},
  1016.  
  1017. 						// Adds a motion to the internal list
  1018.  
  1019. 						_addMotionPage: function () {
  1020.  
  1021. 							var opts = $(this).data().f.opts,
  1022. 								turn = opts.turn,
  1023. 								dd = turn.data();
  1024.  
  1025. 							opts.pageMv = opts.page;
  1026. 							turnMethods._addMv.call(turn, opts.pageMv);
  1027. 							dd.pagePlace[opts.next] = opts.page;
  1028. 							turn.turn('update');
  1029.  
  1030. 						},
  1031.  
  1032. 						// This event is called in context of flip
  1033.  
  1034. 						_start: function (e, opts, corner) {
  1035.  
  1036. 							var data = opts.turn.data(),
  1037. 								event = $.Event('start');
  1038.  
  1039. 							e.stopPropagation();
  1040.  
  1041. 							opts.turn.trigger(event, [opts, corner]);
  1042.  
  1043. 							if (event.isDefaultPrevented()) {
  1044. 								e.preventDefault();
  1045. 								return;
  1046. 							}
  1047.  
  1048. 							if (data.display == 'single') {
  1049.  
  1050. 								var left = corner.charAt(1) == 'l';
  1051. 								if ((opts.page == 1 && left) || (opts.page == data.totalPages && !left))
  1052. 									e.preventDefault();
  1053. 								else {
  1054. 									if (left) {
  1055. 										opts.next = (opts.next < opts.page) ? opts.next : opts.page - 1;
  1056. 										opts.force = true;
  1057. 									} else
  1058. 										opts.next = (opts.next > opts.page) ? opts.next : opts.page + 1;
  1059. 								}
  1060.  
  1061. 							}
  1062.  
  1063. 							turnMethods._addMotionPage.call(this);
  1064. 						},
  1065.  
  1066. 						// This event is called in context of flip
  1067.  
  1068. 						_end: function (e, turned) {
  1069.  
  1070. 							var that = $(this),
  1071. 								data = that.data().f,
  1072. 								opts = data.opts,
  1073. 								turn = opts.turn,
  1074. 								dd = turn.data();
  1075.  
  1076. 							e.stopPropagation();
  1077.  
  1078. 							if (turned || dd.tpage) {
  1079.  
  1080. 								if (dd.tpage == opts.next || dd.tpage == opts.page) {
  1081. 									delete dd['tpage'];
  1082. 									turnMethods._fitPage.call(turn, dd.tpage || opts.next, true);
  1083. 								}
  1084.  
  1085. 							} else {
  1086. 								turnMethods._removeMv.call(turn, opts.pageMv);
  1087. 								turn.turn('update');
  1088. 							}
  1089.  
  1090. 						},
  1091.  
  1092. 						// This event is called in context of flip
  1093.  
  1094. 						_pressed: function () {
  1095.  
  1096. 							var page,
  1097. 								that = $(this),
  1098. 								data = that.data().f,
  1099. 								turn = data.opts.turn,
  1100. 								pages = turn.data().pages;
  1101.  
  1102. 							for (page in pages)
  1103. 								if (page != data.opts.page)
  1104. 									pages[page].flip('disable', true);
  1105.  
  1106. 							return data.time = new Date().getTime();
  1107.  
  1108. 						},
  1109.  
  1110. 						// This event is called in context of flip
  1111.  
  1112. 						_released: function (e, point) {
  1113.  
  1114. 							var that = $(this),
  1115. 								data = that.data().f;
  1116.  
  1117. 							e.stopPropagation();
  1118.  
  1119. 							if ((new Date().getTime()) - data.time < 200 || point.x < 0 || point.x > $(this).width()) {
  1120. 								e.preventDefault();
  1121. 								data.opts.turn.data().tpage = data.opts.next;
  1122. 								data.opts.turn.turn('update');
  1123. 								$(that).flip('turnPage');
  1124. 							}
  1125.  
  1126. 						},
  1127.  
  1128. 						// This event is called in context of flip
  1129.  
  1130. 						_flip: function () {
  1131.  
  1132. 							var opts = $(this).data().f.opts;
  1133.  
  1134. 							opts.turn.trigger('turn', [opts.next]);
  1135.  
  1136. 						},
  1137.  
  1138. 						// Calculate the z-index value for pages during the animation
  1139.  
  1140. 						calculateZ: function (mv) {
  1141.  
  1142. 							var i, page, nextPage, placePage, dpage,
  1143. 								that = this,
  1144. 								data = this.data(),
  1145. 								view = this.turn('view'),
  1146. 								currentPage = view[0] || view[1],
  1147. 								r = { pageZ: {}, partZ: {}, pageV: {} },
  1148.  
  1149. 								addView = function (page) {
  1150. 									var view = that.turn('view', page);
  1151. 									if (view[0]) r.pageV[view[0]] = true;
  1152. 									if (view[1]) r.pageV[view[1]] = true;
  1153. 								};
  1154.  
  1155. 							for (i = 0; i < mv.length; i++) {
  1156. 								page = mv[i];
  1157. 								nextPage = data.pages[page].data().f.opts.next;
  1158. 								placePage = data.pagePlace[page];
  1159. 								addView(page);
  1160. 								addView(nextPage);
  1161. 								dpage = (data.pagePlace[nextPage] == nextPage) ? nextPage : page;
  1162. 								r.pageZ[dpage] = data.totalPages - Math.abs(currentPage - dpage);
  1163. 								r.partZ[placePage] = data.totalPages * 2 + Math.abs(currentPage - dpage);
  1164. 							}
  1165.  
  1166. 							return r;
  1167. 						},
  1168.  
  1169. 						// Updates the z-index and display property of every page
  1170.  
  1171. 						update: function () {
  1172.  
  1173. 							var page,
  1174. 								data = this.data();
  1175.  
  1176. 							if (data.pageMv.length && data.pageMv[0] !== 0) {
  1177.  
  1178. 								// Update motion
  1179.  
  1180. 								var apage,
  1181. 									pos = this.turn('calculateZ', data.pageMv),
  1182. 									view = this.turn('view', data.tpage);
  1183.  
  1184. 								if (data.pagePlace[view[0]] == view[0]) apage = view[0];
  1185. 								else if (data.pagePlace[view[1]] == view[1]) apage = view[1];
  1186.  
  1187. 								for (page in data.pageWrap) {
  1188.  
  1189. 									if (!has(page, data.pageWrap)) continue;
  1190.  
  1191. 									data.pageWrap[page].css({ display: (pos.pageV[page]) ? '' : 'none', 'z-index': pos.pageZ[page] || 0 });
  1192.  
  1193. 									if (data.pages[page]) {
  1194. 										data.pages[page].flip('z', pos.partZ[page] || null);
  1195.  
  1196. 										if (pos.pageV[page])
  1197. 											data.pages[page].flip('resize');
  1198.  
  1199. 										if (data.tpage)
  1200. 											data.pages[page].flip('disable', true); // data.disabled || page!=apage
  1201. 									}
  1202. 								}
  1203.  
  1204. 							} else {
  1205.  
  1206. 								// Update static pages
  1207.  
  1208. 								for (page in data.pageWrap) {
  1209. 									if (!has(page, data.pageWrap)) continue;
  1210. 									var pageLocation = turnMethods._setPageLoc.call(this, page);
  1211. 									if (data.pages[page])
  1212. 										data.pages[page].flip('disable', data.disabled || pageLocation != 1).flip('z', null);
  1213. 								}
  1214. 							}
  1215. 						},
  1216.  
  1217. 						// Sets the z-index and display property of a page
  1218. 						// It depends on the current view
  1219.  
  1220. 						_setPageLoc: function (page) {
  1221.  
  1222. 							var data = this.data(),
  1223. 								view = this.turn('view');
  1224.  
  1225. 							if (page == view[0] || page == view[1]) {
  1226. 								data.pageWrap[page].css({ 'z-index': data.totalPages, display: '' });
  1227. 								return 1;
  1228. 							} else if ((data.display == 'single' && page == view[0] + 1) || (data.display == 'double' && page == view[0] - 2 || page == view[1] + 2)) {
  1229. 								data.pageWrap[page].css({ 'z-index': data.totalPages - 1, display: '' });
  1230. 								return 2;
  1231. 							} else {
  1232. 								data.pageWrap[page].css({ 'z-index': 0, display: 'none' });
  1233. 								return 0;
  1234. 							}
  1235. 						}
  1236. 					},
  1237.  
  1238. 					// Methods and properties for the flip page effect
  1239.  
  1240. 					flipMethods = {
  1241.  
  1242. 						// Constructor
  1243.  
  1244. 						init: function (opts) {
  1245.  
  1246. 							if (opts.gradients) {
  1247. 								opts.frontGradient = true;
  1248. 								opts.backGradient = true;
  1249. 							}
  1250.  
  1251. 							this.data({ f: {} });
  1252. 							this.flip('options', opts);
  1253.  
  1254. 							flipMethods._addPageWrapper.call(this);
  1255.  
  1256. 							return this;
  1257. 						},
  1258.  
  1259. 						setData: function (d) {
  1260.  
  1261. 							var data = this.data();
  1262.  
  1263. 							data.f = $.extend(data.f, d);
  1264.  
  1265. 							return this;
  1266. 						},
  1267.  
  1268. 						options: function (opts) {
  1269.  
  1270. 							var data = this.data().f;
  1271.  
  1272. 							if (opts) {
  1273. 								flipMethods.setData.call(this, { opts: $.extend({}, data.opts || flipOptions, opts) });
  1274. 								return this;
  1275. 							} else
  1276. 								return data.opts;
  1277.  
  1278. 						},
  1279.  
  1280. 						z: function (z) {
  1281.  
  1282. 							var data = this.data().f;
  1283. 							data.opts['z-index'] = z;
  1284. 							data.fwrapper.css({ 'z-index': z || parseInt(data.parent.css('z-index'), 10) || 0 });
  1285.  
  1286. 							return this;
  1287. 						},
  1288.  
  1289. 						_cAllowed: function () {
  1290.  
  1291. 							return corners[this.data().f.opts.corners] || this.data().f.opts.corners;
  1292.  
  1293. 						},
  1294.  
  1295. 						_cornerActivated: function (e) {
  1296. 							if (e.originalEvent === undefined) {
  1297. 								return false;
  1298. 							}
  1299.  
  1300. 							e = (isTouch) ? e.originalEvent.touches : [e];
  1301.  
  1302. 							var data = this.data().f,
  1303. 								pos = data.parent.offset(),
  1304. 								width = this.width(),
  1305. 								height = this.height(),
  1306. 								c = { x: Math.max(0, e[0].pageX - pos.left), y: Math.max(0, e[0].pageY - pos.top) },
  1307. 								csz = data.opts.cornerSize,
  1308. 								allowedCorners = flipMethods._cAllowed.call(this);
  1309.  
  1310. 							if (c.x <= 0 || c.y <= 0 || c.x >= width || c.y >= height) return false;
  1311.  
  1312. 							if (c.y < csz) c.corner = 't';
  1313. 							else if (c.y >= height - csz) c.corner = 'b';
  1314. 							else return false;
  1315.  
  1316. 							if (c.x <= csz) c.corner += 'l';
  1317. 							else if (c.x >= width - csz) c.corner += 'r';
  1318. 							else return false;
  1319.  
  1320. 							return ($.inArray(c.corner, allowedCorners) == -1) ? false : c;
  1321.  
  1322. 						},
  1323.  
  1324. 						_c: function (corner, opts) {
  1325.  
  1326. 							opts = opts || 0;
  1327. 							return ({
  1328. 								tl: point2D(opts, opts),
  1329. 								tr: point2D(this.width() - opts, opts),
  1330. 								bl: point2D(opts, this.height() - opts),
  1331. 								br: point2D(this.width() - opts, this.height() - opts)
  1332. 							})[corner];
  1333.  
  1334. 						},
  1335.  
  1336. 						_c2: function (corner) {
  1337.  
  1338. 							return {
  1339. 								tl: point2D(this.width() * 2, 0),
  1340. 								tr: point2D(-this.width(), 0),
  1341. 								bl: point2D(this.width() * 2, this.height()),
  1342. 								br: point2D(-this.width(), this.height())
  1343. 							}[corner];
  1344.  
  1345. 						},
  1346.  
  1347. 						_foldingPage: function (corner) {
  1348.  
  1349. 							var opts = this.data().f.opts;
  1350.  
  1351. 							if (opts.folding) return opts.folding;
  1352. 							else if (opts.turn) {
  1353. 								var data = opts.turn.data();
  1354. 								if (data.display == 'single')
  1355. 									return (data.pageObjs[opts.next]) ? data.pageObjs[0] : null;
  1356. 								else
  1357. 									return data.pageObjs[opts.next];
  1358. 							}
  1359.  
  1360. 						},
  1361.  
  1362. 						_backGradient: function () {
  1363.  
  1364. 							var data = this.data().f,
  1365. 								turn = data.opts.turn,
  1366. 								gradient = data.opts.backGradient &&
  1367. 									(!turn || turn.data().display == 'single' || (data.opts.page != 2 && data.opts.page != turn.data().totalPages - 1));
  1368.  
  1369.  
  1370. 							if (gradient && !data.bshadow)
  1371. 								data.bshadow = $('<div/>', divAtt(0, 0, 1)).
  1372. 									css({ 'position': '', width: this.width(), height: this.height() }).
  1373. 									appendTo(data.parent);
  1374.  
  1375. 							return gradient;
  1376.  
  1377. 						},
  1378.  
  1379. 						resize: function (full) {
  1380.  
  1381. 							var data = this.data().f,
  1382. 								width = this.width(),
  1383. 								height = this.height(),
  1384. 								size = Math.round(Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)));
  1385.  
  1386. 							if (full) {
  1387. 								data.wrapper.css({ width: size, height: size });
  1388. 								data.fwrapper.css({ width: size, height: size }).
  1389. 									children(':first-child').
  1390. 									css({ width: width, height: height });
  1391.  
  1392. 								data.fpage.css({ width: height, height: width });
  1393.  
  1394. 								if (data.opts.frontGradient)
  1395. 									data.ashadow.css({ width: height, height: width });
  1396.  
  1397. 								if (flipMethods._backGradient.call(this))
  1398. 									data.bshadow.css({ width: width, height: height });
  1399. 							}
  1400.  
  1401. 							if (data.parent.is(':visible')) {
  1402. 								data.fwrapper.css({
  1403. 									top: data.parent.offset().top,
  1404. 									left: data.parent.offset().left
  1405. 								});
  1406.  
  1407. 								if (data.opts.turn)
  1408. 									data.fparent.css({ top: -data.opts.turn.offset().top, left: -data.opts.turn.offset().left });
  1409. 							}
  1410.  
  1411. 							this.flip('z', data.opts['z-index']);
  1412.  
  1413. 						},
  1414.  
  1415. 						// Prepares the page by adding a general wrapper and another objects
  1416.  
  1417. 						_addPageWrapper: function () {
  1418.  
  1419. 							var att,
  1420. 								data = this.data().f,
  1421. 								parent = this.parent();
  1422.  
  1423. 							if (!data.wrapper) {
  1424.  
  1425. 								var left = this.css('left'),
  1426. 									top = this.css('top'),
  1427. 									width = this.width(),
  1428. 									height = this.height(),
  1429. 									size = Math.round(Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)));
  1430.  
  1431. 								data.parent = parent;
  1432. 								data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent : $('#turn-fwrappers');
  1433.  
  1434. 								if (!data.fparent) {
  1435. 									var fparent = $('<div/>', { css: { 'pointer-events': 'none' } }).hide();
  1436. 									fparent.data().flips = 0;
  1437.  
  1438. 									if (data.opts.turn) {
  1439. 										fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css).
  1440. 											appendTo(data.opts.turn);
  1441.  
  1442. 										data.opts.turn.data().fparent = fparent;
  1443. 									} else {
  1444. 										fparent.css(divAtt(0, 0, 'auto', 'visible').css).
  1445. 											attr('id', 'turn-fwrappers').
  1446. 											appendTo($('body'));
  1447. 									}
  1448.  
  1449. 									data.fparent = fparent;
  1450. 								}
  1451.  
  1452. 								this.css({ position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto' });
  1453.  
  1454. 								data.wrapper = $('<div/>', divAtt(0, 0, this.css('z-index'))).
  1455. 									appendTo(parent).
  1456. 									prepend(this);
  1457.  
  1458. 								data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)).
  1459. 									hide().
  1460. 									appendTo(data.fparent);
  1461.  
  1462. 								data.fpage = $('<div/>', { css: { cursor: 'default' } }).
  1463. 									appendTo($('<div/>', divAtt(0, 0, 0, 'visible')).
  1464. 										appendTo(data.fwrapper));
  1465.  
  1466. 								if (data.opts.frontGradient)
  1467. 									data.ashadow = $('<div/>', divAtt(0, 0, 1)).
  1468. 										appendTo(data.fpage);
  1469.  
  1470. 								// Save data
  1471.  
  1472. 								flipMethods.setData.call(this, data);
  1473.  
  1474. 								// Set size
  1475. 								flipMethods.resize.call(this, true);
  1476. 							}
  1477.  
  1478. 						},
  1479.  
  1480. 						// Takes a 2P point from the screen and applies the transformation
  1481.  
  1482. 						_fold: function (point) {
  1483.  
  1484. 							var that = this,
  1485. 								a = 0,
  1486. 								alpha = 0,
  1487. 								beta,
  1488. 								px,
  1489. 								gradientEndPointA,
  1490. 								gradientEndPointB,
  1491. 								gradientStartV,
  1492. 								gradientSize,
  1493. 								gradientOpacity,
  1494. 								mv = point2D(0, 0),
  1495. 								df = point2D(0, 0),
  1496. 								tr = point2D(0, 0),
  1497. 								width = this.width(),
  1498. 								height = this.height(),
  1499. 								folding = flipMethods._foldingPage.call(this),
  1500. 								tan = Math.tan(alpha),
  1501. 								data = this.data().f,
  1502. 								ac = data.opts.acceleration,
  1503. 								h = data.wrapper.height(),
  1504. 								o = flipMethods._c.call(this, point.corner),
  1505. 								top = point.corner.substr(0, 1) == 't',
  1506. 								left = point.corner.substr(1, 1) == 'l',
  1507.  
  1508. 								compute = function () {
  1509. 									var rel = point2D((o.x) ? o.x - point.x : point.x, (o.y) ? o.y - point.y : point.y),
  1510. 										tan = (Math.atan2(rel.y, rel.x)),
  1511. 										middle;
  1512.  
  1513. 									alpha = A90 - tan;
  1514. 									a = deg(alpha);
  1515. 									middle = point2D((left) ? width - rel.x / 2 : point.x + rel.x / 2, rel.y / 2);
  1516.  
  1517. 									var gamma = alpha - Math.atan2(middle.y, middle.x),
  1518. 										distance = Math.max(0, Math.sin(gamma) * Math.sqrt(Math.pow(middle.x, 2) + Math.pow(middle.y, 2)));
  1519.  
  1520. 									tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha));
  1521.  
  1522. 									if (alpha > A90) {
  1523.  
  1524. 										tr.x = tr.x + Math.abs(tr.y * Math.tan(tan));
  1525. 										tr.y = 0;
  1526.  
  1527. 										if (Math.round(tr.x * Math.tan(PI - alpha)) < height) {
  1528.  
  1529. 											point.y = Math.sqrt(Math.pow(height, 2) + 2 * middle.x * rel.x);
  1530. 											if (top) point.y = height - point.y;
  1531. 											return compute();
  1532.  
  1533. 										}
  1534. 									}
  1535.  
  1536. 									if (alpha > A90) {
  1537. 										var beta = PI - alpha, dd = h - height / Math.sin(beta);
  1538. 										mv = point2D(Math.round(dd * Math.cos(beta)), Math.round(dd * Math.sin(beta)));
  1539. 										if (left) mv.x = - mv.x;
  1540. 										if (top) mv.y = - mv.y;
  1541. 									}
  1542.  
  1543. 									px = Math.round(tr.y / Math.tan(alpha) + tr.x);
  1544.  
  1545. 									var side = width - px,
  1546. 										sideX = side * Math.cos(alpha * 2),
  1547. 										sideY = side * Math.sin(alpha * 2);
  1548. 									df = point2D(Math.round((left ? side - sideX : px + sideX)), Math.round((top) ? sideY : height - sideY));
  1549.  
  1550.  
  1551. 									// GRADIENTS
  1552.  
  1553. 									gradientSize = side * Math.sin(alpha);
  1554. 									var endingPoint = flipMethods._c2.call(that, point.corner),
  1555. 										far = Math.sqrt(Math.pow(endingPoint.x - point.x, 2) + Math.pow(endingPoint.y - point.y, 2));
  1556.  
  1557. 									gradientOpacity = (far < width) ? far / width : 1;
  1558.  
  1559.  
  1560. 									if (data.opts.frontGradient) {
  1561.  
  1562. 										gradientStartV = gradientSize > 100 ? (gradientSize - 100) / gradientSize : 0;
  1563. 										gradientEndPointA = point2D(gradientSize * Math.sin(A90 - alpha) / height * 100, gradientSize * Math.cos(A90 - alpha) / width * 100);
  1564.  
  1565. 										if (top) gradientEndPointA.y = 100 - gradientEndPointA.y;
  1566. 										if (left) gradientEndPointA.x = 100 - gradientEndPointA.x;
  1567. 									}
  1568.  
  1569. 									if (flipMethods._backGradient.call(that)) {
  1570.  
  1571. 										gradientEndPointB = point2D(gradientSize * Math.sin(alpha) / width * 100, gradientSize * Math.cos(alpha) / height * 100);
  1572. 										if (!left) gradientEndPointB.x = 100 - gradientEndPointB.x;
  1573. 										if (!top) gradientEndPointB.y = 100 - gradientEndPointB.y;
  1574. 									}
  1575. 									//
  1576.  
  1577. 									tr.x = Math.round(tr.x);
  1578. 									tr.y = Math.round(tr.y);
  1579.  
  1580. 									return true;
  1581. 								},
  1582.  
  1583. 								transform = function (tr, c, x, a) {
  1584.  
  1585. 									var f = ['0', 'auto'], mvW = (width - h) * x[0] / 100, mvH = (height - h) * x[1] / 100,
  1586. 										v = { left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]] },
  1587. 										aliasingFk = (a != 90 && a != -90) ? (left ? -1 : 1) : 0;
  1588.  
  1589. 									x = x[0] + '% ' + x[1] + '%';
  1590.  
  1591. 									that.css(v).transform(rotate(a) + translate(tr.x + aliasingFk, tr.y, ac), x);
  1592.  
  1593. 									data.fpage.parent().css(v);
  1594. 									data.wrapper.transform(translate(-tr.x + mvW - aliasingFk, -tr.y + mvH, ac) + rotate(-a), x);
  1595.  
  1596. 									data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), x);
  1597. 									data.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x, tr.y + df.y - mv.y, ac), x);
  1598.  
  1599. 									if (data.opts.frontGradient)
  1600. 										gradient(data.ashadow,
  1601. 											point2D(left ? 100 : 0, top ? 100 : 0),
  1602. 											point2D(gradientEndPointA.x, gradientEndPointA.y),
  1603. 											[[gradientStartV, 'rgba(0,0,0,0)'],
  1604. 											[((1 - gradientStartV) * 0.8) + gradientStartV, 'rgba(0,0,0,' + (0.2 * gradientOpacity) + ')'],
  1605. 											[1, 'rgba(255,255,255,' + (0.2 * gradientOpacity) + ')']],
  1606. 											3,
  1607. 											alpha);
  1608.  
  1609. 									if (flipMethods._backGradient.call(that))
  1610. 										gradient(data.bshadow,
  1611. 											point2D(left ? 0 : 100, top ? 0 : 100),
  1612. 											point2D(gradientEndPointB.x, gradientEndPointB.y),
  1613. 											[[0.8, 'rgba(0,0,0,0)'],
  1614. 											[1, 'rgba(0,0,0,' + (0.3 * gradientOpacity) + ')'],
  1615. 											[1, 'rgba(0,0,0,0)']],
  1616. 											3);
  1617.  
  1618. 								};
  1619.  
  1620. 							switch (point.corner) {
  1621. 								case 'tl':
  1622. 									point.x = Math.max(point.x, 1);
  1623. 									compute();
  1624. 									transform(tr, [1, 0, 0, 1], [100, 0], a);
  1625. 									data.fpage.transform(translate(-height, -width, ac) + rotate(90 - a * 2), '100% 100%');
  1626. 									folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
  1627. 									break;
  1628. 								case 'tr':
  1629. 									point.x = Math.min(point.x, width - 1);
  1630. 									compute();
  1631. 									transform(point2D(-tr.x, tr.y), [0, 0, 0, 1], [0, 0], -a);
  1632. 									data.fpage.transform(translate(0, -width, ac) + rotate(-90 + a * 2), '0% 100%');
  1633. 									folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
  1634. 									break;
  1635. 								case 'bl':
  1636. 									point.x = Math.max(point.x, 1);
  1637. 									compute();
  1638. 									transform(point2D(tr.x, -tr.y), [1, 1, 0, 0], [100, 100], -a);
  1639. 									data.fpage.transform(translate(-height, 0, ac) + rotate(-90 + a * 2), '100% 0%');
  1640. 									folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
  1641. 									break;
  1642. 								case 'br':
  1643. 									point.x = Math.min(point.x, width - 1);
  1644. 									compute();
  1645. 									transform(point2D(-tr.x, -tr.y), [0, 1, 1, 0], [0, 100], a);
  1646. 									data.fpage.transform(rotate(90 - a * 2), '0% 0%');
  1647. 									folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
  1648.  
  1649. 									break;
  1650. 							}
  1651.  
  1652. 							data.point = point;
  1653.  
  1654. 						},
  1655.  
  1656. 						_moveFoldingPage: function (bool) {
  1657.  
  1658. 							var data = this.data().f,
  1659. 								folding = flipMethods._foldingPage.call(this);
  1660.  
  1661. 							if (folding) {
  1662. 								if (bool) {
  1663. 									if (!data.fpage.children()[data.ashadow ? '1' : '0']) {
  1664. 										flipMethods.setData.call(this, { backParent: folding.parent() });
  1665. 										data.fpage.prepend(folding);
  1666. 									}
  1667. 								} else {
  1668. 									if (data.backParent)
  1669. 										data.backParent.prepend(folding);
  1670.  
  1671. 								}
  1672. 							}
  1673.  
  1674. 						},
  1675.  
  1676. 						_showFoldedPage: function (c, animate) {
  1677.  
  1678. 							var folding = flipMethods._foldingPage.call(this),
  1679. 								dd = this.data(),
  1680. 								data = dd.f;
  1681.  
  1682. 							if (!data.point || data.point.corner != c.corner) {
  1683. 								var event = $.Event('start');
  1684. 								this.trigger(event, [data.opts, c.corner]);
  1685.  
  1686. 								if (event.isDefaultPrevented())
  1687. 									return false;
  1688. 							}
  1689.  
  1690.  
  1691. 							if (folding) {
  1692.  
  1693. 								if (animate) {
  1694.  
  1695. 									var that = this, point = (data.point && data.point.corner == c.corner) ? data.point : flipMethods._c.call(this, c.corner, 1);
  1696.  
  1697. 									this.animatef({
  1698. 										from: [point.x, point.y], to: [c.x, c.y], duration: 500, frame: function (v) {
  1699. 											c.x = Math.round(v[0]);
  1700. 											c.y = Math.round(v[1]);
  1701. 											flipMethods._fold.call(that, c);
  1702. 										}
  1703. 									});
  1704.  
  1705. 								} else {
  1706.  
  1707. 									flipMethods._fold.call(this, c);
  1708. 									if (dd.effect && !dd.effect.turning)
  1709. 										this.animatef(false);
  1710.  
  1711. 								}
  1712.  
  1713. 								if (!data.fwrapper.is(':visible')) {
  1714. 									data.fparent.show().data().flips++;
  1715. 									flipMethods._moveFoldingPage.call(this, true);
  1716. 									data.fwrapper.show();
  1717.  
  1718. 									if (data.bshadow)
  1719. 										data.bshadow.show();
  1720. 								}
  1721.  
  1722. 								return true;
  1723. 							}
  1724.  
  1725. 							return false;
  1726. 						},
  1727.  
  1728. 						hide: function () {
  1729.  
  1730. 							var data = this.data().f,
  1731. 								folding = flipMethods._foldingPage.call(this);
  1732.  
  1733. 							if ((--data.fparent.data().flips) === 0)
  1734. 								data.fparent.hide();
  1735.  
  1736. 							this.css({ left: 0, top: 0, right: 'auto', bottom: 'auto' }).transform('', '0% 100%');
  1737.  
  1738. 							data.wrapper.transform('', '0% 100%');
  1739.  
  1740. 							data.fwrapper.hide();
  1741.  
  1742. 							if (data.bshadow)
  1743. 								data.bshadow.hide();
  1744.  
  1745. 							folding.transform('', '0% 0%');
  1746.  
  1747. 							return this;
  1748. 						},
  1749.  
  1750. 						hideFoldedPage: function (animate) {
  1751.  
  1752. 							var data = this.data().f;
  1753.  
  1754. 							if (!data.point) return;
  1755.  
  1756. 							var that = this,
  1757. 								p1 = data.point,
  1758. 								hide = function () {
  1759. 									data.point = null;
  1760. 									that.flip('hide');
  1761. 									that.trigger('end', [false]);
  1762. 								};
  1763.  
  1764. 							if (animate) {
  1765. 								var p4 = flipMethods._c.call(this, p1.corner),
  1766. 									top = (p1.corner.substr(0, 1) == 't'),
  1767. 									delta = (top) ? Math.min(0, p1.y - p4.y) / 2 : Math.max(0, p1.y - p4.y) / 2,
  1768. 									p2 = point2D(p1.x, p1.y + delta),
  1769. 									p3 = point2D(p4.x, p4.y - delta);
  1770.  
  1771. 								this.animatef({
  1772. 									from: 0,
  1773. 									to: 1,
  1774. 									frame: function (v) {
  1775. 										var np = bezier(p1, p2, p3, p4, v);
  1776. 										p1.x = np.x;
  1777. 										p1.y = np.y;
  1778. 										flipMethods._fold.call(that, p1);
  1779. 									},
  1780. 									complete: hide,
  1781. 									duration: 800,
  1782. 									hiding: true
  1783. 								});
  1784.  
  1785. 							} else {
  1786. 								this.animatef(false);
  1787. 								hide();
  1788. 							}
  1789. 						},
  1790.  
  1791. 						turnPage: function (corner) {
  1792.  
  1793. 							var that = this,
  1794. 								data = this.data().f;
  1795.  
  1796. 							corner = { corner: (data.corner) ? data.corner.corner : corner || flipMethods._cAllowed.call(this)[0] };
  1797.  
  1798. 							var p1 = data.point || flipMethods._c.call(this, corner.corner, (data.opts.turn) ? data.opts.turn.data().opts.elevation : 0),
  1799. 								p4 = flipMethods._c2.call(this, corner.corner);
  1800.  
  1801. 							this.trigger('flip').
  1802. 								animatef({
  1803. 									from: 0,
  1804. 									to: 1,
  1805. 									frame: function (v) {
  1806. 										var np = bezier(p1, p1, p4, p4, v);
  1807. 										corner.x = np.x;
  1808. 										corner.y = np.y;
  1809. 										flipMethods._showFoldedPage.call(that, corner);
  1810. 									},
  1811.  
  1812. 									complete: function () {
  1813. 										that.trigger('end', [true]);
  1814. 									},
  1815. 									duration: data.opts.duration,
  1816. 									turning: true
  1817. 								});
  1818.  
  1819. 							data.corner = null;
  1820. 						},
  1821.  
  1822. 						moving: function () {
  1823.  
  1824. 							return 'effect' in this.data();
  1825.  
  1826. 						},
  1827.  
  1828. 						isTurning: function () {
  1829.  
  1830. 							return this.flip('moving') && this.data().effect.turning;
  1831.  
  1832. 						},
  1833.  
  1834. 						_eventStart: function (e) {
  1835.  
  1836. 							var data = this.data().f;
  1837.  
  1838. 							if (!data.disabled && !this.flip('isTurning')) {
  1839. 								data.corner = flipMethods._cornerActivated.call(this, e);
  1840. 								if (data.corner && flipMethods._foldingPage.call(this, data.corner)) {
  1841. 									flipMethods._moveFoldingPage.call(this, true);
  1842. 									this.trigger('pressed', [data.point]);
  1843. 									return false;
  1844. 								} else
  1845. 									data.corner = null;
  1846. 							}
  1847.  
  1848. 						},
  1849.  
  1850. 						_eventMove: function (e) {
  1851.  
  1852. 							var data = this.data().f;
  1853.  
  1854. 							if (!data.disabled) {
  1855. 								e = (isTouch) ? e.originalEvent.touches : [e];
  1856.  
  1857. 								if (data.corner) {
  1858.  
  1859. 									var pos = data.parent.offset();
  1860.  
  1861. 									data.corner.x = e[0].pageX - pos.left;
  1862. 									data.corner.y = e[0].pageY - pos.top;
  1863.  
  1864. 									flipMethods._showFoldedPage.call(this, data.corner);
  1865.  
  1866. 								} else if (!this.data().effect && this.is(':visible')) { // roll over
  1867.  
  1868. 									var corner = flipMethods._cornerActivated.call(this, e[0]);
  1869. 									if (corner) {
  1870. 										var origin = flipMethods._c.call(this, corner.corner, data.opts.cornerSize / 2);
  1871. 										corner.x = origin.x;
  1872. 										corner.y = origin.y;
  1873. 										flipMethods._showFoldedPage.call(this, corner, true);
  1874. 									} else
  1875. 										flipMethods.hideFoldedPage.call(this, true);
  1876.  
  1877. 								}
  1878. 							}
  1879. 						},
  1880.  
  1881. 						_eventEnd: function () {
  1882.  
  1883. 							var data = this.data().f;
  1884.  
  1885. 							if (!data.disabled && data.point) {
  1886. 								var event = $.Event('released');
  1887. 								this.trigger(event, [data.point]);
  1888. 								if (!event.isDefaultPrevented())
  1889. 									flipMethods.hideFoldedPage.call(this, true);
  1890. 							}
  1891.  
  1892. 							data.corner = null;
  1893.  
  1894. 						},
  1895.  
  1896. 						disable: function (disable) {
  1897.  
  1898. 							flipMethods.setData.call(this, { 'disabled': disable });
  1899. 							return this;
  1900.  
  1901. 						}
  1902. 					},
  1903.  
  1904. 					cla = function (that, methods, args) {
  1905.  
  1906. 						if (!args[0] || typeof (args[0]) == 'object')
  1907. 							return methods.init.apply(that, args);
  1908. 						else if (methods[args[0]] && args[0].toString().substr(0, 1) != '_')
  1909. 							return methods[args[0]].apply(that, Array.prototype.slice.call(args, 1));
  1910. 						else
  1911. 							throw args[0] + ' is an invalid value';
  1912. 					};
  1913.  
  1914. 				$.extend($.fn, {
  1915.  
  1916. 					flip: function (req, opts) {
  1917. 						return cla(this, flipMethods, arguments);
  1918. 					},
  1919.  
  1920. 					turn: function (req) {
  1921. 						return cla(this, turnMethods, arguments);
  1922. 					},
  1923.  
  1924. 					transform: function (transform, origin) {
  1925.  
  1926. 						var properties = {};
  1927.  
  1928. 						if (origin)
  1929. 							properties[vendor + 'transform-origin'] = origin;
  1930.  
  1931. 						properties[vendor + 'transform'] = transform;
  1932.  
  1933. 						return this.css(properties);
  1934.  
  1935. 					},
  1936.  
  1937. 					animatef: function (point) {
  1938.  
  1939. 						var data = this.data();
  1940.  
  1941. 						if (data.effect)
  1942. 							clearInterval(data.effect.handle);
  1943.  
  1944. 						if (point) {
  1945.  
  1946. 							if (!point.to.length) point.to = [point.to];
  1947. 							if (!point.from.length) point.from = [point.from];
  1948. 							if (!point.easing) point.easing = function (x, t, b, c, data) { return c * Math.sqrt(1 - (t = t / data - 1) * t) + b; };
  1949.  
  1950. 							var j, diff = [],
  1951. 								len = point.to.length,
  1952. 								that = this,
  1953. 								fps = point.fps || 30,
  1954. 								time = - fps,
  1955. 								f = function () {
  1956. 									var j, v = [];
  1957. 									time = Math.min(point.duration, time + fps);
  1958.  
  1959. 									for (j = 0; j < len; j++)
  1960. 										v.push(point.easing(1, time, point.from[j], diff[j], point.duration));
  1961.  
  1962. 									point.frame((len == 1) ? v[0] : v);
  1963.  
  1964. 									if (time == point.duration) {
  1965. 										clearInterval(data.effect.handle);
  1966. 										delete data['effect'];
  1967. 										that.data(data);
  1968. 										if (point.complete)
  1969. 											point.complete();
  1970. 									}
  1971. 								};
  1972.  
  1973. 							for (j = 0; j < len; j++)
  1974. 								diff.push(point.to[j] - point.from[j]);
  1975.  
  1976. 							data.effect = point;
  1977. 							data.effect.handle = setInterval(f, fps);
  1978. 							this.data(data);
  1979. 							f();
  1980. 						} else {
  1981. 							delete data['effect'];
  1982. 						}
  1983. 					}
  1984. 				});
  1985.  
  1986.  
  1987. 				$.isTouch = isTouch;
  1988.  
  1989. 			})(jQuery);
  1990. 		},
  1991. 	}
  1992. }
  1993. </script>
  1994.  
  1995. <!-- Add "scoped" attribute to limit CSS to this component only -->
  1996. <style>
  1997. /* @import '../css/style.css'; */
  1998. html{
  1999. 	height: 100%;
  2000. 	width: 100%;
  2001. }
  2002. body{
  2003. 	height: 100%;
  2004. 	width: 100%;
  2005. }
  2006. .boxbox{
  2007. 	padding-top: 10%;
  2008. 	height: 100%;
  2009. 	width: 100%;
  2010. 	margin: 0 auto;
  2011. 	text-align: center;
  2012. }
  2013. #flipbook{
  2014. 	margin: 0 auto;
  2015. 	text-align: center;
  2016. }
  2017. .top{
  2018. 	background-image:url(./../assets/1.jpg);
  2019. 	background-position:center;
  2020. 	background-size: 100%;
  2021. }
  2022. .top1{
  2023. 	background-image:url(./../assets/zs1.jpg);
  2024. 	background-position:center;
  2025. }
  2026. .hard{
  2027. 	background-color: #fff;
  2028. 	background-position:center;
  2029. 	background-size: 100%;
  2030. }
  2031. h3 {
  2032. 	margin: 40px 0 0;
  2033. }
  2034.  
  2035. ul {
  2036. 	list-style-type: none;
  2037. 	padding: 0;
  2038. }
  2039.  
  2040. li {
  2041. 	display: inline-block;
  2042. 	margin: 0 10px;
  2043. }
  2044.  
  2045. a {
  2046. 	color: #42b983;
  2047. }
  2048.  
  2049.  
  2050. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/117232
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号