@charset "utf-8"; *{ margin: 0; padding: 0; } ul li{ list-style: none; } img{ border: 0; } /* 垂直居中 */ .images-cover, .small-img{ display: flex; align-items:center; justify-content: center; } .clearfix:before, .clearfix:after{ display: table; line-height: 0; content: ""; } .magnifier{ width: 500px; position: relative; } .magnifier-container{ width: 500px; height: 500px; overflow: hidden; position: relative; border: 1px solid #ddd; } .move-view{ width: 80px; height: 80px; position: absolute; background-color: rgba(255,255,255,0.6); cursor: move; display: none; } .images-cover{ height: 100%; } .images-cover img{ max-width: 100%; max-height: 100%; } .magnifier-assembly{ width: 120px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 420px; } .magnifier-btn{ position: absolute; font-family: "宋体"; width: 100%; top: 0; left: 0; } .magnifier-btn span{ line-height: 90px; height: 90px; width: 20px; background-color: #6e6e6e; color: #fff; display: block; z-index: 9998; text-align: center; font-size: 20px; cursor: pointer; border-radius: 3px; /*transform: rotate(90deg);*/ } .magnifier-btn span:nth-child(1){ position: absolute; top: 0px; left: 10px; } .magnifier-btn span:nth-child(2){ position: absolute; left: 340px; top: 0px; } .magnifier-line{ position: relative; overflow: hidden; height: 260px; /*margin-top: 18px;*/ } .magnifier-line ul{ display: block; font-size: 0; width: 10000%; position: absolute; left: 0; z-index: 9997; } .magnifier-line li{ width: 100px; cursor: pointer; } .magnifier-line ul > .active .small-img{ border-color: #bbb; } .small-img{ height: 78px; padding: 1px; margin: 5px; overflow: hidden; border: 1px solid #ddd; } .small-img img{ max-width: 100%; max-height: 100%; } .magnifier-view{ width: 100%; height: 100%; position: absolute; right: -105%; top: 0; z-index: 9999; background-color: #fff; background-repeat: no-repeat; display: none; } .animation03{ transition: all 0.3s ease-in 0.1s; -ms-transition: all 0.3s ease-in 0.1s; -moz-transition: all 0.3s ease-in 0.1s; -webkit-transition: all 0.3s ease-in 0.1s; -o-transition: all 0.3s ease-in 0.1s; }