H5/public/index.html

@@ -12,7 +12,9 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
 
-    <script src="./myData.js"></script>
+    <script src="./myData/myData.js"></script>
+    <link rel="stylesheet" href="./myData/css/common.css" />
+    <link rel="stylesheet" href="./myData/css/default.css" />
 
     <title>克拉玛依市博物馆</title>
   </head>
@@ -20,6 +22,9 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
+  <script src="./myData/js/jquery-1.11.0.min.js"></script>
+  <script src="./myData/js/jquery.reflection.js"></script>
+  <script src="./myData/js/jquery.cloud9carousel.js"></script>
 
   <!-- <script>
     window.onload = function () {

H5/public/myData/css/common.css

@@ -0,0 +1,95 @@
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/*html {
+  height: 100%;
+}*/
+body {
+  /*height: 100%;*/
+  color: #eee;
+  background: black;
+  margin: 0;
+  overflow-x: hidden;
+}
+a {
+  font-weight: bold;
+  text-decoration: none;
+}
+h1 {
+  color: #bec5d6;
+  font-family: sans-serif;
+  text-shadow: 2px 3px 3px #127e7a;
+}
+
+.wrap {
+  width: 800px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  position: relative;
+}
+.wrap > h1 {
+  font-size: 2.5em;
+  text-align: center;
+  padding-bottom: 3px;
+}
+#showcase {
+  visibility: hidden;
+  height: 100%;
+}
+.cloud9-item {
+  overflow: visible !important;
+  position: relative;
+}
+
+footer {
+  display: block;
+  position: relative;
+}
+#get {
+  font-size: 20px;
+  text-align: center;
+}
+#download {
+  margin: 8px auto;
+  margin-top: 12px;
+  display: block;
+}
+#license {
+  font-size: 18px;
+  text-align: center;
+  margin: 0;
+}
+#share {
+  position: absolute;
+  left: 4px;
+}
+.fb-like {
+  vertical-align: top;
+}
+.twitter-share-button {
+  width: 84px !important;
+  margin-left: 8px;
+}
+#credits {
+  color: #c9c9c9;
+  text-align: right;
+  padding-right: 25px;
+  position: absolute;
+  right: 0;
+}
+#credits h1 {
+  font-size: 1em;
+  margin: 2px auto;
+}
+#credits ul {
+  font-size: 14px;
+  list-style-type: none;
+  padding-left: 2px;
+  margin: 2px 0;
+}

H5/public/myData/css/default.css

