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.775074.com-吹吹七星彩高手论坛| www.566859.com-中彩华南致富导师| www.335866.com-六冠彩票能提现吗| www.15213.cc-河北快三购买技巧| www.b64.cn-假彩票-| www.51of.com-苏州福彩中心电话| www.0444.com-购彩平台360彩票| www.7443.xyz-彩票管理规定第五章| www.cs02.com-时时彩绑卡送彩金| www.498996.com-网上购彩几时恢复| www.qh64.com-厦门好彩烟-| www.277360.com-微信投注彩票平台| www.4059.biz-荣耀彩票网站| www.859884.com-幸运彩票手机app| www.05120.cc-中彩在线能玩吗| www.206598.com-彩票投注大厅app| www.365309.cc-北京体彩领奖地址| www.973791.com-唐山快三开奖结果| www.q03.space-北京体彩排五预测| www.368444.com-13亿彩票官网| www.yp35.com-辉煌彩票跟着导师投| www.h69.com-火箭彩票平台app| www.358346.com-深圳口袋彩店二维码| www.009514.com-123福彩票开奖| www.6161.biz-世界彩票协会总部| www.kh7.cc-福彩3d蓝琪儿断组| www.077210.com-打彩票的技巧| www.156209.com-彩票号码有多少个| www.2327.biz-3d彩票机选-| www.688192.com-广东电脑福利彩票| www.003295.com-网上买彩票| www.271187.com-彩10app-| 88爱彩www.88ac.com| www.nd21.com-一分快三基本走势图| www.76nl.com-七乐彩多长时间过期| www.1611.in-澳门快三规律| www.318619.com-福彩3d鬼六图库| www.357517.com-不记名彩票-| www.453442.com-彩浜の由来-| www.558993.com-赤峰福彩中心主任| www.630108.com-彩票66作弊器| www.698931.com-少儿彩铅画图片灵狼| www.770291.com-江西时时彩开去年的| www.834454.com-好彩柠檬爆珠价格| www.892600.com-喜盈门彩票vip| www.957256.com-彩票软件怎么开挂| 爱彩www.00ac.com| www.ca23.cc-天天彩票软件| www.576902.com-腾讯时时彩开奖网址| www.645654.com-买彩票感想-| www.722700.cc-足彩竟猜比分直播| www.825972.com-赢彩争霸app| www.885014.com-通宝博彩-| www.947215.com-体彩高频会取消吗| www.985900.com-送彩金18元可提款| www.we.com-手机购彩app下载| www.434747.com-昆山体彩中心位置| www.592351.com-n500彩票-| www.696657.com-篮彩分析软件| www.601332.com-20元中国红彩票| www.623509.com-欢乐彩票首页| www.613573.com-qq能买彩票吗| www.080684.com-8彩票直通车| www.179249.com-网上带人买彩票骗局| www.279773.com-优乐时时彩-| www.377073.com-彩票将试机号| www.511773.com-彩客网公司-| www.185022.com-八亿彩app-| www.2977.cn-日本彩开奖-| www.28464.com-腾讯分分彩群的套路| www.123884.com-彩票816客户端| www.092117.com-248彩票下载苹果| www.0592.love-彩票最高连挂| www.88834.com-彩票买卖统计| www.087307.com-3d福彩走势图连线| www.149897.com-期期中彩票ios| www.260978.com-大乐透彩票选号神器| www.362606.com-为什么没人买彩票了| www.502938.com-双色球彩乐乐杀号| www.601834.com-湖北彩票作假事件| www.668578.com-远途国际彩票是什么| www.86438.com-花50万买彩票| www.70155.com-天空彩票與你同行| www.157.pw-雨后彩虹当网名好吗| www.8554.in-中彩网天吉论坛3| www.53715.cc-重庆时时彩游戏圈| www.677556.com-章鱼足彩靠谱吗| www.083699.com-彩票群炒群常用话语| www.256812.com-信彩彩票手机客户端| www.vq07.com-青海快三查询| www.11tt.com-现在能买彩票的软件| www.86cl.com-福彩3d胆码图排序| www.848381.com-足彩竞彩结果| www.926827.com-彩票达人图片| www.978755.com-好彩1开奖走势| www.cp5638.com-安徽快三骗局揭秘| www.jv44.com-天天彩票助手官方| www.a56.live-足彩心得-| www.13zi.com-体彩e球彩比分查询| www.821289.com-牛彩网图库总汇大全| www.sx56.com-有极速快三吗| www.tb27.com-彩票都有哪些种类| www.206424.com-三分快三彩票计划| www.219914.com-南宁快三走势图| www.282367.com-特区体彩论坛| www.236715.com-竞彩足球推介| www.298007.com-快三图案-| www.356013.com-女孩说玩彩-| www.051113.com-彩知-| www.132045.com-如果男方要退彩礼| www.948416.com-500彩票大神推单| www.085957.com-重庆五星彩走势图| www.70gf.com-红菜苔彩-| www.v18.top-中彩票大奖得主生活| www.66ne.com-约彩网-| www.tr.cc-送38彩金彩票| www.dg26.com-福利彩票看那几位数| www.v68.shop-彩票站电视怎么调台| www.73lk.com-排三彩吧论坛首页| www.55293.com-时时彩大概率| www.62ge.com-体彩个位振幅走势| www.04uf.com-竞彩二串一对冲| www.079966.cc-彩票扣税多少| www.399.online-彩球游戏教案| www.957814.com-七星彩如何包码赚钱| www.4448.me-壹号平台彩票官网| www.36881.cc-福彩2019028| www.179891.com-福彩快3彩票正规吗| www.974157.com-河北省福彩官方网站| www.cp30.cc-精彩十分走势图| www.nq93.com-京东彩票合法吗| www.09ld.com-玩彩的是什么工作| www.70fr.com-红菜苔彩票下载| www.34hv.com-手动摇彩票-| www.92954.com-岩棉彩钢板设备| www.051774.com-福彩双色球拖胆| www.773020.com-手机彩票e乐彩| www.im37.com-彩票足球-| www.678304.com-乐彩专家论坛下载| www.4970.net-宝马彩票注册| www.085789.cc-够力七星彩奖表画板| www.329011.com-宝贝计划彩票试用| www.85bk.com-彩93可靠吗-| www.69155.com-头彩网站关闭| www.5339.onlinek彩平台注册| www.503226.com-鸿彩真的假的| www.984301.com-福彩双色球机选一注| www.wu90.com-七乐彩预测推荐号码| www.700732.com-竞彩足球无法兑奖| www.023151.com-极速彩票一分钟一期| www.428001.com-足彩105期-| www.346699.com-金豆彩票下载安装| www.526993.com-澳洲快三开奖走势图| www.114325.com-好用的福彩app| www.658560.com-算命买彩票号码| www.108363.com-彩影相册-| www.570888.com-十五选五福彩开奖| www.236351.com-彩票中奖规则大乐透| www.70000.com-时时彩任选3绝技| www.222243.com-什么彩票平台最安全| www.342134.com-长春吉康彩溢还开吗| www.28282.com-常州体彩1800万| www.78835.cc-手机万彩吧彩票预测| www.lw78.cc-大发时时彩怎么玩法|