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.377656.com-淄博福利彩票店转让| www.585025.com-掌上购彩登录| www.672901.com-五个人摇彩子怎么玩| www.756332.com-4567彩票网站| www.831376.com-公司给员工买彩票| www.906268.com-彩色的中国-| www.972995.com-最老版彩库宝典下载| www.cp1120.com-快三免费计划网页| www.qn22.com-一分快三赚钱技巧| www.21wi.com-qq里有彩票吗| www.193058.com-福建体彩-| www.392551.com-搜狐体育足球彩票| www.587888.cc-彩色复印机报价| www.709448.com-彩票代打工资车| www.cp8883.com-快三开奖如何查询| www.124167.com-腾讯分分彩漏洞刷钱| www.063639.com-时时彩有多少网站| www.587848.com-足球彩票竞彩足彩| www.713859.com-3d彩票下载安装| www.865308.com-淘宝网购彩票合法吗| www.cai3912.com快三彩票实战技巧| www.xe04.com-福彩三d谜语| www.085196.com-4s彩票开奖-| www.xx78.cc-688彩票安卓版| www.9043.cn-天道篮球竞彩推荐| www.07744.com-重庆时彩开奖助手| www.397068.com-彩票要买几个数字| www.755123.com-江西福彩中奖号码| www.911860.com-天天彩选3开奖查询| www.py49.com-518彩官网登录| www.739524.com-快三早上几点开奖| www.569573.com-彩吧图谜全图九| www.015652.com-七星彩怎么中奖法| www.387722.com-彩票的单双是什么| www.692306.com-泰国的彩票哪里兑现| www.340106.com-19036足彩分析| www.090550.com-体彩排三走势图表| www.3mw.com-彩铅笔手绘眼睛| www.539610.com-彩神为什么下不了了| www.9ng.com-亚彩会注册-| www.8929.in-新彩网字谜画谜| www.445228.com-信阳体彩大奖| www.515.cn-燕郊彩票站转让信息| www.46vl.com-投资彩票网站| www.482178.com-挂机彩票可以挣钱| www.227330.com-上海快三开奖号| www.606972.com-有多少人买彩票| www.26dq.com-双色球购彩软件下载| www.738940.com-2019彩票交流群| www.978540.com-8亿彩苹果版下载| www.028963.com-分析彩票的手机软件| www.500011.com-时时彩群主-| www.781819.com-宝马时时彩登录| www.22597.cc-盛兴彩票v3手机版| www.326884.com-香港天下彩票资料| www.882544.com-希腊五分彩-| www.072091.com-加州时时彩开奖记录| www.238030.com-爱彩乐开奖结果| www.324369.com-南国七星彩论坛特区| www.3237.org-采彩票开奖查询| www.986198.com-蓝球竞彩专家预测| www.f66.in-在吉隆坡做博彩| www.331078.com-棋牌彩票投注网站| www.a69.cc-福彩双色球奖项金额| www.3471.vip-爱彩乐天津11选5| www.4943.cn-彩帝彩票下载安装| www.6615.top-茂腔罗彩记全集| www.61757.cc-七星彩现场开奖直| www.235105.com-湖南体彩网网| www.688336.com-3d彩票高手微信| www.201469.com-够力七星彩新版本| www.811885.com-新昌双彩背上的桥| www.543528.com-北京中国体彩报| www.785786.com-七星彩预测最准专家| www.947945.com-特彩吧-| www.78679.cc-新加波天天彩资讯纲| www.328303.com-乐彩论坛下载安装| www.016217.com-彩票快速查询| www.z10.hk-福彩布衣天下| www.07606.com-中彩那天课文生字| www.400205.com-在哪里众筹买彩票| www.963594.com-做彩票代理怎么赚钱| 大赢家彩票网www.54400n.com| www.924447.com-亿豪彩票-| www.7576.com-体育足彩网-| www.vk80.com-贵州省福彩兑奖| www.659058.com-财神会彩票-| www.44447.com-75彩票网-| www.095559.com-竞彩彩店宝-| www.530054.com-彩神争覇app| www.306718.com-哪些彩票平台好| www.vw14.com-乐购彩票是黑平台| www.98640.com-365约彩-| www.61518.com-大胜彩票最新安卓| www.16722.com-中国福彩有几种玩法| www.236905.com-彩票买大小有规律吗| 500彩票www.50026s.com| www.m27.com-广西快三高手软件| www.521561.com-体彩彩票站提成| www.662148.com-竞彩比分中奖图片| www.08123.cc-福彩3d模拟器| www.255399.com-彩神网页版登录| www.390218.com-捡彩票中502万| www.712664.com-7星彩开奖结果yy| www.879633.com-北京新彩网合法吗| www.94564.com-上海基诺型彩票| www.531924.com-感觉彩票33是坑| www.iy55.com-嘉兴福彩店申请| www.803927.com-乐彩网首页排三| www.757597.com-彩票录播事件| www.520868.com-体育彩票销售点申请| www.31xl.com-体彩18058-| www.239232.com-江苏快三算赌博吗| www.490010.com-掌上百胜百胜彩票| www.612176.com-足彩加推荐怎么样| www.8351.top-e77乐彩线路导航| www.5749.top-体彩七位随机号码| www.56877.com-快乐彩怎么买稳赚| www.wb3.com-四川快三开奖结果| www.490638.com-大乐透淘宝彩票| www.810343.com-彩票谜语什么意思| www.209383.com-网上玩快三怎么赚钱| www.523881.com-所有彩票网站| www.202446.com-贵州福彩网下载| www.389783.com-大朗体育彩票店转让| www.v69.xyz-充值送彩金的平台| www.0548.xyz-福彩牛彩3d字迷| www.148299.com-合法的网上彩票平台| www.575758.com-足彩竞彩世界杯| www.734516.com-彩色混凝土配合比| www.a47.cc-浙江省福彩兑奖中心| www.316006.com-网上还可以买竞彩吗| www.700891.com-淘宝买彩票犯法吗| www.67049.com-江苏省福彩中心电话| www.146581.com-中国福利彩票快乐3| www.862941.com-今期六给彩开奖结果| www.44309.com-全民彩票苹果怎么玩| www.563891.com-福彩3d今日图迷| 福彩天下www.fcff1.com| www.308.mobi-大发快三挂-| www.947961.com-体彩七星彩推荐号码| www.078808.com-体彩19034-| www.525052.com-澳客彩票安卓版下载| www.93vs.com-六堂彩网站大全| www.252177.com-旺彩有没有苹果版| www.fg43.com-快三中奖概率最高| www.41to.com-鸿运彩票如何| www.422040.com-彩票大小投注技巧| www.51yf.com-网络十字彩赌钱| www.54518.cc-大发时时彩助手软件| www.1576.org-安卓版冀彩宝下载| www.082091.com-3d试机号彩宝| www.386968.com-环彩彩票贴吧| www.766065.com-网购彩票平台| 大赢家彩票www.599845.com| www.320779.com-如何注册百宝彩视| www.189884.com-江苏快三遗漏号查询| www.23239.cc-分分彩作弊软件| www.713150.com-海南彩票41-| www.877905.com-男主中彩票的小说| www.40938.com-亚彩官网-| www.03ks.com-600彩票下载| www.19711.cc-山东体彩网技巧论坛| www.090056.com-彩票聊天话术大全|