@@ -0,0 +1,234 @@
+
+@font-face {
+	font-family: 'icomoon';
+	src:url('../fonts/icomoon.eot?rretjt');
+	src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
+		url('../fonts/icomoon.woff?rretjt') format('woff'),
+		url('../fonts/icomoon.ttf?rretjt') format('truetype'),
+		url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body, html { font-size: 100%; 	padding: 0; margin: 0;}
+
+/* Reset */
+*,
+*:after,
+*:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before,
+.clearfix:after {
+	content: " ";
+	display: table;
+}
+
+.clearfix:after {
+	clear: both;
+}
+
+body{
+	background: #f9f7f6;
+	color: #404d5b;
+	font-weight: 500;
+	font-size: 1.05em;
+	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
+}
+a{color: #2fa0ec;text-decoration: none;outline: none;}
+a:hover,a:focus{color:#74777b;}
+
+.htmleaf-container{
+	margin: 0 auto;
+	text-align: center;
+	overflow: hidden;
+}
+
+.bgcolor-1 { background: #f0efee; }
+.bgcolor-2 { background: #f9f9f9; }
+.bgcolor-3 { background: #e8e8e8; }/*light grey*/
+.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
+.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
+.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
+.bgcolor-7 { background: #d0d6d6; }/*White tea*/
+.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
+.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
+.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
+.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
+.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
+/* Header */
+.htmleaf-header{
+	padding: 1em 190px 1em;
+	letter-spacing: -1px;
+	text-align: center;
+}
+.htmleaf-header h1 {
+	font-weight: 600;
+	font-size: 2em;
+	line-height: 1;
+	margin-bottom: 0;
+	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
+}
+.htmleaf-header h1 span {
+	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
+	display: block;
+	font-size: 60%;
+	font-weight: 400;
+	padding: 0.8em 0 0.5em 0;
+	color: #c3c8cd;
+}
+/*nav*/
+.htmleaf-demo a{color: #1d7db1;text-decoration: none;}
+.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
+.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
+.htmleaf-demo a:hover{opacity: 0.6;}
+.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
+/* Top Navigation Style */
+.htmleaf-links {
+	position: relative;
+	display: inline-block;
+	white-space: nowrap;
+	font-size: 1.5em;
+	text-align: center;
+}
+
+.htmleaf-links::after {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin-left: -1px;
+	width: 2px;
+	height: 100%;
+	background: #dbdbdb;
+	content: '';
+	-webkit-transform: rotate3d(0,0,1,22.5deg);
+	transform: rotate3d(0,0,1,22.5deg);
+}
+
+.htmleaf-icon {
+	display: inline-block;
+	margin: 0.5em;
+	padding: 0em 0;
+	width: 1.5em;
+	text-decoration: none;
+}
+
+.htmleaf-icon span {
+	display: none;
+}
+
+.htmleaf-icon:before {
+	margin: 0 5px;
+	text-transform: none;
+	font-weight: normal;
+	font-style: normal;
+	font-variant: normal;
+	font-family: 'icomoon';
+	line-height: 1;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+}
+/* footer */
+.htmleaf-footer{width: 100%;padding-top: 10px;}
+.htmleaf-small{font-size: 0.8em;}
+.center{text-align: center;}
+/****/
+.related {
+	width: 100%;
+	color: #fff;
+	background: transparent;
+	text-align: center;
+	font-size: 1em;
+	padding: 0.5em 0;
+	overflow: hidden;
+}
+
+.related > a {
+	vertical-align: top;
+	width: calc(100% - 20px);
+	max-width: 340px;
+	display: inline-block;
+	text-align: center;
+	margin: 20px 10px;
+	padding: 25px;
+	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
+}
+.related a {
+	display: inline-block;
+	text-align: left;
+	margin: 20px auto;
+	padding: 10px 20px;
+	opacity: 0.8;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+	-webkit-backface-visibility: hidden;
+}
+
+.related a:hover,
+.related a:active {
+	opacity: 1;
+}
+
+.related a img {
+	max-width: 100%;
+	opacity: 0.8;
+	border-radius: 4px;
+}
+.related a:hover img,
+.related a:active img {
+	opacity: 1;
+}
+.related h3{font-family: "Microsoft YaHei", sans-serif;}
+.related a h3 {
+	font-weight: 300;
+	margin-top: 0.15em;
+	color: #fff;
+}
+/* icomoon */
+.icon-htmleaf-home-outline:before {
+	content: "\e5000";
+}
+
+.icon-htmleaf-arrow-forward-outline:before {
+	content: "\e5001";
+}
+
+@media screen and (max-width: 50em) {
+	.htmleaf-header {
+		padding: 3em 10% 4em;
+	}
+	.htmleaf-header h1 {
+        font-size:2em;
+    }
+}
+
+
+@media screen and (max-width: 40em) {
+	.htmleaf-header h1 {
+		font-size: 1.5em;
+	}
+}
+
+@media screen and (max-width: 30em) {
+    .htmleaf-header h1 {
+        font-size:1.2em;
+    }
+}

H5/public/myData/js/jquery.cloud9carousel.js

@@ -0,0 +1,408 @@
+/*
+ * Cloud 9 Carousel 2.0
+ *   Cleaned up, refactored, and improved version of CloudCarousel
+ *
+ * See the demo and get the latest version on GitHub:
+ *   http://specious.github.io/cloud9carousel/
+ *
+ * Copyright (c) 2014 by Ildar Sagdejev ( http://twitter.com/tknomad )
+ * Copyright (c) 2011 by R. Cecco ( http://www.professorcloud.com )
+ * MIT License
+ *
+ * Please retain this copyright header in all versions of the software
+ *
+ * Requires:
+ *  - jQuery 1.3.0 or later -OR- Zepto 1.1.1 or later
+ *
+ * Optional (jQuery only):
+ *  - Reflection support via reflection.js plugin by Christophe Beyls
+ *     http://www.digitalia.be/software/reflectionjs-for-jquery
+ *  - Mousewheel support via mousewheel plugin
+ *     http://plugins.jquery.com/mousewheel/
+ */
+
+;(function ($) {
+  //
+  // Detect CSS transform support
+  //
+  var transform = (function () {
+    var vendors = ['webkit', 'moz', 'ms']
+    var style = document.createElement('div').style
+    var trans = 'transform' in style ? 'transform' : undefined
+
+    for (var i = 0, count = vendors.length; i < count; i++) {
+      var prop = vendors[i] + 'Transform'
+      if (prop in style) {
+        trans = prop
+        break
+      }
+    }
+
+    return trans
+  })()
+
+  var Item = function (element, options) {
+    element.item = this
+    this.element = element
+
+    if (element.tagName === 'IMG') {
+      this.fullWidth = element.width
+      this.fullHeight = element.height
+    } else {
+      element.style.display = 'inline-block'
+      this.fullWidth = element.offsetWidth
+      this.fullHeight = element.offsetHeight
+    }
+
+    element.style.position = 'absolute'
+
+    if (options.mirror && this.element.tagName === 'IMG') {
+      // Wrap image in a div together with its generated reflection
+      this.reflection = $(element).reflect(options.mirror).next()[0]
+
+      var $reflection = $(this.reflection)
+      this.reflection.fullHeight = $reflection.height()
+      $reflection.css('margin-top', options.mirror.gap + 'px')
+      $reflection.css('width', '100%')
+      element.style.width = '100%'
+
+      // The item element now contains the image and reflection
+      this.element = this.element.parentNode
+      this.element.item = this
+      this.element.alt = element.alt
+      this.element.title = element.title
+    }
+
+    if (transform && options.transforms) this.element.style[transform + 'Origin'] = '0 0'
+
+    this.moveTo = function (x, y, scale) {
+      this.width = this.fullWidth * scale
+      this.height = this.fullHeight * scale
+      this.x = x
+      this.y = y
+      this.scale = scale
+
+      var style = this.element.style
+      style.zIndex = ('' + scale * 100) | 0
+
+      if (transform && options.transforms) {
+        style[transform] = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')'
+      } else {
+        // The gap between the image and its reflection doesn't resize automatically
+        if (options.mirror && this.element.tagName === 'IMG')
+          this.reflection.style.marginTop = options.mirror.gap * scale + 'px'
+
+        style.width = this.width + 'px'
+        style.left = x + 'px'
+        style.top = y + 'px'
+      }
+    }
+  }
+
+  var time = (function () {
+    return !window.performance || !window.performance.now
+      ? function () {
+          return +new Date()
+        }
+      : function () {
+          return performance.now()
+        }
+  })()
+
+  //
+  // Detect requestAnimationFrame() support
+  //
+  // Support legacy browsers:
+  //   http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+  //
+  var cancelFrame = window.cancelAnimationFrame || window.cancelRequestAnimationFrame
+  var requestFrame = window.requestAnimationFrame
+
+  ;(function () {
+    var vendors = ['webkit', 'moz', 'ms']
+
+    for (var i = 0, count = vendors.length; i < count && !cancelFrame; i++) {
+      cancelFrame =
+        window[vendors[i] + 'CancelAnimationFrame'] ||
+        window[vendors[i] + 'CancelRequestAnimationFrame']
+      requestFrame = requestFrame && window[vendors[i] + 'RequestAnimationFrame']
+    }
+  })()
+
+  let myTime = -1
+
+  var Carousel = function (element, options) {
+    var self = this
+
+    // 邵根
+    myTime = window.setInterval(() => {
+      try {
+        clearInterval(myTime)
+        window.moveFu(self)
+      } catch (error) {}
+    }, 200)
+
+    var $container = $(element)
+    this.items = []
+    this.xOrigin = options.xOrigin === null ? $container.width() * 0.5 : options.xOrigin
+    this.yOrigin = options.yOrigin === null ? $container.height() * 0.1 : options.yOrigin
+    this.xRadius = options.xRadius === null ? $container.width() / 2.3 : options.xRadius
+    this.yRadius = options.yRadius === null ? $container.height() / 6 : options.yRadius
+    this.farScale = options.farScale
+    this.rotation = this.destRotation = Math.PI / 2 // start with the first item positioned in front
+    this.speed = options.speed
+    this.smooth = options.smooth
+    this.fps = options.fps
+    this.timer = 0
+    this.autoPlayAmount = options.autoPlay
+    this.autoPlayDelay = options.autoPlayDelay
+    this.autoPlayTimer = 0
+    this.onLoaded = options.onLoaded
+    this.onRendered = options.onRendered
+
+    this.itemOptions = {
+      transforms: options.transforms
+    }
+
+    if (options.mirror) {
+      this.itemOptions.mirror = $.extend({ gap: 2 }, options.mirror)
+    }
+
+    $container.css({ position: 'relative', overflow: 'hidden' })
+
+    // Rotation:
+    //  *      0 : right
+    //  *   Pi/2 : front
+    //  *   Pi   : left
+    //  * 3 Pi/2 : back
+    this.rotateItem = function (itemIndex, rotation) {
+      var item = this.items[itemIndex]
+      var sin = Math.sin(rotation)
+      var farScale = this.farScale
+      var scale = farScale + (1 - farScale) * (sin + 1) * 0.5
+
+      item.moveTo(
+        this.xOrigin + scale * (Math.cos(rotation) * this.xRadius - item.fullWidth * 0.5),
+        this.yOrigin + scale * sin * this.yRadius,
+        scale
+      )
+    }
+
+    this.render = function () {
+      var count = this.items.length
+      var spacing = (2 * Math.PI) / count
+      var radians = this.rotation
+
+      for (var i = 0; i < count; i++) {
+        this.rotateItem(i, radians)
+        radians += spacing
+      }
+
+      if (typeof this.onRendered === 'function') this.onRendered(this)
+    }
+
+    this.playFrame = function () {
+      var rem = self.destRotation - self.rotation
+      var now = time()
+      var dt = (now - self.lastTime) * 0.002
+      self.lastTime = now
+
+      if (Math.abs(rem) < 0.003) {
+        self.rotation = self.destRotation
+        self.pause()
+      } else {
+        // Rotate asymptotically closer to the destination
+        self.rotation = self.destRotation - rem / (1 + self.speed * dt)
+        self.scheduleNextFrame()
+      }
+
+      self.render()
+    }
+
+    this.scheduleNextFrame = function () {
+      this.lastTime = time()
+
+      this.timer =
+        this.smooth && cancelFrame
+          ? requestFrame(self.playFrame)
+          : setTimeout(self.playFrame, 1000 / this.fps)
+    }
+
+    this.itemsRotated = function () {
+      return (this.items.length * (Math.PI / 2 - this.rotation)) / (2 * Math.PI)
+    }
+
+    this.floatIndex = function () {
+      var count = this.items.length
+      var floatIndex = this.itemsRotated() % count
+
+      // Make sure float-index is positive
+      return floatIndex < 0 ? floatIndex + count : floatIndex
+    }
+
+    this.nearestIndex = function () {
+      return Math.round(this.floatIndex()) % this.items.length
+    }
+
+    let myIndex = -1
+
+    this.nearestItem = function () {
+      // 获取索引
+
+      if (this.nearestIndex() !== myIndex) {
+        // 邵根
+        window.getIndexFu(this.nearestIndex())
+        myIndex = this.nearestIndex()
+      }
+
+      return this.items[this.nearestIndex()]
+    }
+
+    this.play = function () {
+      if (this.timer === 0) this.scheduleNextFrame()
+    }
+
+    this.pause = function () {
+      this.smooth && cancelFrame ? cancelFrame(this.timer) : clearTimeout(this.timer)
+      this.timer = 0
+    }
+
+    //
+    // Spin the carousel.  Count is the number (+-) of carousel items to rotate
+    //
+    this.go = function (count) {
+      this.destRotation += ((2 * Math.PI) / this.items.length) * count
+      this.play()
+    }
+
+    this.deactivate = function () {
+      this.pause()
+      clearInterval(this.autoPlayTimer)
+      options.buttonLeft.unbind('click')
+      options.buttonRight.unbind('click')
+      $container.unbind('.cloud9')
+    }
+
+    this.autoPlay = function () {
+      this.autoPlayTimer = setInterval(function () {
+        self.go(self.autoPlayAmount)
+      }, this.autoPlayDelay)
+    }
+
+    this.enableAutoPlay = function () {
+      // Stop auto-play on mouse over
+      $container.bind('mouseover.cloud9', function () {
+        clearInterval(self.autoPlayTimer)
+      })
+
+      // Resume auto-play when mouse leaves the container
+      $container.bind('mouseout.cloud9', function () {
+        self.autoPlay()
+      })
+
+      this.autoPlay()
+    }
+
+    this.bindControls = function () {
+      options.buttonLeft.bind('click', function () {
+        self.go(-1)
+        return false
+      })
+
+      options.buttonRight.bind('click', function () {
+        self.go(1)
+        return false
+      })
+
+      if (options.mouseWheel) {
+        $container.bind('mousewheel.cloud9', function (event, delta) {
+          self.go(delta > 0 ? 1 : -1)
+          return false
+        })
+      }
+
+      if (options.bringToFront) {
+        $container.bind('click.cloud9', function (event) {
+          var hits = $(event.target).closest('.' + options.itemClass)
+
+          if (hits.length !== 0) {
+            // var idx = self.items.indexOf(hits[0].item)
+            //   var count = self.items.length
+            //   var diff = idx - (self.floatIndex() % count)
+            //   // Choose direction based on which way is shortest
+            //   if (2 * Math.abs(diff) > count) diff += diff > 0 ? -count : count
+            //   self.destRotation = self.rotation
+            //   self.go(-diff)
+          }
+        })
+      }
+    }
+
+    var items = $container.find('.' + options.itemClass)
+
+    this.finishInit = function () {
+      //
+      // Wait until all images have completely loaded
+      //
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i]
+        if (
+          item.tagName === 'IMG' &&
+          (item.width === undefined || (item.complete !== undefined && !item.complete))
+        )
+          return
+      }
+
+      clearInterval(this.initTimer)
+
+      // Init items
+      for (i = 0; i < items.length; i++)
+        this.items.push(new Item(items[i], this.itemOptions))
+
+      // Disable click-dragging of items
+      $container.bind('mousedown onselectstart', function () {
+        return false
+      })
+
+      if (this.autoPlayAmount !== 0) this.enableAutoPlay()
+      this.bindControls()
+      this.render()
+
+      if (typeof this.onLoaded === 'function') this.onLoaded(this)
+    }
+
+    this.initTimer = setInterval(function () {
+      self.finishInit()
+    }, 50)
+  }
+
+  //
+  // The jQuery plugin
+  //
+  $.fn.Cloud9Carousel = function (options) {
+    return this.each(function () {
+      /* For full list of options see the README */
+      options = $.extend(
+        {
+          xOrigin: null, // null: calculated automatically
+          yOrigin: null,
+          xRadius: null,
+          yRadius: null,
+          farScale: 0.5, // scale of the farthest item
+          transforms: true, // enable CSS transforms
+          smooth: true, // enable smooth animation via requestAnimationFrame()
+          fps: 30, // fixed frames per second (if smooth animation is off)
+          speed: 4, // positive number
+          autoPlay: 0, // [ 0: off | number of items (integer recommended, positive is clockwise) ]
+          autoPlayDelay: 4000,
+          bringToFront: false,
+          itemClass: 'cloud9-item',
+          handle: 'carousel'
+        },
+        options
+      )
+
+      $(this).data(options.handle, new Carousel(this, options))
+    })
+  }
+})(window.jQuery || window.Zepto)

H5/public/myData/js/jquery.reflection.js

@@ -0,0 +1,82 @@
+/*!
+	reflection.js for jQuery v1.12
+	(c) 2006-2013 Christophe Beyls <http://www.digitalia.be>
+	MIT-style license.
+*/
+
+;(function($) {
+
+	$.fn.reflect = function(options) {
+		options = $.extend({
+			height: 1/3,
+			opacity: 0.5
+		}, options);
+
+		return this.unreflect().each(function() {
+			var img = this;
+			if (/^img$/i.test(img.tagName)) {
+				function doReflect() {
+					var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
+					reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
+
+					reflection = $("<canvas />")[0];
+					if (reflection.getContext) {
+						context = reflection.getContext("2d");
+						try {
+							$(reflection).attr({width: imageWidth, height: reflectionHeight});
+							context.save();
+							context.translate(0, imageHeight-1);
+							context.scale(1, -1);
+							context.drawImage(img, 0, 0, imageWidth, imageHeight);
+							context.restore();
+							context.globalCompositeOperation = "destination-out";
+
+							gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
+							gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
+							gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+							context.fillStyle = gradient;
+							context.rect(0, 0, imageWidth, reflectionHeight);
+							context.fill();
+						} catch(e) {
+							return;
+						}
+					} else {
+						if (!window.ActiveXObject) return;
+						reflection = $("<img />").attr("src", img.src).css({
+							width: imageWidth,
+							height: imageHeight,
+							marginBottom: reflectionHeight - imageHeight,
+							filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
+						})[0];
+					}
+					$(reflection).css({display: "block", border: 0});
+
+					wrapper = $(/^a$/i.test(img.parentNode.tagName) ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
+					wrapper.className = img.className;
+					$(img).data("reflected", wrapper.style.cssText = img.style.cssText);
+					$(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"});
+					img.style.cssText = "display: block; border: 0px";
+					img.className = "reflected";
+				}
+
+				if (img.complete) doReflect();
+				else $(img).load(doReflect);
+			}
+		});
+	}
+
+	$.fn.unreflect = function() {
+		return this.unbind("load").each(function() {
+			var img = this, reflected = $(this).data("reflected"), wrapper;
+
+			if (reflected !== undefined) {
+				wrapper = img.parentNode;
+				img.className = wrapper.className;
+				img.style.cssText = reflected;
+				$(img).data("reflected", null);
+				wrapper.parentNode.replaceChild(img, wrapper);
+			}
+		});
+	}
+
+})(window.jQuery || window.Zepto);

H5/src/App.tsx

@@ -2,7 +2,7 @@ import '@/assets/styles/base.css'
 // 关于路由
 import React, { useCallback, useEffect, useState } from 'react'
 import { Router, Route, Switch } from 'react-router-dom'
-import history, { isMobileFu, myUrl } from './utils/history'
+import history, { isMobileFu } from './utils/history'
 import SpinLoding from './components/SpinLoding'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 

H5/src/components/useMove.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useRef, useState } from 'react'
+
+export default function useMove() {
+  const [flag, setFlag] = useState(false)
+  const [staX, setStaX] = useState(0)
+  const [moveX, setMoveX] = useState(0)
+  // pc端是否触发了滑动（避免和点击事件冲突）
+  const [isPcMoveFlag, setIsPcMoveFlag] = useState(true)
+
+  // 手指按住屏幕
+  const touchstart = useCallback((x: number) => {
+    setStaX(x)
+    setFlag(true)
+  }, [])
+
+  // 手指移动事件
+  const touchmove = useCallback(
+    (x: number) => {
+      if (flag) {
+        setMoveX(x)
+      }
+    },
+    [flag]
+  )
+
+  // pc端是否触发了滑动（避免和点击事件冲突）
+  const time = useRef(-1)
+  const isPcFu = useCallback(() => {
+    clearTimeout(time.current)
+    time.current = window.setTimeout(() => {
+      setIsPcMoveFlag(true)
+    }, 400)
+  }, [])
+
+  // 手指抬起事件
+  const touchend = useCallback(
+    (fu: (val: number) => void, dev: 'pc' | 'mobile') => {
+      if (moveX !== 0) {
+        if (staX > moveX && staX - moveX >= 20) {
+          if (dev === 'pc') setIsPcMoveFlag(false)
+          fu(1)
+
+          if (dev === 'pc') isPcFu()
+        } else if (moveX > staX && moveX - staX >= 20) {
+          if (dev === 'pc') setIsPcMoveFlag(false)
+          fu(-1)
+          if (dev === 'pc') isPcFu()
+        }
+        setFlag(false)
+        setStaX(0)
+        setMoveX(0)
+      }
+    },
+    [isPcFu, moveX, staX]
+  )
+
+  const MouseLeave = useCallback(() => {
+    setFlag(false)
+  }, [])
+
+  return {
+    touchstart,
+    touchmove,
+    touchend,
+    MouseLeave,
+    isPcMoveFlag
+  }
+}

H5/src/pages/A1home/data.ts

@@ -0,0 +1,59 @@
+export const imgInitFu = () => {
+  var showcase = $('#showcase'),
+    title = $('#item-title')
+
+  const fullWidth = window.innerHeight
+
+  showcase.Cloud9Carousel({
+    yOrigin: fullWidth / 10 - 10,
+    yRadius: fullWidth / 10 - 20,
+    mirror: {
+      gap: 12,
+      height: 0.2
+    },
+    buttonLeft: $('#nav > .left'),
+    buttonRight: $('#nav > .right'),
+    autoPlay: 0,
+    bringToFront: true,
+    onRendered: rendered,
+    onLoaded: function () {
+      showcase.css('visibility', 'visible')
+      showcase.css('display', 'none')
+      showcase.fadeIn(1500)
+    }
+  })
+
+  function rendered(carousel: any) {
+    title.text(carousel.nearestItem().element.alt)
+
+    // Fade in based on proximity of the item
+    var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
+    title.css('opacity', 0.5 + 0.5 * c)
+  }
+
+  //
+  // Simulate physical button click effect
+  //
+  $('#nav > button').click(function (e: any) {
+    var b = $(e.target).addClass('down')
+    setTimeout(function () {
+      b.removeClass('down')
+    }, 80)
+  })
+
+  // $(document).keydown(function (e: any) {
+  //   //
+  //   // More codes: http://www.javascripter.net/faq/keycodes.htm
+  //   //
+  //   switch (e.keyCode) {
+  //     /* left arrow */
+  //     case 37:
+  //       $('#nav > .left').click()
+  //       break
+
+  //     /* right arrow */
+  //     case 39:
+  //       $('#nav > .right').click()
+  //   }
+  // })
+}

H5/src/pages/A1home/index.module.scss

@@ -1,5 +1,6 @@
 .A1home {
   background-size: 100% 100%;
+  position: relative;
   :global {
     .homeTitleImg {
       width: 100%;
@@ -14,106 +15,42 @@
       }
     }
 
-    .A1main {
+    .box11 {
       width: 100%;
-      height: 80%;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 0 5%;
-
-      .A1row {
-        height: 150px;
-        width: 100%;
-        position: relative;
-        margin-bottom: 40px;
-        opacity: 0.8;
-        transition: all 0.3s;
-        .A1Rimg {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 40%;
-          height: 100%;
-          .A1Rimg_1 {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            height: 120px;
-            width: auto;
-            max-width: 120px;
-            z-index: 11;
-          }
-          .A1Rimg_2 {
-            opacity: 0;
-            transition: all 0.5s;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            max-width: 9999px;
-            max-height: 9999px;
-            width: 130%;
-            height: 130%;
-            z-index: 10;
-          }
-          .A1Rimg_2Ac {
-            opacity: 1;
-          }
-        }
-        .A1Rtxt {
+      height: 50%;
+      overflow: hidden;
+      #showcase {
+        img {
           position: absolute;
-          top: 0;
-          right: 0;
-          width: calc(60% - 20px);
-          height: 100%;
-          .A1Rtxt1 {
-            min-width: 115px;
-            padding: 6px 30px 6px 10px;
-            display: inline-block;
-            color: #efdbac;
-            font-weight: 700;
-            font-size: 16px;
-            background-size: 100% 100%;
-            transition: all 0.3s;
-          }
-
-          .A1Rtxt2 {
-            margin-top: 10px;
-            height: calc(100% - 46px);
-            overflow: hidden;
-            color: #584735;
-            display: flex;
-            align-items: center;
-            & > div {
-              max-width: 100%;
-              max-height: 100%;
-              display: -webkit-box;
-              overflow: hidden;
-              white-space: normal !important;
-              text-overflow: ellipsis;
-              word-wrap: break-word;
-              line-clamp: 5;
-              -webkit-line-clamp: 5;
-              -webkit-box-orient: vertical;
-            }
-          }
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 200px;
+          height: auto;
         }
-
-        &:nth-of-type(2n) {
-          .A1Rimg {
-            left: auto;
-            right: 0;
-          }
-          .A1Rtxt {
-            right: auto;
-            left: 0;
-          }
+        .imgAc {
+          transition: all 0.3s;
+          width: 150% !important;
+          height: 150% !important;
+          max-width: 150% !important;
+          max-height: 150% !important;
         }
       }
-      .A1rowAcMove {
-        opacity: 1;
-      }
+    }
+
+    .A1Text {
+      height: 30%;
+      background-color: green;
+    }
+
+    // 左右滑动盒子
+    .A1MoveBox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 99;
     }
   }
 }

H5/src/pages/A1home/index.tsx

@@ -1,16 +1,36 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
+import history, { HomeDataRow, isMobileFu, myData, myUrl } from '@/utils/history'
 import classNmaes from 'classnames'
 import A1info from './A1info'
+import { imgInitFu } from './data'
+import useMove from '@/components/useMove'
+
+declare global {
+  //设置全局属性
+  interface Window {
+    //window对象属性
+    getIndexFu: (index: number) => void
+    moveFu: (val: any) => void
+  }
+}
 
 function A1home() {
-  const domRef = useRef<HTMLDivElement>(null)
+  // 当前索引
+  const [index, setIndex] = useState(-1)
+
+  useEffect(() => {
+    window.getIndexFu = index => {
+      setIndex(index)
+      // console.log('当前索引', index)
+    }
+  }, [])
 
-  const [moveId, setMoveId] = useState(0)
+  useEffect(() => {
+    imgInitFu()
+  }, [])
 
-  // apng动画展示
-  const [apng, setApng] = useState(false)
+  const moveRef = useRef<any>(null)
 
   useEffect(() => {
     const urlAll = window.location.href
@@ -19,83 +39,88 @@ function A1home() {
       if (idArr && idArr[1]) {
         const id = Number(idArr[1])
         const index = myData.homeData.findIndex(v => v.id === id)
-        if (index > -1 && domRef.current) {
-          setMoveId(id)
-
-          setTimeout(() => {
-            // setMoveId(0)
-            setApng(true)
-            // console.log('xxxx')
-          }, 1500)
-
-          domRef.current.scrollTo({
-            top: (index - 1) * 190,
-            behavior: 'smooth'
-          })
+        // console.log('返回的索引', index)
+        window.moveFu = val => {
+          moveRef.current = val
+
+          if ([1, 2, 3, 4, 5, 6].includes(index)) val.go(-index)
+          else if ([7, 8, 9, 10, 11].includes(index)) {
+            const obj = {
+              11: 1,
+              10: 2,
+              9: 3,
+              8: 4,
+              7: 5
+            }
+            val.go(Reflect.get(obj, index))
+          }
         }
       }
     }
   }, [])
 
-  // 打开详情
-  const [open, setOpen] = useState({} as HomeDataRow)
+  // 相关文物的滚动
+  const { touchstart, touchmove, touchend, MouseLeave, isPcMoveFlag } = useMove()
 
-  // 终止动画
-  const stopMoveFu = useCallback(() => {
-    // setMoveId(0)
-    // setApng(false)
+  const moveFu = useCallback((val: number) => {
+    moveRef.current.go(val)
   }, [])
 
+  // 点击进入详情页
+  const toInfoPage = useCallback(() => {
+    if (isPcMoveFlag) {
+      const id = myData.homeData[index].id
+      history.replace(`/info/${id}`)
+    }
+  }, [index, isPcMoveFlag])
+
+  // 打开详情
+  const [open, setOpen] = useState({} as HomeDataRow)
+
   return (
     <div
       className={styles.A1home}
       style={{ backgroundImage: `url(${myUrl + myData.homeBg})` }}
-      onTouchEnd={() => {
-        stopMoveFu()
-      }}
     >
       <div className='homeTitleImg'>
         <img src={myUrl + myData.homeTitleImg} alt='' />
       </div>
 
-      <div className='A1main' ref={domRef}>
-        {myData.homeData.map(v => (
-          <div
-            onClick={() => {
-              history.replace(`/info/${v.id}`)
-              // setOpen(v)
-              stopMoveFu()
-            }}
-            className={classNmaes('A1row', moveId === v.id ? 'A1rowAcMove' : '')}
-            key={v.id}
-          >
-            <div className='A1Rimg'>
-              <img className='A1Rimg_1' src={myUrl + v.cover} alt='' />
+      <div className='box11'>
+        <div className='wrap'>
+          <div id='showcase' className='noselect'>
+            {myData.homeData.map((v, i) => (
               <img
-                className={classNmaes(
-                  'A1Rimg_2',
-                  moveId === v.id && apng ? 'A1Rimg_2Ac' : ''
-                )}
-                src={myUrl + 'img/200.png'}
+                key={v.id}
+                className={classNmaes('cloud9-item', i === index ? 'imgAc' : '')}
+                src={myUrl + v.cover}
                 alt=''
               />
-            </div>
-            <div className='A1Rtxt'>
-              <div
-                className={classNmaes('A1Rtxt1')}
-                style={{ backgroundImage: `url(${myUrl + myData.nameImg})` }}
-              >
-                {v.name}
-              </div>
-
-              <div className='A1Rtxt2'>
-                <div>{v.txt}</div>
-              </div>
-            </div>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
 
+      {/* <div id='nav' className='noselect'>
+        <button className='left'>←</button>
+        <button className='right'>→</button>
+      </div> */}
+
+      <div className='A1Text'></div>
+
+      {/* 左右滑动 */}
+      <div
+        className='A1MoveBox'
+        onTouchStart={e => touchstart(e.touches[0].pageX)}
+        onTouchMove={e => touchmove(e.touches[0].pageX)}
+        onTouchEnd={e => touchend(val => moveFu(val), 'mobile')}
+        onClick={toInfoPage}
+        onMouseUp={e => touchstart(e.clientX)}
+        onMouseMove={e => touchmove(e.clientX)}
+        onMouseDown={e => touchend(val => moveFu(val), 'pc')}
+        onMouseLeave={MouseLeave}
+      ></div>
+
       {/* 打开详情 */}
       {open.id ? <A1info info={open} closeFu={() => setOpen({} as HomeDataRow)} /> : null}
     </div>

H5/src/types/declaration.d.ts

@@ -12,3 +12,6 @@ declare const myUrlTemp2: string
 declare const F_Video: any
 
 declare const myDataTemp
+
+declare const $
+declare const Carousel