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天

知道了
百盈PK10 www.326411.com-彩宝网新版走势图| www.480789.com-换手机怎么用和彩云| www.567260.com-江苏福利彩票七乐彩| www.651237.com-欧洲百万彩玩法| www.727699.com-福利彩3d软件| www.805056.com-手机竞彩软件| www.881991.com-怎样手机购彩| www.955460.com-01彩票官方网页| 易彩堂www.55885g.com| www.jn96.com-5亿彩骗局-| www.c17.net-好运快三走势图| www.34ui.com-今天彩神通金码| www.7570.com-七星彩奖虫下载| www.300056.com-256买彩票安卓版| www.378334.com-七彩娱乐账户登陆| www.266694.com-吉林快三后两期号码| www.024618.com-体彩乐3-| www.404.me-开彩网api如何| www.088608.com-湖北新快三今天号码| www.fj17.com-江苏快三缩水软件| www.70251.com-福彩中心代销| www.024303.com-3d牛彩网图谜总汇| www.054464.com-竞彩足球推荐专家| www.626730.com-福彩好运三中奖规则| www.7495.pw-大吉彩票下载安装| www.3149.vip-8868.彩-| www.06975.com-手机上买福利彩票| www.037919.com-彩票中奖计算| www.mj26.com-澳洲时时彩官方| www.cai867.cc-上海快三开奖查| www.229458.com-彩788com-| www.300098.cc-体育彩票双色球| www.365428.com-彩铅画儿童风景| www.449043.com-宁夏双色球开奖彩民| www.766642.com-福彩选4开奖| www.873497.com-什么是购彩-| www.966111.com-一定牛快三遗漏号码| 大赢家彩票www.346511.com| www.hy15.com-中彩网登录-| www.m10.website七乐彩幸运快3| www.56bm.com-南宁三彩专卖店地址| www.882535.com-正规的高频彩票| www.48015.cc-海南七星彩网站源码| www.083192.com-彩票60分-| www.180802.com-中中彩票下载| www.279737.com-腾讯网彩票预测最准| www.357577.com-合股买彩票协议| www.459548.com-彩票1516-| www.122438.com-谁有时时彩微信群| www.274944.com-如何找到时时彩漏洞| www.407446.com-七星彩分几个奖级| www.579808.com-乐都彩票网址是多少| www.775695.com-和竞彩有关的网名| www.878213.com-九千万彩票税交多少| www.968614.com-彩6计划群-| www.050222.com-黑彩坐庄也能输吗| www.140066.com-怎么投诉体育彩票站| www.272126.com-立彩快3下载| www.359923.com-大马大彩开奖成绩| www.470455.com-博彩和体彩区别| www.767029.com-中国福彩12选5| www.47663.com-好彩妹口头禅图片| www.079065.com-158彩票人工计划| www.267208.com-足彩新浪频道| www.413259.com-分分彩八码做号| www.594067.com-优乐炫彩彩票平台| www.728281.com-彩8娱乐下载| www.893082.com-休育彩票排列五开奖| C9999www.318548.com| 500彩票www.343177.com| www.sk38.com-新时时彩基本走势图| www.23vp.com-ag彩票下载安装| www.222.pink-时时彩3分钟一期| www.5229.biz-双色球派彩网| www.38353.cc-红包彩票平台| www.87795.com-彩网网-| www.085538.com-时时彩后三定胆方法| www.211065.com-福彩三d图纸| www.579808.com-乐都彩票网址是多少| www.661732.com-福彩12生肖-| www.793892.com-体彩近期-| www.876665.com-福彩p3-| www.994050.com-怎么买篮球体彩| www.303692.com-甘肃体育彩票中心| www.435363.com-微信福彩-| www.572871.com-86人工彩票计划| www.676671.com-七星彩排列五局王| www.766642.com-福彩选4开奖| www.921065.com-南方双彩最新版本| www.992813.com-中彩国际下载| www.si0.com-3d彩票开奖号码| www.350398.com-澳洲3分彩开奖记录| www.502239.com-可以对冲的彩票| www.176390.com-三分快三玩法规律| www.518211.com-559彩票网正规吗| www.236519.com-山东福彩票手机投注| www.375345.com-福彩哪里看直播视频| www.545293.com-福彩彩票站申请| www.46833.com-手机玩时时彩的软件| www.264896.com-福彩3d秘密-| www.439925.com-重庆时时彩长龙提醒| www.592201.com-彩票站一张挣多少钱| www.781079.com-利奥彩票平台代理| www.930824.com-双色球中彩网| www.781239.com-彩吧开机号3d| www.ui42.com-彩虹真实照片| www.810181.com-彩票屏幕-| www.927448.com-福彩3g字谜-| www.cp419.cc-私彩买到多少违法| www.f56.net-体彩中奖号码查询| www.94kb.com-k彩一彩原始邀请码| www.4799.net-彩虹六号直播恢复| www.06044.com-宁夏快三app| www.57735.cc-福彩3地综合走势图| www.168113.com-北京快三跨度形态图| www.273230.com-彩票假-| www.367928.com-刚力彩芽长发| www.546898.com-福彩机器能卖多少钱| www.653832.com-足彩今日强胆| www.721655.com-博友彩赚钱靠谱吗| www.802355.com-湖南福彩开奖号码| www.894357.com-福彩快三过滤工具| www.974843.com-南京彩票店吧| www.ip88.com-彩票预算软件| www.yk65.com-马来彩-| www.34co.com-彩票网制作-| www.34643.com-单双五分快三| www.9762.pw-七星彩专家预测默彩| www.fe51.com-快三对子概率| www.og08.com-皇都彩票网址| www.36942.com-南京福彩快三| www.003337.com-怎样上网买彩票| www.7226.cn-steam彩虹六号| www.914923.com-电脑彩票挂机赚钱| www.992067.com-时时彩单期独胆技巧| www.li6.com-河北省快三出奖| www.va52.com-彩票怎么判断龙| www.036993.com-大中华彩票软件下载| www.8841.net-网上时时彩-| www.vf37.com-彩票是不是骗局揭秘| www.008011.com-今天七乐彩开奖| www.d09.com-彩票开奖了d| www.818609.com-彩票开奖直播网| www.cp3399.com-河南彩礼价目表| www.653517.com-辉煌彩票指导| www.770913.com-上海彩虹冰淇淋机| www.930181.com-彩票高手吧-| www.pf07.com-1分快三彩票网址| 盛彩网www.41518p.com| www.480474.com-和彩印是什么| www.151601.com-哪些彩票软件比较好| www.066139.com-甘肃快三表格图| www.360580.com-甘肃快三遗漏图表| www.757473.com-胆拖投注号百彩票| www.57sf.cc-体育彩票贵州工资| www.4274.top-彩票领奖时间| www.007278.com-彩票店高清图片| www.cai6622.com吉林省快三开奖查询| www.94sq.com-快三豹子通选| www.092866.com-福彩61生肖走势图| www.234407.com-手机网上买彩票软件| www.970778.com-在手机上买彩票| www.20pd.com-福彩3d遗漏数据| www.88211.cc-app下载希望彩票|