"
page.document.write(html);
}
// 獲取元素距離頁面左邊的距離
var getOffsetLeft = function(obj){
var tmp = obj.offsetLeft;
var node= obj.offsetParent;
while(node!= null){
tmp += node.offsetLeft;
node= node.offsetParent;
}
return tmp;
}
//獲取元素距離頁面頂部的距離
var getOffsetTop = function(obj){
var tmp = obj.offsetTop;
var node= obj.offsetParent;
while(node!= null){
tmp += node.offsetTop;
node= node.offsetParent;
}
return tmp;
}
var smallBox = document.querySelector('.mySmallBox')
var bigBox = document.querySelector('.MyBigBox')
var bigImg = document.querySelector('.MyBigBox>img')
var moveBox = document.querySelector('.moveBox')
var showbox = document.querySelector('#myShow_img')
var MyBigBoxImg = document.querySelector('.MyBigBoxImg')
var move = new Fangdajing(smallBox, bigBox, moveBox, bigImg)
move.fangda()
// 小元素 大元素 遮罩層盒子 比例
function Fangdajing(smallBox, bigBox, moveBox, bigImg) {
this.smallBox = smallBox
this.bigBox = bigBox
this.moveBox = moveBox
this.bigImg = bigImg
this.moveMax
this.bigBoxMax
Fangdajing.prototype.fangda = function () {
//鼠標移入顯示
smallBox.onmouseover = function (e) {
if(e.currentTarget.firstElementChild.src=='https://szimg.xhj.com/xhj/images/2023-01-09/8a3292b0-b408-40aa-8e8f-a16f62061859.jpg'){
smallBox.style.cursor='auto'
return false;
}
MyBigBoxImg.src=e.currentTarget.firstElementChild.src
moveBox.style.display = 'block'
bigBox.style.display = 'block'
MyBigBoxImg.style.width=Number(bigBox.offsetWidth)*(Number(showbox.offsetWidth)/Number(moveBox.offsetWidth))+'px'
MyBigBoxImg.style.height=Number(bigBox.offsetHeight)*(Number(showbox.offsetHeight)/Number(moveBox.offsetHeight))+'px'
}
//鼠標移出消失
smallBox.onmouseout = function () {
moveBox.style.display = 'none'
bigBox.style.display = 'none'
}
this.fnMove()
}
Fangdajing.prototype.fnMove = function () {
var _offsetLeft =
showbox.onmousemove = function (e) {
e = e || window.event
var moveBoxX = e.pageX - getOffsetLeft(this) - moveBox.offsetWidth / 2
var moveBoxY = e.pageY - getOffsetTop(this) - moveBox.offsetHeight / 2
moveMax = smallBox.offsetWidth - moveBox.offsetWidth
moveMaxY = smallBox.offsetHeight - moveBox.offsetHeight
bigBoxMax = bigImg.offsetWidth - bigBox.offsetWidth
bigBoxMaxY = bigImg.offsetHeight - bigBox.offsetHeight
if (moveBoxX <= 0) {
moveBoxX = 0
} else if (moveBoxX >= moveMax) {
moveBoxX = moveMax
}
if (moveBoxY <= 0) {
moveBoxY = 0
} else if (moveBoxY >= moveMaxY) {
moveBoxY = moveMaxY
}
var ProportionX = moveBoxX * bigBoxMax / moveMax
var ProportionY = moveBoxY * bigBoxMaxY / moveMaxY
bigImg.style.left = -ProportionX + 'px'
// if(ProportionY>=305){
// ProportionY=305
// }
bigImg.style.top = -ProportionY + 'px'
moveBox.style.left = moveBoxX + 'px'
moveBox.style.top = moveBoxY + 'px'
}
}
}
// 相冊點擊
let imgarr = [];
let currendIndex = 0;
$('#bigimg1').click(function (e) {
// let my = $(this).children('.bigimg').children('#bigimg1');
if(e.target.currentSrc=="https://szimg.xhj.com/xhj/images/2023-01-09/8a3292b0-b408-40aa-8e8f-a16f62061859.jpg"){
return false;
}
$('.back_model1').show();
imgarr.push($('.imgList_item img'))
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(0).removeClass('dimback')
$('.typename11').html(''+imgarr[0][0].dataset.lab+' '+parseInt(parseInt(imgarr[0][0].dataset.index)+1)+'/'+imgarr[0].length)
for(let k in imgarr[0]){
console.log(imgarr[0][k].currentSrc)
if(imgarr[0][k].currentSrc == e.target.currentSrc){
currendIndex = k
$('#myimg').attr('src', e.target.currentSrc);
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(k).removeClass('dimback')
$('.typename11').html(''+imgarr[0][k].dataset.lab+' '+parseInt(parseInt(imgarr[0][k].dataset.index)+1)+'/'+imgarr[0].length)
if(currendIndex>=10){
$('.imgList1').scrollLeft(currendIndex*70)
}
}else{
}
}
})
$('.del').click(function () {
$('.imgList1').scrollLeft(0)
$('.back_model1').hide();
imgarr = []
})
$('.imgList_item img').click( function (e){
console.log(e)
console.log($(this).data("index"))
$('.imgList_item').addClass('dimback')
$(this).parent().removeClass('dimback')
currendIndex = $(this).data("index");
$('.imgList1').scrollLeft(Math.floor(currendIndex / 10)*700)
$('.typename11').html(''+imgarr[0][currendIndex].dataset.lab+' '+parseInt( parseInt(imgarr[0][currendIndex].dataset.index)+1)+'/'+imgarr[0].length)
$('#myimg').attr('src', e.target.currentSrc);
})
// 點擊右邊
$('.rightnow').click(function (){
++currendIndex
// console.log(imgarr[0][currendIndex])
if(currendIndex>=imgarr[0].length){
currendIndex = 0
$('.imgList1').scrollLeft(currendIndex*50)
$('#myimg').attr('src',imgarr[0][currendIndex].currentSrc);
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(currendIndex).removeClass('dimback')
$('.typename11').html(''+imgarr[0][currendIndex].dataset.lab+' '+parseInt( parseInt(imgarr[0][currendIndex].dataset.index)+1)+'/'+imgarr[0].length)
}else {
if( currendIndex>=10&& currendIndex % 10 ==0){
$('.imgList1').scrollLeft(currendIndex*70)
}
$('#myimg').attr('src',imgarr[0][currendIndex].currentSrc);
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(currendIndex).removeClass('dimback')
$('.typename11').html(''+imgarr[0][currendIndex].dataset.lab+' '+parseInt( parseInt(imgarr[0][currendIndex].dataset.index)+1)+'/'+imgarr[0].length)
}
})
// 點擊左邊
$('.leftnow').click(function (){
if(currendIndex % 10 ==0){
console.log('動起來！123')
console.log(currendIndex-10)
$('.imgList1').scrollLeft((currendIndex-10)*70)
}
--currendIndex
console.log(currendIndex)
if(currendIndex<0){
currendIndex = imgarr[0].length-1
$('.imgList1').scrollLeft(currendIndex*50)
$('#myimg').attr('src',imgarr[0][currendIndex].currentSrc);
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(currendIndex).removeClass('dimback')
$('.typename11').html(''+imgarr[0][currendIndex].dataset.lab+' '+parseInt( parseInt(imgarr[0][currendIndex].dataset.index)+1)+'/'+imgarr[0].length)
}else {
// if( currendIndex % 10 ==0){
// console.log('動起來！123')
// console.log(currendIndex-9)
// $('.imgList1').scrollLeft((currendIndex-9)*70)
// }
// $('.imgList1').scrollLeft(currendIndex*50)
$('#myimg').attr('src',imgarr[0][currendIndex].currentSrc);
$('.imgList_item').addClass('dimback')
$('.imgList_item').eq(currendIndex).removeClass('dimback')
$('.typename11').html(''+imgarr[0][currendIndex].dataset.lab+' '+parseInt( parseInt(imgarr[0][currendIndex].dataset.index)+1)+'/'+imgarr[0].length)
}
})
中信凱旋城（中信新城四期） 3室2廳 85.00萬 長沙天心區中信凱旋城（中信新城四期）二手房 - 長沙象盒找房