QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery两张图片前后对比代码

jQuery两张图片前后对比代码

jQuery制作两张不同的图片叠加成一张,通过滑块左右拖动,查看图片前后对比显示过程代码。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/base.css">

2、head引入js文件

<script src="js/jquery.min.js"></script>

3、body引入HTML代码

<div class="section">
	<div class="img-box">
		<div class="part-l">
			<div class="img-before">
				<img src="imgs/before.jpg" alt="">
			</div>
		</div>
		<span class="toolbar"></span>
		<div class="part-r">
			<div class="img-after">
				<img src="imgs/after.jpg" alt="">
			</div>
		</div>
		<div class="tags">
			<a href="#">之前</a>
			<a href="#">之后</a>
		</div>
	</div>
</div>

<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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
全红彩票 www.282.in-七星彩三字定位包码| www.760541.com-彩票机如何连接电视| www.863733.com-腾讯75秒彩票| www.955553.cc-合肥竞彩店销量| www.340101.com-怎么p彩票中奖| www.18gh.com-辽宁快三平台| www.82796.com-2013彩票app| www.106911.com-入侵黑彩网站工具| www.189885.com-安徽快三助手| www.262652.com-福彩双色球中奖号码| www.338426.com-七乐彩专家杀号总汇| www.413716.com-五福彩彩票正规吗| www.515542.com-彩40-| www.591589.com-sb博彩公司全称| www.03yo.com-体育彩票大乐走势图| www.7014.cc-力彩日用品-| www.38831.com-旺彩专家预测分享| www.027679.com-体彩刮刮乐代码| www.603121.com-下载万众彩app| www.976354.com-彩礼额度-| www.30iz.com-时时彩开奖结果开门| www.8520.vip-江苏快三玩法教程| www.9498.cm-彩钢琉璃瓦机设备| www.206595.com-彩票两元3d走势图| www.74086.com-体彩追加是-| www.nc4.cc-人人中彩票网创始人| www.c88.cm-百宝彩走势图下载| www.87za.com-七彩营口麻将辅助| www.5045.win-金庸诞辰日七星彩| www.5qk.com-竞彩中奖缴税| 好彩头彩票www.90305b.com| www.994712.com-hck好彩客-| www.31214.com-彩票走势图易网| www.13252.cc-竞彩心态-| www.337195.com-我是赌广西快三的| www.148100.com-彩迷网怎么样| www.284231.com-8福彩-| www.784735.com-大胜彩票官网| www.933786.com-中奖彩票到哪里兑奖| 大赢家彩票平台www.810877.com| www.588274.com-福彩3d大盘走势图| www.715805.com-双色球新彩吧预测| www.806059.com-9817彩票-| www.883071.com-彩678靠谱吗| www.582888.com-三宝体彩屋邀请码| www.725608.com-中福彩票平台安全吗| www.4630.cn-5a彩票网下载| www.bn55.com-下载易彩堂-| 豪彩VIPwww.hc2988.com| www.wj01.com-福彩七乐彩开奖时间| www.30lu.com-足彩计算器竞彩网| www.038835.com-彩票帮投会是什么| www.185806.com-分分时时彩开奖官网| www.57721.com-开奖公告百度彩票| www.377230.com-山东体彩地址| www.07668.cc-500时时彩平台| www.79584.com-新浪体育竞技彩票| www.rn37.com-博彩违法吗-| www.24ub.com-华彩在线彩票| www.595153.com-七乐彩七等奖多少钱| www.5142.cn-彩票11选5的玩法| www.877222.com-匕乐彩推荐-| www.pi48.com-十四场胜负彩| www.103798.com-78彩票官网-| www.110018.com-海口七星彩大师| www.390517.com-分分彩五星漏洞贴吧| www.15391.cc-嘉兴福彩-| www.387400.com-手机版的网投彩票| www.683233.com-秒速时时采彩可靠吗| www.883292.com-玩投彩是何用意| www.6sn.cc-商店送彩票广告| www.591237.com-竞彩大部分人是亏| www.9652.cc-福利彩票两块钱一注| www.797968.com-温州市易彩车品| www.959408.com-河南体彩网七星彩| www.1ni.com-人们是否应该买彩票| www.40984.com-顶级彩票娱乐平台| www.96336.com-加盟福利彩票店利润| www.pa75.com-取消彩票高频游戏| www.ae37.com-河南快三遗漏预测| www.040790.com-彩88网-| www.964669.com-竞彩管房网比分直播| www.624815.com-速8彩票平台官网| www.ad38.com-安徽体彩中心地址| www.19vu.com-5号彩票平台| www.943382.com-彩票开奖时间调整| www.uo5.cc-广西快三开奖软件| www.vl99.com-湖北快三杀号技巧| www.10dd.com-福彩123前后关系| www.089938.com-江苏体育彩票网| www.95651.cc-墨明足彩博客| www.420297.com-体育彩票装修| www.1007.in-周一福彩开什么| www.1411.in-众彩子默双色球杀号| www.980063.com-微信怎样买彩票| www.rx1.com-北京快三福彩网| www.778206.com-精彩音乐汇歌曲名单| www.657073.com-万豪福彩1.4.2| www.809278.com-中国彩票中奖真难| www.965704.com-福彩跟单兼职是什么| www.qy07.com-快三前三组中奖规律| www.937.cn-体彩7星彩开奖直播| www.8776.com-彩票亏损分红套利| www.047808.com-77彩票试玩账号| www.05301.com-彩票免费彩金| www.50865.com-快频彩票网站| www.1101.xyz-竞彩欧赔-| www.ef79.com-百姓彩票手机版| www.129258.com-28彩票平台登录| www.74sp.cc-长沙彩票店转让信息| www.056883.com-数字型彩票中奖技巧| www.181915.com-安徽快三分析预测| www.556018.com-体育彩票是全国的吗| www.906899.com-百乐门极速快三| www.82128.com-买一个彩票网站| www.101994.com-彩天下真的假的| www.131700.com-河南省体育彩票| www.688394.com-竞彩足球跟单微信| www.770145.com-二分时时彩怎么玩| www.859976.com-手机彩票网福利彩票| www.942365.com-111彩票网-| www.cp2811.com-五分彩都是骗局吗| www.xl93.com-80彩票高手计划| www.63025.com-河南商丘彩礼规定| www.929085.com-好友福利彩票骗局| www.745863.com-福彩三d大彩网| www.07lx.cc-体彩排列三的返奖率| www.122989.com-福彩公益金管理| www.907762.com-秘梦解图七星彩奖表| www.cp9589.com-天天快三是正规的吗| www.70tp.com-东莞彩易达-| www.55836.cc-彩28彩票-| www.fr67.com-中国体彩网足球| www.426633.com-足彩凯利方差app| www.526367.com-vr彩票真实的吗| www.025175.com-智慧彩票预测主页| www.891038.com-拉人玩彩票术语方法| www.44og.com-竞彩合买跟单| www.4412.vip-中国足球彩票返奖率| www.752568.com-福利彩票客户端| www.906298.com-吉林市黑彩抓获| www.984707.com-大发云神彩争霸| www.dl15.com-520快三下载| www.e57.cn-中国体彩网官方网购| www.27ma.com-足彩中奖3亿| www.852292.com-河南商丘的彩礼| www.969928.com-中国福利彩票真实| www.dw45.com-吉林快三代理| www.f48.org-特区l彩票论坛| www.71ui.com-944cc天天好彩| www.284278.com-七彩色-| www.369260.com-星辉彩票-| www.502661.com-多彩投亏本-| www.158962.com-快乐彩12开奖号码| www.623296.com-下彩彩票网页版| www.764734.com-彩票制作开发网站| www.866688.com-关于彩票的相关知识| www.952333.com-时时彩平台计划| www.cai9990.com贵州快三走势图表| www.g82.net-七星彩众彩网| www.83vd.com-汉代点彩瓷器| www.6478.xyz-51时时彩-| www.947585.com-港彩免费资料大全| www.660118.com-用人工智能算彩票|