溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript之圖片的放大和還原

發(fā)布時(shí)間：2020-05-14 02:28:33 來(lái)源：網(wǎng)絡(luò) 閱讀：496 作者：愛笑嘚蛋蛋 欄目：web開發(fā)

一個(gè)簡(jiǎn)單的功能，鼠標(biāo)放在圖片上在該圖片的上層顯示放大后的圖片，浮出的效果

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    var _width = $(this).find("img").width() * 1.5,
    _height = $(this).find("img").height() * 1.5,
    _top = _height / 2,
    _left = _width / 2;
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-' + _top + 'px', 
            marginLeft: '-' + _left +'px', 
            top: '50%', 
            left: '50%', 
            width: _width + 'px', 
            height: _height + 'px',
            padding:'10px'
        }, 200);
    } , function() {
        $(this).css({'z-index' : '0'});
            $(this).find('img').removeClass("hover").stop()
		.animate({
                    marginTop: '0', 
		    marginLeft: '0',
		    top: '0', 
		    left: '0', 
		    width: '100%', 
                    height: '165px', 
                    padding: '5px'
	        }, 400);
});


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手