arcgis中实现时空影像功能
<template>
<div>
<span @click="onClick">时空影像</span>
<div v-show="spatioShow" id="timePlay" class="time_play">
</div>
</div>
</template>
<script>
import $ from 'jquery'
import { spatioList } from '@/api/manage'
import NewLayer from '@/components/core/Layers'
export default {
name: 'TimePlay',
data () {
return {
ifRequest: false,
spatioShow: false,
oneDataSet: null,
oldDataSet: null,
oldLayer: null,
defaultOption: {
speed: 3e3,
timeDisplay: [
{
date: '20100112',
label: '20100120',
popup: 'GF1<br>2010二月影像'
},
{
date: '20110112',
label: '20110120',
popup: 'GF1<br>2011二月影像'
},
{
date: '20120112',
label: '20120120',
popup: 'GF1<br>2012二月影像'
},
{
date: '20130120',
label: '20130120',
popup: 'GF1<br>2013二月影像'
},
{
date: '20140120',
label: '20140120',
popup: 'GF1<br>2014二月影像'
},
{
date: '20150120',
label: '20150120',
popup: 'GF1<br>2015二月影像'
},
{
date: '20160120',
label: '20160120',
popup: 'GF1<br>2016二月影像'
},
{
date: '20170120',
label: '20170120',
popup: 'GF1<br>2017二月影像'
},
{
date: '20180120',
label: '20180120',
popup: 'GF1<br>2018二月影像'
},
{
date: '20190120',
label: '20190120',
popup: 'GF1<br>2019二月影像'
},
{
date: '20200120',
label: '20200120',
popup: 'GF1<br>2020二月影像'
},
{
date: '20210120',
label: '20210120',
popup: 'GF1<br>2021二月影像'
},
{
date: '20220120',
label: '20220120',
popup: 'GF1<br>2022二月影像'
},
{
date: '20230120',
label: '20230120',
popup: 'GF1<br>2023二月影像'
},
{
date: '20240120',
label: '20240120',
popup: 'GF1<br>2024二月影像'
},
{
date: '20250120',
label: '20250120',
popup: 'GF1<br>2025二月影像'
}
],
timeUnitControl: !0,
container: '#timePlay',
onClickChangeEnd: function(t) {},
parentContainer: 'body'
},
options: {},
spatioOptions: {
speed: 4e3,
timeDisplay: [],
timeUnitControl: !0,
container: '#timePlay',
onClickChangeEnd: function(t) {},
parentContainer: 'body'
},
left: '',
right: '',
timer: null,
translate: 0,
dis: 0,
dis_hour: 0,
curr_x: 0,
temp_day: {},
curr_day: {},
curr_lid: {},
index_hover: 0,
hover: 0,
delay: 0,
index: 0
}
},
mounted() {
// this.options = this.defaultOption
// this.initDoms()
// this.initInfo()
// this.init()
// this.getData()
window.spatioOff = this.spatioOff
window.spatioSwitch = this.spatioSwitch
},
methods: {
onClick() {
this.spatioSwitch()
},
spatioOff() {
if (this.spatioShow) {
this.stopPlay()
this.spatioShow = !this.spatioShow
if (this.oldLayer !== null) {
window.view.map.remove(this.oldLayer)
}
$('#timePlay').empty()
}
},
spatioSwitch() {
if (!this.spatioShow) {
this.getData()
this.spatioShow = true
} else {
this.stopPlay()
this.spatioShow = !this.spatioShow
if (this.oldLayer !== null) {
window.view.map.remove(this.oldLayer)
}
$('#timePlay').empty()
}
},
layerSwitch(dataset) {
const layer = new NewLayer(dataset.year, dataset.year, parseInt(dataset.type), dataset.url)
if (this.oldLayer !== null) {
window.view.map.remove(this.oldLayer)
}
window.view.map.addMany([layer])
this.oldLayer = layer
},
getData() {
const that = this
if (!this.ifRequest) {
spatioList({}).then(res => {
that.spatioOptions.timeDisplay = []
let obj = {} // date label popup
res.data.map(function(item, index) {
if (index === 0) {
that.oneDataSet = { 'date': item.text, 'label': item.text, 'popup': item.text, 'url': item.serviceurl, 'type': item.servicetype, 'year': item.text }
}
obj = { 'date': item.text, 'label': item.text, 'popup': item.text, 'url': item.serviceurl, 'type': item.servicetype }
that.spatioOptions.timeDisplay.push(obj)
})
that.layerSwitch(that.oneDataSet)
that.options = that.spatioOptions
// that.spatioSwitch()
that.initDoms()
that.initInfo()
that.init()
})
that.ifRequest = !that.ifRequest
} else {
that.layerSwitch(that.oneDataSet)
that.initDoms()
that.initInfo()
that.init()
}
},
init() {
var _this = this
_this.index = 0
_this.initDate()
$('.timeControl').on('click', function() {
_this.play()
})
$('.timeProgress').on('mouseover', function() {
_this.hoverPopup()
})
$('.timeProgress').on('click', function() {
_this.clickPopup()
})
$('.next').on('click', function() {
_this.pageNext()
})
$('.prev').on('click', function() {
_this.pagePrev()
})
$('.prev-hand').on('click', function() {
_this.prevHandClick()
})
$('.next-hand').on('click', function() {
_this.nextHandClick()
})
$(window).resize(function() {
_this.setDom()
})
},
initInfo() {
var _this = this
_this.left = $('.timeProgress-box').offset().left
_this.right = $(window).width() - _this.left - $('.timeProgress-box').width()
_this.dis = $('.timeProgress-inner li').outerWidth()
_this.dis_hour = _this.dis / 24
_this.width = _this.dis
_this.curr_x = _this.dis
$('.timeProgress-bar').css({
width: _this.dis
})
$('.for-animate').css('left', _this.dis)
$('.timeProgress-inner').css({
transform: 'translateX(-0px)'
})
$('.prev').addClass('disable')
},
initDate() {
var t = this.options.timeDisplay[0].date
var e = this.options.timeDisplay[0].popup
$('.curr-popup').html(e || t)
this.curr_day = {
year: t
}
},
initDoms() {
// $(this.options.container).hide()
var t = $('<div id="timeMain"></div>')
$(this.options.container).append(t)
t.append('<div class="timeControl-box"><div class="timeControl play"></div></div>').append('<div class="prev-box"><div class="prev disable" title="上一页"></div></div><div class="next-box"><div class="next" title="下一页"></div></div>').append('<div class="prev-extent"><div class="prev-hand disable" title="上一年"></div></div><div class="next-extent"><div class="next-hand" title="下一年"></div></div>').append('<div class="timeProgress-box"><div class="hover-popup"></div><div class="curr-popup for-animate"></div><div class="timeProgress-hide"><div class="timeProgress-inner"><div class="timeProgress"><div class="timeProgress-bar"></div></div><ul></ul></div></div></div>')
this.fillDate()
this.setDom()
},
pxToInt(dom, attribute) {
return parseInt(this.$(dom).css(attribute).replace('px', ''))
},
setDom() {
if (!($('.timeProgress-box').length <= 0)) {
var parent = this.options.parentContainer
var marginL = parseInt($(parent).css('marginLeft')) || 0
var pWidth = 0.8 * $(parent).width() - 190
var cWidth = $('.timeProgress-inner').width()
pWidth < cWidth ? $('#timePlay').css({
width: 0.8 * $(parent).width(),
marginLeft: (0.8 * -$(parent).width() + marginL) / 2,
border: '1px solid rgba(0,0,0,0.3)'
}) : $('#timePlay').css({
width: cWidth + 190,
marginLeft: -(cWidth + 190 + marginL) / 2,
border: '1px solid rgba(0,0,0,0.3)'
})
this.left = $('.timeProgress-box').offset().left
$('.timeProgress-box').width() < $('.timeProgress-inner').width() ? $('.next').removeClass('disable') : $('.next').addClass('disable')
}
},
clearinfo() {
this.stopPlay()
this.initInfo()
this.fillDate()
$('#timeMain').remove()
},
// update(t) {
// this.stopPlay()
// this.options = t
// this.fillDate()
// this.initInfo()
// var date = t.timeDisplay[0].date
// var popup = t.timeDisplay[0].popup
// $('.curr-popup').html(popup || date)
// this.setDom()
// },
hoverPopup() {
var _this = this
$(window).on('mousemove', function(e) {
var event = (e || window.event).clientX
var num = Math.floor((event + _this.translate - _this.left) / _this.dis)
_this.index_hover = num
_this.temp_day = {
year: $('.every:eq(' + num + ')').attr('data-year')
}
_this.curr_x = _this.dis * (num + 1)
var txt = _this.temp_day.year
$('.hover-popup').show().css('left', event - _this.left).text(txt)
})
$('.timeProgress').one('mouseleave', function() {
$(window).off('mousemove')
$('.hover-popup').hide()
})
},
clickPopup(t, e) {
var _this = this
_this.stopPlay()
var r = _this.temp_day.year
$('.timeProgress-bar').stop().css('width', _this.curr_x)
_this.width = _this.curr_x
_this.curr_day = _this.temp_day
_this.index = _this.index_hover
var i = $('.every:eq(' + _this.index + ')').attr('popup-text')
$('.curr-popup').html(i || r)
// for ($('.curr-popup').html(i || r),
// e || n.options.onClickChangeEnd(n),
// n.reachStart() && n.halfPagePre(),
// n.reachEnd() && n.halfPageNext(); t && n.reachEnd() && !$('.next').hasClass('disable');) { n.halfPageNext() }
$('.curr-popup.for-animate').css('left', _this.curr_x - _this.translate)
_this.index > 0 ? $('.prev-hand').removeClass('disable') : $('.prev-hand').addClass('disable')
_this.index < $('.every').length - 1 ? $('.next-hand').removeClass('disable') : $('.next-hand').addClass('disable')
},
prevHandClick() {
var _this = this
_this.stopPlay()
_this.reachStart() && _this.halfPagePre()
_this.index > 1 ? $('.prev-hand').removeClass('disable') : $('.prev-hand').addClass('disable')
if (_this.index > 0) {
$('.next-hand').removeClass('disable')
_this.index--
var width = Math.floor(_this.width / _this.dis) * _this.dis
_this.width = width - _this.dis
_this.curr_day = {
year: $('.every:eq(' + _this.index + ')').attr('data-year')
}
var txt = $('.every:eq(' + _this.index + ')').attr('popup-text')
_this.index < $('.every').length && $('.curr-popup').html(txt || _this.curr_day.year)
_this.options.onClickChangeEnd(_this)
$('.timeProgress-bar').css({
width: _this.width
})
$('.for-animate').css('left', _this.width - _this.translate)
}
},
nextHandClick() {
var t = this
t.stopPlay()
t.reachEnd() && t.halfPageNext()
t.index < $('.every').length - 2 ? $('.next-hand').removeClass('disable') : $('.next-hand').addClass('disable')
if (t.index < $('.every').length - 1) {
$('.prev-hand').removeClass('disable')
t.index++
var e = Math.floor(t.width / t.dis) * t.dis
t.width = e + t.dis
t.curr_day = {
year: $('.every:eq(' + t.index + ')').attr('data-year')
}
var n = $('.every:eq(' + t.index + ')').attr('popup-text')
$('.curr-popup').html(n || t.curr_day.year)
t.options.onClickChangeEnd(t)
$('.timeProgress-bar').css({
width: t.width
})
$('.for-animate').css('left', t.width - t.translate)
}
},
fillDate() {
var t = this
$(t.options.container).find('ul').find('li').remove()
t = this
for (var e, n, u, type, r = '', i = 0; i < t.options.timeDisplay.length; i++) {
e = t.options.timeDisplay[i].date
n = t.options.timeDisplay[i].label
u = t.options.timeDisplay[i].url
type = t.options.timeDisplay[i].type
r += '<li data-url="' + u + '" data-type="' + type + '" class="every" data-year="' + e + '" popup-text="' + (t.options.timeDisplay[i].popup || '') + '"><span class="xmon">' + n + '</span></li>'
}
$(t.options.container).show().find('ul').append(r)
$('.timeProgress-inner > ul > li').on('mouseover', function() {
t.hoverPopup()
}).on('click', function(e) {
t.layerSwitch($(this)[0].dataset)
t.clickPopup()
})
},
play() {
$('.timeControl').hasClass('play') ? this.startPlay() : this.stopPlay()
},
startPlay() {
var r = this
$('.timeControl').toggleClass('play').toggleClass('pause')
r.timer = setInterval(function() {
if (r.delay) { return !1 }
var t = r.curr_day
r.reachEnd() && r.halfPageNext()
r.index === 0 && (r.width = r.dis)
r.index++
var e = Math.floor(r.width / r.dis) * r.dis
r.width = e + r.dis
r.curr_day = {
year: $('.every:eq(' + r.index + ')').attr('data-year')
}
r.oldDataSet = {
url: $('.every:eq(' + r.index + ')').attr('data-url'),
type: $('.every:eq(' + r.index + ')').attr('data-type'),
year: $('.every:eq(' + r.index + ')').attr('data-year')
}
var n = $('.every:eq(' + r.index + ')').attr('popup-text')
r.index < $('.every').length && $('.curr-popup').html(n || r.curr_day.year)
if (r.width > $('.timeProgress').width()) {
r.width = $('.timeProgress').width()
r.curr_day = t
r.stopPlay()
r.width = r.dis
r.initDate()
r.startPlay()
r.index = 0
r.translate = 0
$('.prev').addClass('disable')
$('.timeProgress-inner').css({
transform: 'translateX(-0px)'
})
$('.for-animate').css('left', r.dis)
} else {
$('.for-animate').css('left', r.width - r.translate)
}
$('.timeProgress-bar').css({
width: r.width
})
r.options.onClickChangeEnd(r)
if (r.index === 0) {
r.oldDataSet = r.oneDataSet
}
r.layerSwitch(r.oldDataSet)
}, r.options.speed)
},
stopPlay() {
$('.timeControl').hasClass('pause') && $('.timeControl').toggleClass('play').toggleClass('pause')
clearInterval(this.timer)
this.timer = null
},
reachEnd() {
return $('.timeProgress-box').width() - (this.width - this.translate) <= 108
},
reachIndex(t, e) {
this.index_hover = t
this.temp_day = {
year: $('.every:eq(' + t + ')').attr('data-year')
}
this.curr_x = this.dis * (t + 1)
this.clickPopup(e, !0)
},
reachStart() {
return this.width - this.translate <= 108
},
halfPageNext() {
$('.timeProgress-box').width() < $('.timeProgress-inner').width() && $('.prev').removeClass('disable')
var t = $('.timeProgress-box').width()
var e = $('.timeProgress-inner').width()
this.translate += $('.timeProgress-box').width() / 2
if (this.translate + t > e) {
this.translate = $('.timeProgress-inner').width() - t
$('.next').addClass('disable')
}
$('.timeProgress-inner').css({
transform: 'translateX(-' + this.translate + 'px)'
})
},
halfPagePre() {
$('.timeProgress-box').width() < $('.timeProgress-inner').width() && $('.next').removeClass('disable')
$('.for-animate').css('left', this.pxToInt('.for-animate', 'left') + this.translate)
this.translate -= $('.timeProgress-box').width() / 2
if (this.translate < 0) {
this.translate = 0
$('.prev').addClass('disable')
}
$('.timeProgress-inner').css({
transform: 'translateX(-' + this.translate + 'px)'
})
},
pageNext() {
$('.timeProgress-box').width() < $('.timeProgress-inner').width() && $('.prev').removeClass('disable')
var t = $('.timeProgress-box').width()
var e = $('.timeProgress-inner').width()
this.translate += $('.timeProgress-box').width()
if (this.translate + t > e) {
this.translate = $('.timeProgress-inner').width() - t
$('.next').addClass('disable')
}
$('.timeProgress-inner').css({
transform: 'translateX(-' + this.translate + 'px)'
})
$('.for-animate').css('left', this.pxToInt('.for-animate', 'left') - this.translate)
},
pagePrev() {
$('.timeProgress-box').width() < $('.timeProgress-inner').width() && $('.next').removeClass('disable')
$('.for-animate').css('left', this.pxToInt('.for-animate', 'left') + this.translate)
this.translate -= $('.timeProgress-box').width()
if (this.translate < 0) {
this.translate = 0
$('.prev').addClass('disable')
}
$('.timeProgress-inner').css({
transform: 'translateX(-' + this.translate + 'px)'
})
}
}
}
</script>
<style lang="less">
.yingxiang {
position: absolute;
left: 260px;
bottom: 20px;
}
#timePlay {
position: absolute;
left: 50%;
bottom: 50px;
width: 0px;
height: 80px;
background-color: rgba(0,0,0,0.6);
//display: none;
margin-left: -41%;
//border: 1px solid rgba(0,0,0,0.3);
border-radius: 50px;
z-index: 9;
#timeMain {
position: relative;
flex: 1;
}
.timeControl-box {
position: relative;
width: 40px;
height: 80px;
float: left;
margin-left: 10px;
}
.timeControl {
position: absolute;
left: 10px;
top: 25px;
width: 20px;
height: 30px;
cursor: pointer;
}
.timeControl.play:after {
content: "";
border-left: 20px solid #fff;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
display: inline-block;
}
.timeControl.pause:after {
content: "";
float: right;
width: 4px;
height: 20px;
margin-top: 5px;
margin-right: 2px;
background-color: #fff;
display: inline-block;
}
.timeControl.pause:before {
content: "";
float: left;
width: 4px;
height: 20px;
margin-top: 5px;
margin-left: 2px;
background-color: #fff;
display: inline-block;
}
.timeProgress-box {
position: absolute;
left: 115px;
top: 0;
bottom: 0;
right: 75px;
height: 200px;
}
.timeProgress-box>.timeProgress-hide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.timeProgress-inner {
position: absolute;
height: 80px;
top: 0;
left: 0;
padding-top: 44px;
box-sizing: border-box;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.timeProgress-inner>ul {
overflow: hidden;
white-space: nowrap;
font-size: 0;
padding-left: 0;
}
.timeProgress-inner>ul>li {
width: 72px;
height: 32px;
margin: 10px 0;
color: #fff;
font-size: 12px;
line-height: 12px;
text-align: center;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.timeProgress-inner>ul>li:hover span {
color: #f4ff00;
padding-top: 1px;
}
.timeProgress-inner>ul>li span {
display: block;
white-space: break-spaces;
padding: 0 5px;
}
.timeProgress-inner>ul>li:before {
content: "";
position: absolute;
height: 12px;
width: 1px;
background: #fff;
display: block;
}
.timeProgress {
top: 36px;
width: 100%;
background: #fff;
cursor: pointer;
}
.timeProgress,.timeProgress-bar {
position: absolute;
height: 8px;
border-radius: 4px;
}
.timeProgress-bar {
background: #319ade;
overflow: visible!important;
-webkit-transition: width .3s;
-moz-transition: width .3s;
-ms-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
}
.prev-box {
left: 53px;
}
.next-box,.prev-box {
position: absolute;
z-index: 1;
top: 0;
width: 40px;
height: 80px;
}
.next-box {
right: 15px;
}
.prev {
left: 0;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.next,.prev {
position: absolute;
top: 24px;
width: 32px;
height: 32px;
cursor: pointer;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABt0lEQVRYR+3VTy/DYBwH8O9vljHtyMJ6YBER/9YdcEfi6CAkLhLvgrfBm3DwAiT+HCUSDtywrbLDIi7rNiQ2xfbsJ80iKiOedRqX9tr2+X76ff6U8M8X/XM+fIDfgN+AVAP8OBS1REjp7sveObftS2FiorNf5Iiyr263sxSgbCYuAJoiEqtKzNizw+zwGndkGMgg/DYfiWQLbhBygLy+DcIGgNoHgs2kWuH6JYiG20FIAZgRqJj6DgjrTsRzaTReF6EzAHG3CCmAXe1PCOthclhUAyduEdKA7xCAWFI146gdREuAJgTjjQgripY6dCLAfKWErDmK5h5/W5gtA5oRbHWEWA9HM7kvCOBI1VKLXgGoUkjsArQGZisYqM90xQzjuTg+WBfBUxCGAD5WtfTCnwOY8Rlub0vwsqKlD76EezUFTeHEK0osve8MZ7ChdolZ6rkp/vb19n3pNeBFuDTAq3BpQDmvb4Gw2TgFG7UzD3RXzN7rxlHcWu3OqZGagrKZOAdo+iPcHuCplNRJ8HU74dIN8P1Ir8WBSNPv2EyMdcaqt57/jmVWs9tnpKbA7eAy7/kAvwG/gXfDPh8wyLtBZwAAAABJRU5ErkJggg==);
border-radius: 4px;
}
.next {
right: 0;
}
.next:hover,.prev:hover {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 16px;
}
.curr-popup {
position: absolute;
left: 0;
bottom: 175px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
min-width: 80px;
opacity: .9;
font-size: 12px;
line-height: 24px;
color: #fff;
background-color: #319ade;
text-align: center;
border-radius: 5px;
transition: left .3s;
}
.curr-popup:after {
content: "";
position: absolute;
left: 32px;
top: 100%;
border-top: 8px solid #319ade;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.hover-popup {
position: absolute;
top: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 60px;
font-size: 12px;
line-height: 24px;
color: #333;
background-color: rgba(255, 255, 255, 0.692);
text-align: center;
border-radius: 5px;
display: none!important;
}
.hover-popup:after {
content: "";
position: absolute;
left: 22px;
top: 100%;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
opacity: .7;
}
.next.disable,.prev.disable {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABVUlEQVRYR+3VvUoDQRTF8f+x9AOxVsRGhDRqr4KlhSjYCL6Fvoa+hIUPIERTCoIW2qlguiB2WtiJIlwZmMCybMjd0SXNBEKKfJxfzp27K0b80IjzyYDcQG7A1YCZzQATkl6La2tmS0BP0lfqOnsB98AysCfpPITF8GcgPDckvaUgvIAT4BD46SPMbBJ4ABb+gvACxoBT4KCEmANugfCa1IQLECsfhAgNXKci3IABiG1JHTNLRtQCVCC+gV1JlyXEI7Au6WPYwawNqEB8Ai1JvRKiI2mrKUCAnwH7QACsSuqa2SxwA8wDV5I2/x1gZsXwsJY7ki5K4c2MoCI8zL9dCu8Ca5Leh/378L77DDQR7gY0FV4HcAwcxatgv/Zx4CleimvVXhyNawRmdgesxJ1vx1VsRUByeJ0GpoGpitvxIvDS+O3Yc5pTP+MaQeqPe76XAbmB3MAvdF22ISb3+lgAAAAASUVORK5CYII=)!important;
opacity: .8;
pointer-events: none;
}
.prev-extent {
left: 82px;
}
.next-extent,.prev-extent {
position: absolute;
z-index: 2;
top: -2px;
width: 12px;
height: 16px;
}
.next-extent {
right: 57px;
}
.prev-hand {
left: 10px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOklEQVQ4T6WTP0vDQBiHf283TbqZ61dIbnR0dxMHHVyEgoMO/gERoU4VB106qHQQHDp0dXKrn8AvYJLRNUk3r1VE88olFSRNmgZvOrj3ee54f+8R/rkojx8H9sqC8J+JEJf5pwRvobNPoC6Y+4bwmkTgWZIpgQpkB4QTDTHzfb3h7VYSMIPGkbxl4CABOe6YDf+0SJLbA12sQnkG4FLvieK2YfkXeZJCQSqxmwD1tIIRH9aF381KZgp08SiSe8y4m4A7pnB7fyWlAhXaN0DtKIX42hTe8dwCFcorAK0EBR5My93KzkbhC0aRbDPjPI0Tj6ZwN4jwPVcPVGi3gJq+/RfeJMLXXCmoodxGjP6keGBY7loRnESctarAWQVhANCTYdE60ctnpUlMo3OWF5feXaLXj8qfqQzInv8AQmllEQ1i+qMAAAAASUVORK5CYII=) no-repeat 100%;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.next-hand,.prev-hand {
position: absolute;
top: 33px;
width: 18px;
height: 18px;
cursor: pointer;
}
.next-hand {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOklEQVQ4T6WTP0vDQBiHf283TbqZ61dIbnR0dxMHHVyEgoMO/gERoU4VB106qHQQHDp0dXKrn8AvYJLRNUk3r1VE88olFSRNmgZvOrj3ee54f+8R/rkojx8H9sqC8J+JEJf5pwRvobNPoC6Y+4bwmkTgWZIpgQpkB4QTDTHzfb3h7VYSMIPGkbxl4CABOe6YDf+0SJLbA12sQnkG4FLvieK2YfkXeZJCQSqxmwD1tIIRH9aF381KZgp08SiSe8y4m4A7pnB7fyWlAhXaN0DtKIX42hTe8dwCFcorAK0EBR5My93KzkbhC0aRbDPjPI0Tj6ZwN4jwPVcPVGi3gJq+/RfeJMLXXCmoodxGjP6keGBY7loRnESctarAWQVhANCTYdE60ctnpUlMo3OWF5feXaLXj8qfqQzInv8AQmllEQ1i+qMAAAAASUVORK5CYII=) no-repeat 50%;
z-index: 1000000;
line-height: 15px;
}
.next-hand.disable,.prev-hand.disable {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7ElEQVQ4T6WSvy6EURBHz3klpV4nCgqNZBMFhT+JiIRqRUGzhRWFRKHQqnQ8gSfwLCIYmWQise5++21Me+ecufnNyD/LFh8Ri8CL+jXL/0cQETvANXAPDNTokrQEI+CwoFt1a15BSq+A3QJH6tE0STODbI6IE+C8wKF61pJMFZRkANwB2benZja/qlNQkm3gpqhNNYU/1UcwBvaLuFQPegsi4gI4LuABWJ+8ja4Qh8BpwY/AqvrZK4OIyKk5PSvhNfWj1xYiYqOuMPufgOVpcDa0LnGpwGdgRX2f6xJrdQvAq/rWBTd/MAuYfP8GivxMEYJYNKYAAAAASUVORK5CYII=);
pointer-events: none;
}
.next-hand:hover,.prev-hand:hover {
background-color: rgba(255, 255, 255, 0.37);
border-radius: 9px;
}
}
</style>
效果图：
扫一扫
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
