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.33648.com-福客来彩票是真是假| www.ht50.com-88爱彩江苏快3| www.580861.com-南国七星彩手机网| www.762283.com-篮彩app排行榜| www.985392.com-唯彩看球完整版| www.zv93.com-体彩店与竞彩店区别| www.698955.com-秋菊彩铅画图片大全| www.925774.com-彩票35选5-| www.983722.com-好运彩票-| www.sa29.com-丹麦快乐彩走势图| www.2728.top-必发彩票下载地址| www.41687.com-幸福彩推荐号码| www.069912.com-彩神每日预测| www.229177.com-南粤好彩三开奖| www.284946.com-时时彩组三大全| www.102731.com-福利彩票119| www.117876.com-澳门足彩即时陪率| www.218266.com-吉林快三儿走势图| www.875242.com-彩经网p3走势图| www.960478.com-泰安体育彩票转让| 彩乐汇www.www.jj0.net| www.753885.com-华润彩票-| www.842877.com-微博怎么买足彩| www.918300.com-私彩能玩吗-| www.981875.com-可以网上买彩票嘛| www.fh4.com-三分快三福彩| www.14351.cc-彩票一元购软件| www.2313.biz-彩88历史开奖结果| www.09786.com-5o5oo万彩票网| www.59696.cc-彩票飞鱼走势研究| www.299670.com-体彩屋邀请码| www.83566.cc-彩票炒群-| 中国福利彩票www.3478j.cc| www.989376.com-彩店818软件| www.4649.pink-彩票中500万概率| www.92226.com-南粤风采彩1预测| www.087759.com-易彩网app客服| www.37760.com-宏盛彩票分析系统| www.615935.com-美狮77彩票-| www.828907.com-投注员打错彩票| www.991840.com-七乐彩最高奖金多少| www.nu71.com-快三和值9赔多少| www.80km.com-金誉彩票手机版| www.106880.com-瑞彩网注册邀请码| www.313109.com-彩神邀请码怎么生成| www.133445.com-彩票152期-| www.557547.com-神灯彩票注册平台| www.673821.com-油性彩铅画苹果| www.772615.com-高手带彩票-| www.898601.com-竞彩让球什么意思| www.969431.com-福彩快一定牛走势图| www.cp3722.com-百盈快三-| www.h88.top-宏盛彩票-| www.7888.live-黑彩平台下载| www.262004.com-福彩开奖双色球结果| www.511164.com-周杰伦彩虹天堂| www.602726.com-下载558彩票| www.677876.com-湖北福利彩票公众号| www.770747.com-七彩建盏图片| www.891593.com-彩票统计历史统计| www.994841.com-01彩票服务器| www.pv45.com-长城彩票靠谱么| www.272879.com-彩票什么时候出现的| www.739002.com-福利彩票真还是体彩| www.t93.club-彩票2元网杀号| www.21ve.com-状元彩票网平台| www.0878.cx-彩票中奖13亿| www.616795.com-体彩排列三怎么兑奖| www.166849.com-北京快3开奖爱彩乐| www.ca70.com-410彩票送彩金| www.297422.com-苏州快三开奖视频| www.418632.com-ig传统彩官网| www.557878.com-爱购彩安卓下载| www.882394.com-易彩网是不是真的| www.ob36.com-易彩网如何下载| www.785653.com-领航彩下载app| www.887438.com-世界杯足彩赔付率表| www.971816.com-彩票248官方| www.fi8.cc-时时彩1996-| www.08074.com-彩票丢了-| www.058422.com-胜利彩票-| www.331051.com-棋牌彩票平台| www.919559.com-怎么搭建彩票网站| www.92.gg-网上彩票平台输了钱| www.89vq.com-彩吧排三试机号| www.860177.com-时时中彩票下載| www.940238.com-吉林快三网络购买| www.996249.com-北单足彩对阵表| www.fx81.com-时时彩骗术揭秘| www.yq43.com-吉林体育彩票爱彩乐| www.74va.com-多彩娱乐app| www.832013.com-双色球机选买彩票| www.981513.com-全民乐彩票是真的吗| www.69re.cc-彩票故事2018| www.998647.com-体育彩票7位数开奖| www.568411.com-合买彩票源码| www.52432.com-足彩竞猜的app| www.019429.com-贵州体彩中心公告| www.098062.com-体育彩票有双色球吗| www.180206.com-易彩大小单双怎么看| www.539244.com-吃饭送彩票促销| www.774783.com-七星彩历史同期今天| www.ib80.com-安徽省体彩中心地址| www.671011.com-三d跨度彩经网| www.009789.com-重庆时彩彩稳赚软件| www.024079.com-快三能赚钱不要资金| www.259970.com-京东快三彩票是真的| www.365225.com-中国福建体彩大乐透| www.514811.com-加盟彩妆品牌排行榜| www.743635.com-购彩111预测| www.833812.com-全天时时彩专家计划| www.931135.com-大吉购彩平台| www.985922.com-足球彩票指南报纸| www.am2.com-湖北快三最大遗漏| www.0470.bid-福彩3c开奖结果| www.7688.me-体彩甘肃十一选五| www.310361.com-山东福利彩票兑奖| www.457839.com-周六安徽体彩大乐透| www.245.com-时时彩五星直选守号| www.2752.wang-福利彩票倍数001| www.12896.cc-运盛彩票今年坑| www.69938.cc-彩39彩票安卓版| www.366861.com-讯彩网-| www.981957.com-微彩娱乐是骗局吗| www.061866.com-彩客网app怎么样| www.1qv.cc-买彩票倾家当产的人| www.bj21.com-神州行彩票-| www.322013.com-中国体彩怎么看中奖| www.698414.com-彩票5码倍投方法| www.828002.com-排列三走势图大彩网| www.956361.com-竞彩胜平负计算器| www.sb87.com-青海快三投注网址| www.43ad.com-重庆时彩怎么看号| www.2254.xyz-腐女彩图百度云| www.05757.cc-体彩有官方app么| www.27793.cc-体彩三个红号算吗| www.939339.com-福彩门户资料| www.266408.com-河北福利彩票网官网| www.18510.com-派彩下载-| www.208362.com-广西快三官方网址| www.324756.com-菲律宾500彩票| www.500680.com-免冠彩色是什么颜色| www.583125.com-福彩二元网-| www.825991.com-宁波快乐彩12| www.913565.com-快三提现退回| www.968454.com-福彩中心作弊事件| www.705537.com-福彩自助精灵可靠吗| www.731969.com-易盈彩票12.cc| www.1548.org-内蒙时时彩今日开奖| www.29466.com-166彩票登录网站| www.73850.com-怎么买世界杯彩票| www.4230.biz-福彩3d直播开奖| www.155452.com-炫彩曲棍球-| www.45627.com-江苏快三在线计划| www.ww17.com-南方双彩下载| www.15jo.com-彩206彩票-| www.97kp.cc-彩票送彩金活动| www.459035.com-大乐透机选彩票号码| www.486.xyz-彩网北单加奖12| www.27931.cc-秒秒彩立即-| www.xv06.com-彩6是不是黑平台| www.25998.cc-彩虹的爱情寓意| www.482368.com-金彩贷app-| www.cr70.com-加盟彩票站赚钱吗|