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.dl01.cc-彩票计划app| www.395696.com-今天开什么彩票奖| www.521587.com-合肥快三跨度走势图| www.623691.com-9288pk彩票-| www.769369.com-凤凰彩票购彩平台| www.879895.com-安徽福彩新快三| www.47fq.com-小白彩票旧版首页| www.5038.biz-世界杯竞彩官方停售| www.07237.com-福彩票三地开奖| www.919208.com-正规时时彩-| 500彩票www.50026m.com| www.ta30.com-超级快三缩水软件| www.770062.com-七彩视界靠谱么| www.877316.com-马耳他开奖彩票| www.988069.com-快三计算软件| www.hp89.com-上海快三玩法说明| www.274689.com-甘肃快三全天计划| www.996358.com-北单竞彩怎么购买| www.2491.top-彩专家大牛在线| www.4hx.com-贵州11选5彩经网| www.68oo.com-买竞彩技巧大全| www.92518.com-十一选五彩经网| www.907465.com-破解快三软件提款| www.248791.com-幸运福彩合法吗| www.239739.com-大发快三开奖结果| www.040073.com-九州彩票是黑平台吗| www.518215.com-中彩8069网-| www.188064.com-快三的跨度是啥意思| www.944068.com-微微彩票app| www.666948.com-v9彩票下载安装| www.059482.com-168彩票开奖网站| www.35285.cc-彩票交流群群号| www.82835.cc-福彩到杭州哪里领奖| www.020220.com-网易购彩下载| www.56as.com-贵阳福彩中心电话| www.0063.xyz-竞彩足球网易预测| www.4768.wang-凤凰彩票是不是送钱| www.01946.com-中彩网论坛交流区| www.54167.cc-广西彩票手机客户端| www.58271.cc-天地彩app下载| www.83fm.com-幸运彩票平台正规吗| www.843605.com-体彩怎么加盟| www.999575.com-福利彩票走势图尺寸| www.ud27.com-419cc彩票-| www.1234.com-乐彩网主页-| www.820729.com-彩钢板分类-| www.556.pw-云南省体彩十一选五| www.977630.com-世界杯网上购彩| www.286317.com-3d福彩开奖号| www.sl12.com-在线模拟彩票投注| www.770912.com-京东时时彩官网| www.989383.com-彩店818下载| www.ky30.com-518彩票网合法吗| www.155473.com-彩票大师数据分析| www.388653.com-迷彩兔怎么打不开机| www.299200.com-彩票巴士是骗人的吗| www.565686.com-天娱彩票平台骗局| www.680076.com-彩拾彩票靠谱吗| www.801957.com-c58彩票下载| www.893296.com-彩票大师安装| www.971824.com-泰安体彩大乐透| www.cai7999.com幸运快三分析走势图| www.832450.com-赢彩资讯下载app| www.23uk.com-579彩票网-| www.426141.com-体彩的藏机图| www.9062.vip-大庄家计划彩票平台| www.0197.xyz-镇江体彩11885| www.3li.cc-京彩集团能玩吗| www.020329.com-快三定胆方法| www.612967.com-新加坡乐星彩网站| www.661932.com-福彩3d开彩结果| www.774755.com-七乐彩中6位数| www.875112.com-酷彩app-| www.981700.com-红旗彩票能挣钱| www.la43.com-今日中彩是什么公司| www.949243.com-湖北快三势图分布图| www.ac04.com-七乐彩开奖结果查询| www.8702.biz-匕星彩开奖-| www.95986.cc-体彩专管员待遇| www.072559.com-六亿彩票手机版下载| www.150197.com-辛运中彩票-| www.233914.com-代买彩票法律规定| www.860593.com-彩06app-| www.906638.com-福利彩票能选哪些号| www.148887.com-最新快三彩票| www.276309.com-七乐彩中奖查询表| www.378105.com-幸福彩手机报官网| www.gm53.com-福彩开奖双色球历史| www.63221.com-河南结婚彩礼一览表| www.477947.com-银行积分兑彩票| www.73ya.com-私彩拉人-| www.383234.com-体彩样票制作| www.519038.com-腾讯分分彩技巧回血| www.625357.com-彩票客服电话号多少| www.9719.win-彩票行业会倒闭吗| www.007780.cc-澳客彩网-| www.252995.com-彩票站雇人怎么对账| www.17952.com-彩客竞猜-| www.73417.com-彩圣网全年资料| www.zh94.com-快发彩票靠谱吗| 99彩票www.528112.com| www.89320.com-印象彩票手机登录| www.16666.cc-沈阳体彩中心| www.3322.com-彩色简笔画大全图片| www.566548.com-支付宝咋个买彩票| www.313615.com-福彩快三预测| www.680067.com-彩票双色球专业版| www.8180.biz-彩票c66-| www.34143.com-建行买彩票-| www.88711.cc-九彩网站app| www.391713.com-彩票正规app| www.026059.com-武汉福利彩票店招聘| www.l51.cc-彩票走势图预测篮球| www.50vi.com-1分快彩-| www.495557.com-彩民乐钱树图355| www.611545.com-福彩3b17500| www.712509.com-万人彩票是黑平台吗| www.855123.com-聚富彩手机旧版| www.959940.com-职业足彩一年一千万| www.jt3.cc-河南快三最大遗漏| www.570949.com-钟嘉欣好彩妹图片| www.640147.com-体彩中心在哪| www.451070.com-竞彩倾家荡产| www.578309.com-澳门彩票平台有哪些| www.666517.com-hg3535彩票-| www.759107.com-彩票坊网站多少| www.813838.com-开快三群判刑吗| www.068182.com-自制彩票app| www.719563.com-中彩吧合法嘛| www.821753.com-聚彩是黑平台吗| www.861925.com-多彩网-| www.942684.com-广西福利彩票网官网| www.cp2996.com-福彩快三害死我了| www.ov66.com-开奖视频中国福彩网| www.372393.com-无彩色系图片| www.495607.com-博彩类app-| www.544494.com-彩票为什么不好中| www.640069.com-彩虫安卓手机版下载| www.720219.com-幸运七星彩手机投注| www.849011.com-新加坡福彩挂牌号码| www.914928.com-鸿运彩破解器| www.984707.com-大发云神彩争霸| www.zj66.cc-福利彩票幸运号码| www.170319.com-马来西亚彩票网| www.160515.com-福彩中心上班时间| www.245033.com-胜负彩新浪-| www.317166.com-9彩官方网站| www.392159.com-老版搜狐彩票走势图| www.500088.com-丹东福利彩票站出兑| www.881723.com-辉煌彩票网址| www.955956.com-彩票修改器-| www.ef98.com-福建省福彩管理中心| www.318374.com-福彩助手手机版| www.397841.com-手机中国彩软件| www.511078.com-快乐的彩虹歌曲| www.11140.cc-山东福彩二十选五| www.61022.com-彩票最早开奖结果| www.q33.com-购买彩票app| www.3322.biz-网易人人中彩票官网| www.04134.com-如何网上购足彩| www.477123.com-富盈彩票官方网| www.2064.xyz-下载彩票双色| www.42977.com-北斗福彩3d167| www.2200.cn-盈众彩票网靠不靠谱|