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天

知道了
彩01彩票 www.ke23.com-网络彩票赌博的量刑| www.786329.com-海南彩票梦册查码| www.923278.com-秒速时时彩在线预测| www.213635.com-足彩分析师培训| www.607577.com-福彩开奖34期| www.932317.com-宝盈娱乐彩票平台| www.924053.com-讧苏快三走势图| 凤凰彩票网www.855085.com| www.535811.com-彩票双色球摇号器| www.866613.com-昨晚彩票出什么数| www.950115.com-一定牛彩票能提现吗| 亿发彩票www.820933.com| www.jt21.com-四季彩怎么提现不了| www.489022.com-彩运网下载-| www.820522.com-南国论坛七星彩图规| www.ev06.com-牛票票彩票预测专家| www.86vu.com-彩票套利犯法吗| www.955110.com-凤凰彩票破解视频| www.hp53.com-上海快三彩票怎么玩| www.810249.com-k彩官网下载| www.295549.com-时时彩三十六期长龙| www.400108.com-春秋彩票登录平台| www.512981.com-免费的时时彩计划| www.598123.com-体育彩票店营业额| www.218914.com-代玩彩票兼职| www.sy33.cc-七乐彩的中奖规则| www.622533.com-彩涂卷板-| www.177054.com-新快三个位走势图| www.569420.com-七色彩彩票玩法| www.072147.com-大快发3彩票必中| www.316559.com-买彩票app下载| www.782715.com-双色球彩票开奖查| www.04gg.com-体彩7码遗漏| www.92iy.com-彩票北京小汽车玩法| www.69805.com-海南省福利彩票官网| www.062391.com-天天乐彩app| www.178999.cc-北京快三开奖直播网| www.42hb.com-唯彩看球完整版官方| www.462207.com-福彩3b天气网| www.771696.com-今晚好彩三开奖奖金| www.572975.com-饰彩-| www.763932.com-6十1七乐彩-| www.915683.com-金湖体彩-| www.989084.com-彩八彩票官方| www.ew33.com-体彩开奖是多少钱| www.194664.com-彩票怎么玩快三| www.272317.com-快三怎么玩法才赚钱| www.576922.com-星宇购彩可信吗| www.4095.biz-彩虹101无人机| www.800830.com-福彩3d天天开奖吗| www.79749.com-银川彩票中心| www.kw38.com-免费共享彩票资料| www.329719.com-湖北快三走势图全天| www.637386.com-体彩竞彩玩法| www.713116.com-亿彩票是正规网站吗| www.786668.com-1分极速彩-| www.858928.com-今日福彩体彩开奖号| www.933185.com-蓝月亮天天开彩| www.984229.com-58彩票旧版首页| www.qz3.com-快三出豹子的前兆| www.qt29.com-福彩竞彩-| www.365378.com-彩库宝典四不相图| www.492215.com-体彩大乐透中奖情况| www.593131.com-彩虹电视剧-| www.708223.com-状元彩票网能提现吗| www.789325.com-足球彩票哪年开始的| www.870024.com-河北快三冷号统计图| www.996078.com-福彩pk拾项目| www.qr92.com-福彩创始人-| www.490802.com-现在淘宝没有彩票| www.582675.com-宝盈彩票是骗人的吗| www.666257.com-乐彩33是干什么的| www.751612.com-今天彩票买什么| www.472888.com-福彩太湖钓叟三字诀| www.798152.com-二分彩有国家官网吗| www.408632.com-浙江福彩快玩法介绍| www.520269.com-福彩3d大公鸡图2| www.586258.com-甘肃快三奖金| www.672637.com-手机买足彩的软件| www.907158.com-福彩是要填几位数| www.c0.me-幸运快三三不同号| www.14044.cc-彩票霸主骗局| www.636849.com-彩虹谣的童谣| www.708191.com-时时彩计划群| www.846622.com-中国体彩可信吗| www.033705.com-易彩堂注册邀请码| www.63ot.com-开彩网站源码| www.hl74.com-吉林今天快三推荐号| www.16vl.com-三d乐彩网开奖结果| www.280991.com-河内五分彩-| www.180419.com-兰州快三开奖结果| www.09920.com-天天彩票助手官网| www.109013.com-红卡七彩-| www.602301.com-游戏厅里玩游戏彩票| www.705928.com-下载发彩-| www.802043.com-快乐彩推荐群| www.936176.com-幸运五星彩票在哪买| www.cai2977.com内蒙古快三遗漏| www.683581.com-彩票过滤设置| www.298234.com-七星彩预测专家推荐| www.560551.com-时时彩经验心得| www.773019.com-复式彩票奖金计算器| www.963340.com-欧洲彩票代购| www.vf70.com-易彩网在线登录| www.2388.in-体彩票最新开奖公告| www.77618.cc-18149期胜负彩| www.i63.net-3d中彩网和值尾| www.431507.com-农村医药报新粤彩报| www.851027.cc-什么网可以买足彩| www.8794.cn-下彩主页-| www.119854.com-福彩排7开奖结果| www.225737.com-英国时时彩-| www.347988.com-天天彩票助手注册邀| www.471875.com-十亿彩票交易平台| www.437030.com-福彩刮刮乐网上试刮| www.93863.cc-新浪爱彩网首页| www.008011.com-今天七乐彩开奖| www.108222.com-双色球谜语彩票报| www.050966.com-高频彩吧登录| www.2zd.com-高频彩官方网站平台| www.xp42.com-彩民要求赠送彩票| www.95oh.com-七乐彩走势图大赢家| www.qo68.com-易彩快三有没有规律| www.iw42.com-皇都彩票app入口| www.6033.biz-彩经网首页网| www.306799.com-吉祥彩票聊天室| www.yw28.com-全能中彩彩票腾讯| www.50ao.com-竞彩足球高手心得| www.71775.cc-辽宁真版3d彩涂| www.011065.com-快三有什么秘诀| www.409559.com-大花猫3d彩报图| www.490.biz-石家庄体育彩票站点| www.494266.com-下载足球竞彩彩票| www.350988.com-欢乐快三计划| www.539760.com-福州体育彩票中心| www.659449.com-欢迎光临金利彩票网| www.873177.com-贵阳体育彩票兑奖| www.044673.com-广东体育彩票中心| www.760866.com-时时彩助赢软件安卓| www.78155.cc-华夏彩票大发快三| www.139477.com-体彩刮刮乐微信兑奖| www.578724.com-好彩堂跑狗图玄机| www.3501.me-168彩票苹果系统| www.065883.com-时时彩后四做号方法| www.776995.com-彩77官网苹果| www.537275.com-彩色的含义-| www.h12.club-彩票过滤大师官网| www.528876.com-福彩3d绝杀一码| www.583082.com-2元彩票有哪些| www.634518.com-93彩票网安全不| www.978443.com-9万彩票平台可靠吗| www.cp386.cc-幸运快三-| www.980963.com-浩博彩票正规| www.cai5333.com教你玩快三-| www.gp28.com-河南焦作彩礼价目表| www.xa32.com-湖北福彩中心| www.762352.com-87升级版云彩店| www.39612.cc-中彩曹毅-| www.518164.com-163a彩票网-| www.619439.com-十四场胜负彩直播| www.680282.com-亚彩会登录地址| www.741813.com-南京福彩中心在哪里| www.796642.com-众博彩票骗局| www.846517.com-足球竞彩网任九推荐|