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.39606.com-42678彩票-| www.773300.com-棋牌送彩金多的网站| www.57744.cc-159足球彩票网| www.070934.com-约彩彩票官方网站| www.266604.com-时时彩遗漏怎么追| www.605708.com-宝石彩票app| www.i95.cc-新版的精英彩票| www.1328.hk-七乐彡轹彩剁| www.61997.com-七星彩什么开奖时间| www.029829.com-c8cn万彩吧-| www.153733.com-内豪福彩app| www.286753.com-如何申请福利彩票| www.223098.com-银河彩票下载手机版| www.181952.com-河北快三走势图一| www.291253.com-乐彩网l-| www.851968.com-彩票中奖法术| www.988812.com-快三和值买法| www.hi21.cc-qq彩票下载-| www.231279.com-快三豹子追号计算器| www.458140.com-梦见买彩票没有中奖| www.33308.cc-俄罗斯快三查询| www.008388.com-查看更多精彩视频| www.139779.com-66红彩app-| www.237929.com-3d福彩中奖规则| www.343387.com-代买彩票赚佣金| www.997678.com-排列三走势乐彩网| www.kr88.cc-五分彩规律公式| www.591208.com-燕赵彩票排列7| www.687012.com-福彩双色球广告词| www.830807.com-注册送彩金的游戏| www.921486.com-七乐彩中奖号码表| www.999698.com-宝马彩票登录网页版| www.hc12.com-152.cc彩票-| www.g88.me-六和合彩网站王中王| www.65yf.com-湖北体彩中心新地址| www.1452.xyz-下载个大赢家彩票| www.9538.in-彩色童年-| www.134301.com-好彩香烟多少一包| www.081146.com-足彩跟单靠谱吗| www.186309.com-大发快三是正规的吗| www.30ej.com-陕西体彩中心中奖号| www.qk65.com-精彩彩票app下载| www.265509.com-乐彩论-| www.979453.com-中彩情报网永久书签| www.yt82.com-人人中彩票平台官网| www.3440.xyz-苏州吴中彩票店转让| www.72261.cc-高仿福利彩票打印机| www.288353.com-采乐彩票网-| www.452138.com-快三豹子111前兆| www.211016.com-彩票网站排名| www.ni24.com-极速75秒彩票平台| www.73qf.com-广西中彩网-| www.637390.com-彩虹7无人机视频| www.es84.com-中原彩票系统租用| www.825982.com-12快乐彩开奖结果| www.960255.com-新陶彩-| www.144918.com-神圣彩票骗局| www.av40.com-中彩票暴富的小说| www.353343.com-彩票打票员-| www.287581.com-华夏彩票是否合法| www.786759.com-极速彩票官-| www.949774.com-南方双彩票首页| www.ov8.com-彩票11选5-| www.a56.club-数字彩的另类打法| www.73do.com-可信的彩票投注网站| www.3719.cc-福彩大盘-| www.049983.com-中国体育彩票5号| www.1559.win-喜彩15886注册| www.234075.com-银川福彩转让| www.048877.com-福彩3d布衣钱树图| www.552388.com-江苏快三害死人| www.369847.com-云彩店足彩app| www.733857.com-福建福彩开奖走势图| www.912372.com-北正街附近体彩店| www.4085.biz-购买海南七星彩网址| www.848510.com-两分时时彩开奖结果| www.970341.com-刮刮彩一包-| www.24101.com-中国的彩票太假了| www.04cr.com-油性玫瑰彩铅画教程| www.cp5678.cc-内蒙古快三中奖助手| www.oq82.com-彩票众众-| www.961914.com-三彩服饰价格| www.53rm.com-体彩销售员心得| www.90172.com-七彩注册链接| www.380750.com-亿网彩票客户端| www.943205.com-七星规律彩票| www.122776.com-网易足球胜负彩| www.300283.com-中国彩吧首页| www.87299.com-信达彩票下载| www.522294.com-a9彩票骗局-| www.716585.com-彩铅画培训-| www.5656.bid-扎彩什么意思| www.948884.com-彩乐网网址-| www.fi12.com-安徽福彩15选5| www.391832.com-网络彩票还能开售吗| www.20hf.com-体彩大乐透邢台中奖| www.288985.com-彩神软件在哪儿下载| www.286128.com-下载内蒙福彩| www.34642.com-好运快三5分钟一期| www.436880.com-欧美乐透中奖彩票图| www.342701.com-掌上彩票新平台| www.666261.com-家彩论坛杀码| www.vs02.com-福彩三地开奖号| www.82568.cc-9福彩票用户注册| www.929543.com-首页牛牛蛙彩票网| www.9340.cc-有线电视球彩台| www.033235.com-下载新版网易彩票| www.337255.com-彩票d-| www.059417.com-北京福彩公益活动| www.230144.com-3d无名新彩吧| www.41083.com-网络彩票推广技巧| www.934766.com-kc快彩-| www.910506.com-彩票中奖如何领奖| 500彩票www.500710.com| www.090516.com-彩票兼职吧-| www.211063.com-体彩排三开-| www.578782.com-体彩形象店面装修| www.466698.com-七乐彩开机号分析| www.358278.com-百盛会员彩票| www.359896.com-快赢网彩票-| 非凡彩票www.77210h.com| www.qr00.com-福利彩票三十| www.604883.com-不黑钱的彩票平台| www.42295.com-有比k彩好的平台吗| www.125003.com-梦境与彩票数字对应| www.416787.com-幼儿园儿歌彩虹| www.772914.com-彩票帮投是什么| www.9211.in-彩虹科技股票行情| www.025662.com-甘肃快三开奖| www.354885.com-彩乃奈奈中文百度云| www.7002.pw-七彩网络阅卷| www.042777.com-足彩怎么不能买| www.0529.com-江苏彩票双色球| www.75819.com-香港赛马彩票平台| www.131660.com-河南彩民双色球中奖| www.775089.com-k彩大神有吗| www.277882.com-山东体彩彩民论坛| www.562837.com-青岛快三骗局揭秘| www.633579.com-神彩通代理会员资料| www.9980.xyz-福彩3d小军第一版| www.471656.com-开一家体彩高频彩| www.7064.xyz-d8彩票靠谱么| www.0978.cn-体彩排五合买网| www.112307.com-华亿彩票app| www.24920.cc-简单彩铅画儿童| www.9405.cc-体彩图迷字谜总汇| www.502132.com-能投注的网上彩票| www.683553.com-喜盈门彩票软件下载| www.961393.com-七乐彩奖金规则| www.007957.com-彩票手机新浪网站| www.33mq.com-体彩福建11选5| www.ij14.com-3d福彩之家首页| www.990495.com-玛雅吧彩票游戏平台| www.17720.cc-彩票店转让合同| www.587589.com-合肥体彩竞彩店| www.309383.com-开一家彩票店赚钱吗| www.275320.com-168彩票是真的吗| www.ef15.com-高频彩合法吗| www.285312.com-福州体彩中心| 500彩票网www.61655q.com| www.875733.com-时时彩牛牛规则介绍| www.15pj.cc-彩票开奖体彩| www.4393.com-福彩三d万能四码| www.89749.com-足彩爆冷四因素|