头像

jQuery两张图片前后对比查看代码

来源:https://www.sucaihuo.com/js/4352.html 18***38 2019-05-13 12:01浏览(174) 收藏

jQuery两张图片前后对比查看代码,两张不同的图片叠加成一张,通过左右移动鼠标查看比较图片。
jQuery两张图片前后对比查看代码
分类:图片代码 > 鼠标滑过 难易:中级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 4 下载资源 下载积分: 20 积分

js代码

<script src="js/jquery.min.js"></script>
<script>
	$(document).ready(function () {
		$('.img-box').mousemove(function (e) {
			var left = $(".img-box").offset().left;
			// 计算出需要偏移的距离
			var offsetNO = e.pageX - left;
			// 默认原图最小显示200px,最大显示1100px
			if (offsetNO < 200) {
				$('.part-l').width(200);
				$('.toolbar').css('left', '200px');
			} else if (offsetNO > 1100) {
				$('.part-l').width(1100);
				$('.toolbar').css('left', '1100px');
			} else {
				$('.part-l').width(offsetNO);
				$('.toolbar').css('left', offsetNO + 'px');
			}
		});
	});
</script>
最新交易
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3453293792

1 2