Html
    Css
    Js

    
                        
#a {
	position:relative;
	width:300px;
	height:200px;
	overflow:hidden;
	box-shadow:1px 1px 2px 3px #ececec;
	margin:10px  auto 0;
}
#b {
	position:absolute;
	top:0px;
	left:0px;
	background:url(http://www.jq22.com/demo/jQuery-lbt201701151156/images/img2.jpg);
	background-size:100% 100%;
	width:180%;
	height:130%;
}
body {
	width:100vw;
	height:100vh;
	background:transparent;
}
.anim {
	-webkit-animation:largen 200ms 1 linear;
	-webkit-animation-fill-mode:forwards;
}
.anim_stop {
	-webkit-animation:largen_back 200ms 1 linear;
	-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes largen {
	from {
	-webkit-transform:scale(1,1);
}
to {
	-webkit-transform:scale(1.15,1.15);
}
}@-webkit-keyframes largen_back {
	from {
	-webkit-transform:scale(1.15,1.15);
}
to {
	-webkit-transform:scale(1.0,1.0);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery图片放大滑动,内有详细步骤注释代码

布局简单,内有详细步骤注释代码,或者直接复制js部分  在最下面的函数的两个参数修改成对应的元素即可。

第一个参数是盒子元素,第二个参数是想展示的图片背景元素。

0