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.16fs.cc-幸福彩app下载| www.7620.in-爱彩平台app下载| www.26821.cc-七星彩选号专家预测| www.77016.com-微彩出款不了| www.034899.com-胜负彩360-| www.196543.com-新版河北快三百宝彩| www.275896.com-什么平台玩彩票最好| www.375704.com-牛人选体彩排五技巧| www.503361.com-希图国际是什么彩票| www.579046.com-游戏彩金是什么意思| www.656857.com-竞彩2串1对冲外围| www.760711.com-台湾时时彩助赢软件| www.860188.com-奥客手机彩票网| www.922750.com-彩票全讯平台| www.982061.com-新彩网福彩网总汇| www.uf00.com-国乐彩app-| www.14gm.com-广东省福彩36选7| www.006.bid-鸿彩主播火火图片| www.3667.in-旺彩双色球软| www.9230.cc-新浪彩票必发行情| www.60451.com-快三怎么看中奖| www.020847.com-体育彩票开机号| www.095186.com-老梁谈福利彩票| www.206959.com-易彩app下载| www.318012.com-十字彩赌博-| www.397834.com-廉江哪里有七星彩打| www.568920.com-梦到彩票中奖号码| www.750719.com-爱彩彩票来自哪里| www.827338.com-微信金沙博彩骗局| www.899742.com-天天彩网站-| www.967134.com-彩票开奖3d和值表| www.268.cn-玩王牌彩票的技巧| www.6021.biz-3d彩票有什么诀窍| www.13593.com-新浪爱彩九场| www.57749.com-韩国买彩票的app| www.067712.com-彩票计划下载手机版| www.145599.com-今天足彩专家推荐| www.249323.com-e购彩彩票中心| www.323585.com-七星彩彩开奖时间表| www.445636.com-有哪些平台在卖彩票| www.603353.com-韩国德国2比0彩票| www.722302.com-福利彩票分析软件| www.839053.com-彩色纸箱定做厂家| 500彩票www.202405.com| www.j47.cc-武汉市福利彩票中心| www.409.hk-云南小伙中彩票5亿| www.44566.com-甘肃快三和值跨度表| www.444523.com-7体育彩票开奖结果| www.639246.com-国王app全彩02| www.955545.com-如何提升竞彩销量| www.ao3.cc-河南快三开奖号| www.i83.org-快购彩票抢红包| www.70xm.com-云南彩易达-| www.5227.xyz-篮球彩票胜负怎么买| www.37971.com-登录c彩61-| www.022741.com-约彩365靠不靠谱| www.144432.com-今日快三湖北| www.547880.com-星宇购彩官方网站| www.715361.com-彩预测计划app| www.860373.com-体彩天下合法吗| www.49234.com-168彩票网安全吗| www.005164.com-今天福彩体彩开机号| www.078959.com-七星彩复式中奖表| www.141087.com-99购彩票是真是假| www.218239.com-百盈快三官网| www.286824.com-安徽快三走势一定牛| www.438800.com-市福利彩票加盟电话| www.528995.com-贵州快三中奖绝招| www.615993.com-福彩领奖强制捐款| www.685559.com-福彩3d三码和查表| www.761152.com-时时彩牛牛玩法平台| www.901676.com-体彩试机号今天晚上| www.959753.com-世纪佳缘彩票骗局| 818合彩www.www.9889hc.com| www.co16.com-温州快三-| www.tf98.com-湖北快三牛预测| www.00xw.com-福彩放假-| www.65rb.com-湖北体彩大乐透大奖| www.0472.loan-福彩e线游戏规则| www.9439.top-华人彩票违法吗| www.44960.com-福彩35选7-| www.87737.cc-关于京东彩票网| www.036201.com-下载3d福彩-| www.133975.com-微信买彩票靠谱吗| www.207268.com-手机正规彩票网站| www.275844.com-七星彩复式中奖查询| www.375893.com-七星彩数字排列| www.488733.com-七乐彩票平台犯罪吗| www.560428.com-红彩会彩票app| www.622107.com-梦见刮彩票中奖| www.687517.com-彩吧助手走势图势图| www.759634.com-彩票设赌-| www.868921.com-深圳快乐彩输得好惨| www.962715.com-旺旺时时彩安卓| 天天彩票www.7782h.com| www.cd45.com-买彩票软件-| www.rv10.com-双色球资讯新浪彩票| www.12xw.com-王者彩票网地址| www.74ve.com-体彩大乐透要怎么买| www.0956.cc-cp544快三计划| www.8366.top-熊猫七星彩下载安装| www.26369.cc-中彩吧平台怎么样| www.64621.com-竞彩足球怎么找客户| www.030687.com-福利彩票怎么对奖| www.213602.com-神彩争霸下载网址| www.306538.com-9d彩票-| www.372529.com-极速时时彩人工计划| www.467007.com-彩票买到几点结束| www.546323.com-消彩豆安卓版下载| www.zc23.cc-福彩和体彩哪个真实| www.22pe.com-彩票开奖查询牛材网| www.003.live-分分时时彩开奖规律| www.2810.vip-红彩彩票app| www.9636.space-大乐透经彩网走势图| www.59993.com-七星彩今晚开什| www.010910.com-五星彩票简介| www.072510.com-cp官方彩票-| www.129440.com-快三中奖高手| www.197779.com-甘肃快三统计图表| www.272306.com-怎么玩快三才能赚| www.399372.com-买彩票算不算贪心| www.511745.com-下载彩库宝典正版| www.572736.com-86人工彩票网| www.633016.com-加拿大3.5分彩骗| www.692920.com-彩票乐乐官网| www.762182.com-怎样注册极速时时彩| www.884642.com-风采彩票网预测| www.950653.com-体彩独胆预测胆码| www.986654.com-手机网投彩票| www.cai172.com-江西快三开奖| www.hv57.com-福彩和值-| www.wr95.com-好彩官方版苹果下载| www.04iy.com-画彩铅人物用什么纸| www.64ih.com-迷彩短裤配什么鞋| www.928.date-数学彩票计算软件| www.4194.biz-宝乐彩票登录官网| www.8715.xyz-昨天内蒙快三| www.69285.com-彩票提现流水不足| www.020624.com-在网上怎样买彩票| www.080101.com-快三怎么逮豹子| www.131424.com-彩礼4万8寓意| www.192737.com-江西福彩双色球开奖| www.254055.com-香港足球彩票app| www.313227.com-用你ip代玩彩票| www.369204.com-手机app高频彩| www.500799.com-2寸彩照是什么底色| www.562376.com-体彩排例五开奖结果| www.616775.com-彩票开售最新消息| www.674364.com-福彩双色球开机号| www.736555.com-石家庄市彩票中奖者| www.797694.com-c99彩票官网| www.864929.com-彩友会彩票平台| www.753.tv-时时彩五遗漏数据| www.82030.com-网络彩票骗术| www.060760.com-私彩与官方彩票| www.194657.com-快三投注群-| www.254092.com-彩客彩票苹果版本| www.298312.com-内蒙古快三新规则| www.358928.com-北京花园彩票站临朐| www.424002.com-彩虹解地下载| www.517095.com-入侵黑彩服务器| www.568758.com-双色彩票-| www.620505.com-香港中彩公司| www.671434.com-彩500正规吗|