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.03oj.com-七彩专栏-| www.34dc.com-福彩3d开奖号查询| www.39066.com-信彩彩票平台| www.019261.com-内蒙内蒙快三| www.gp39.com-河南省结婚彩礼规定| www.657162.com-360彩票网客户端| www.774414.com-七星彩开奖下期预测| www.878237.com-福彩了d走势图| www.951323.com-腾讯竞彩微博| 百姓彩票www.bxcp3.com| www.945066.com-福彩logo图片| www.cp302.com-福彩快三今日开奖| www.ur36.com-鸿彩快三官网| www.464027.com-三d双彩网走势图| www.615960.com-彩神通关注号金码| www.727686.com-江苏快三历史长龙| www.815883.com-制作外围彩票网站| www.929260.com-体7星彩-| 爱彩www.1666ac.com| www.iv93.com-彩票民间高手老王| www.80lx.com-重庆时时彩任选四| www.3456.tv-腾讯旗下天天中彩票| www.43561.com-陕西省福利彩票中心| www.776167.com-彩票吃票跑路什么罪| www.805553.com-足球竞彩分析软件| www.893598.com-后三豹子时时彩| www.984884.com-体育彩票今天选号| www.iw18.com-浙江体彩首页| www.291365.cc-3内蒙快三-| www.575371.com-3d乐彩字谜图迷| www.1776.black-七星彩论坛手机版| www.cai903.cc-江苏快三的开奖结果| www.299760.com-内蒙古快三第49期| www.463557.com-香港福利彩票公司| www.023461.com-彩票刷流水方案| www.905566.cc-开彩票店选址| 500彩票www.52072z.com| www.331270.com-81彩票网-| www.773678.com-天津时时彩票开奖走| www.473132.com-拼博在线彩票网| www.695935.com-合肥福彩开奖| www.800070.cc-体育彩票在哪里买| www.52517.com-福利彩票开设地段| www.cai8444.com吉林快三走试图| www.197211.com-三分快三最新开奖号| www.461693.com-双色球万彩吧| www.633554.com-天天中彩票快3走势| www.797735.com-9h99彩票-| 彩乐乐www.cll168.com| www.455707.com-搜狗彩票精准杀号| www.756329.com-4567彩票正规吗| www.5oh.com-易彩云彩票下注| www.79773.cc-银川体育彩票电话| www.812987.com-随州福彩网站| www.9519.pro-体育彩票.com| www.626682.com-数字彩票竞彩网| www.699959.com-威力彩最新开奖日期| www.779770.com-福利彩票布衣独胆王| www.857532.com-八号彩票合法吗| www.923069.com-手机108彩票软件| www.974805.com-体彩篮球赛-| 亚洲www.938905.com| www.20sc.com-58同城春天彩票| www.358117.com-微彩吧能提现吗| www.443554.com-青蛙彩票四不像图| www.526381.com-头头博彩-| www.588067.com-玩时时彩输了好多钱| www.663263.com-乐彩彩票开奖结果| www.728289.com-彩8娱乐是黑平台| www.791692.com-9188彩票网首页| www.860263.com-九州彩票平台网址| www.917788.com-海南七星彩投注| www.976749.com-彩礼数额意义| www.cp2829.com-吉林快三怎么代理| www.449300.com-二十四彩-| www.586854.com-南方双彩大乐透预测| www.735682.com-斐波那契与彩票| www.852980.com-彩码网站大全| www.977888.com-足球竞彩心得| www.1jq.com-彩天下唯一注册平台| www.292961.com-彩吧图库331期| www.697508.com-体育七星彩票玩法| www.777724.com-幸运彩票号码| www.855322.com-彩种最多的平台| www.925058.com-爱福彩彩票开奖| www.981865.com-分分彩平台注册| www.cp5258.com-北单足彩-| www.28853.cc-期期中彩票能玩吗| www.14rz.com-福彩3d焰午字迷| www.0314.vip-2019彩票发展| www.8060.top-风景水彩教程| www.31222.cc-尊彩网页版-| www.882630.com-易彩堂赚钱是真的吗| www.63898.cc-足彩九场-| www.985900.com-送彩金18元可提款| www.xz99.com-吉祥彩最新版| www.6017.shop-胜负彩19061| www.51101.com-风彩彩票一直初始化| www.365355.cc-广州体彩网点申请| www.625027.com-下载933时彩| www.771783.com-多彩贵州的含义| www.606673.com-足彩为啥都停售| www.714636.com-时时彩人工五星计划| www.843655.cc-福彩主任中奖| www.991518.com-网投彩票app| www.566391.com-彩票软件分析| www.940769.com-彩票唯一官方网站| www.qm09.com-希腊5分彩开奖| www.555082.com-乐彩神-| www.io23.com-足彩预测网-| www.568953.com-彩票快开游戏如何改| www.061126.com-彩票在哪个app买| www.zm75.com-用您ip代玩彩票| www.6470.cn-找玩彩票的客户| www.57948.com-福彩图迷汇新彩网| www.073785.com-彩代表什么生肖| www.45ux.com-鼎盛团队的彩票平台| www.32io.com-百废彩票开奖查询| www.33gi.com-飞来福彩吧微信加入| www.329239.com-彩8彩票app下载| www.474881.com-九号彩票登录网址| www.621178.com-秒速快三下载安装| www.898903.com-南方双彩林竹杀码| www.ki80.com-搜索中国竞彩网| www.593619.com-七彩云投屏-| www.688994.com-新彩票安卓下载| www.679134.com-遗言彩票-| www.621717.com-快三摇奖程序开发| www.296379.com-快乐彩票乐彩网| www.83698.com-镇上开彩票店怎么样| www.350679.com-中彩票的符-| www.505106.com-体彩王-| www.6261.cm-吉祥彩票黑钱| www.67113.cc-福利彩票七彩乐咋投| www.81121.cc-福彩排列五的玩法| www.131566.com-山东彩礼一般给多少| www.967341.com-正规彩票微信合买群| 彩61www.217380.com| www.403.me-旺彩福彩快三助手| www.145982.com-310足彩专家预测| www.247794.com-江苏快三能玩不| www.373791.com-彩智彩票软件| www.99040.cc-360足彩计算器| www.561701.com-山东体彩山东福彩| www.593061.com-哪些网络彩票平台好| www.018789.com-北京快三助手版| www.696322.com-时时彩后二跨度| www.822307.com-随州福利彩票| www.111163.com-体育彩票站-| 百姓彩票www.www.bxcp3333.com| 万历彩票www.77114y.com| www.js72.cc-彩神iv软件-| www.8co.com-3d试机号宝彩网| www.304822.com-98彩票app-| www.078358.com-网上的福彩网可靠吗| www.190990.com-内蒙快三早知道| www.604991.com-七乐彩与七星彩| www.889558.com-248凤凰彩票| www.329165.com-福彩安卓-| www.y13.net-奇妙时时彩趋势软件| www.847337.com-福彩六加一-| www.907485.com-赛车彩票怎么玩稳赢| www.964102.com-网友叫卖彩票| 网易彩票www.064wy.com|