小功能笔记

jq实现普通手机放大

• js

$('.cs-img').bind('click',function () {
    if(this.classList.contains('img-max-style')){
        this.classList.remove('img-max-style')
    }else{
        this.classList.add('img-max-style');
        return
    }
})

• css

.img-max-style{
	position: fixed;
	width: 65vh !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
	border: 100vh solid rgba(200,200,200,0.5);
}

实现思路

• 想法是把图片给个fixed固定定位，再把它的z-index提到最高,把图片宽高放大到屏幕比的65，就会出现类似于放大的效果。
• 图片背景黑灰色，我选择的是给该元素加入边框，这样比较简单就可以实现。只需要定位好，就可以实现想要的效果。
• jq方面选择使用 classList 它会比较方便的实现，添加类名和删除类名

使用fixed固定图片不能横拖

使用relative可拖拉