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.255755.com-k彩一彩民福地| www.369668.com-999彩票网靠谱吗| www.219914.com-南宁快三走势图| www.345121.com-财神八彩票网| www.464594.com-惠盈体彩-| www.559998.com-合肥福彩中心在哪里| www.639766.com-东方秒秒彩平台| www.722737.com-凤彩双色球字谜| www.563815.com-七乐彩谜语-| www.671965.com-亚博彩票快三| www.752937.com-下载幸福彩手机报| www.830333.com-彩票app送体验金| www.966827.com-宝马彩票老宝马登录| www.06996.com-今日七星彩开奖号码| www.023826.com-陕西福彩快乐十分钟| www.74qw.com-好运彩不让我提款| www.318482.com-燕赵福彩排列七玩法| www.480354.com-竞彩之家注册吧| www.592444.com-荣耀彩票正规吗| www.702193.com-有没有人靠彩票发财| www.846182.com-七乐乐彩开讲结果| www.968808.com-乐彩949499-| www.al22.com-彩票骗局大揭秘视频| www.37kb.com-7星彩预测专家号码| www.0066.biz-辽宁体彩年销量| www.8379.loan-网投大发时时彩| www.42098.com-彩票不好吗-| www.4690.me-水彩贴吧-| www.lm45.com-送彩金的网站| www.954454.com-彩票店双色球二维码| www.ib48.com-彩神v8安卓版| www.7zk.com-羊城晚报今日好彩版| www.7fh.com-河南快三多久一期| www.9918.biz-河南西平彩礼多少钱| www.23112.com-玩吧快三怎么玩| www.9792.xyz-快三彩票中奖神器| www.67kv.com-附近体彩彩票站| www.2583.vip-大星彩票app| www.14387.com-极速快三是官方彩吗| www.15rj.com-中华彩票网好看视频| www.560921.com-福彩3d五行选号| www.088926.com-彩吧图谜第一版| www.209902.com-福彩三d平台出租| www.306711.com-吉祥彩票官方| www.391448.com-艾彩初九微博| www.rr66.cc-吉林福彩时时彩开奖| www.30wg.com-彩票网站哪个最好| www.hx28.com-快三012路表格| www.658346.com-老彩票官方网站| www.577345.com-福彩三d速查表| www.181197.com-今日中彩苹果版本| www.276371.com-台北快三开奖走势图| www.375347.com-彩金宏辉平台| www.789786.com-竞彩足球投资| www.876008.com-足彩14场竞彩| www.941997.com-分分彩出号规律技巧| www.989456.com-中彩网手机-| www.bn45.com-下载易彩彩票| www.rn28.com-菲律宾彩票客服| www.315291.com-彩7国际收购了m5| www.78158.cc-福彩三d图谜| www.583602.com-人人中彩网是真是假| www.486200.cc-我想玩时时彩网站| www.5297.com-哪里能买时时彩龙虎| www.cai61.cc-今天上海快三开奖| www.091152.com-703彩票安卓| www.220816.com-重庆时时彩破解器| www.306238.com-彩六苹果版下载| www.399889.com-彩票分析家官网| www.526058.com-美人鱼彩票网| www.668469.com-体彩排列三彩报| www.799999.com-四川福彩领奖地址| www.893511.com-福建快三和值奖金表| www.965396.com-玩快三输钱-| www.cai7222.com网络快三是骗局揭秘| www.ri88.com-快三必中两码| www.542410.com-怎么开福彩投注点| www.466631.com-七乐彩哪里兑奖| www.144785.com-招聘彩票代玩人员| www.761827.com-在线福彩是合法的| www.841149.com-体彩的类别-| www.908291.com-福彩怎样才算中奖| www.974567.com-众彩娱乐平台登录| www.cp9377.com-彩中彩-| www.dl67.com-南洋彩开奖记录| www.k17.top-彩吧图库第二版3d| www.449.net-彩票分析培训靠谱么| www.6930.top-七彩云南怎么坐车| www.63wc.com-d8彩票官网app| www.778509.com-彩乐汇下载安装| www.40772.com-五号彩票app| www.020035.com-中彩网幸运快三| www.i58.biz-南方双彩网预测| www.251.org-网上买彩票真的吗| www.968472.com-中国福彩中心鲍学全| www.34ps.com-彩运来官网注册账号| www.6462.org-博彩推广引流| www.040843.com-足球博彩宝典| www.271888.cc-福彩3今天开奖| www.477094.com-体彩排列三怎么买| www.ty.cc-一品堂彩票网站| www.89fd.com-浙江快乐彩票总汇| www.27559.cc-湖北快三网络版| www.007780.cc-澳客彩网-| www.dn99.cc-天马彩票天一团队| www.jc34.com-彩票306安卓| www.661176.com-欢乐彩app可靠吗| www.797429.com-浩博博彩下载| www.930899.com-用哪个网买彩票安全| www.981876.com-那个可以网上买彩票| www.mh74.com-老时时彩图-| www.92998.com-彩钢瓦屋顶防水| www.387.mobi-乐彩短信-| www.66789.cc-在福彩中心工作人员| www.769342.com-好彩网为什提不出钱| www.lp30.com-全民乐彩票-| www.10fr.com-体彩造假视频| www.31oa.com-怎么样能中彩票| www.65fk.com-说彩词-| www.650209.com-博彩骗局怎么骗| www.344732.com-506彩票下载| www.201118.com-5分彩开奖结果| www.615807.com-体彩中奖算法| www.987633.com-牛彩字迷总汇| www.10787.com-盈彩彩票app下载| www.300885.com-彩票中二等奖可能吗| www.rs1.cc-安徽快三预测网站| www.053811.com-福建福彩中心主任| www.393379.com-昨晚出的彩票是多少| www.1187.cn-大富彩票网信得过吗| www.42yc.com-体育彩票365新版| www.x68.top-财神8彩票是真的吗| www.102711.com-丰彩深圳有人中奖吗| www.163973.com-彩票大底反向| www.523830.com-在哪找代玩兼职彩票| www.420520.com-体彩店铺装修| www.927743.com-青海快三中心| www.cai3131.com玩快三有技巧吗| www.qy93.com-查看内蒙古快三| www.75bu.com-彩运彩票-| www.95qx.com-足彩任九胆拖技巧| www.4975.biz-梦见彩票兑奖| www.60991.com-石家庄彩票大奖| www.65344.com-西宁体彩11选5| www.543579.com-迅盈彩票破解方法| www.633011.com-加拿大3.5分彩群| www.700556.com-神彩福牛25码预测| www.786368.com-时时彩有赢家吗| www.861614.com-彩宝贝开奖查询| www.939092.com-网上拉人进群玩彩票| 网易彩票www.506731.com| www.227342.com-彩八彩票168| www.299625.com-高频彩开奖查询| www.926907.com-彩票开户设置返点| www.535618.com-中国福利彩票7加1| www.619951.com-中国福彩老总| www.698908.com-彩铅的颜色搭配| www.815636.com-福彩排三今天开奖| www.893234.com-彩名堂计划好用不| www.964403.com-500竞彩足球比分| www.eo17.com-易盈彩票app下载| www.b32.top-500彩票印时比分| www.33ct.com-体彩今天正版天庚图| www.287.biz-一赔一彩票-|