基本信息
源码名称：对比切换页
源码大小：0.04M
文件格式：.zip
开发语言：CSS
更新时间：2021-07-22
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 5 元×
微信扫码支付：5 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>1</title>
<script src="jquery.min.js"></script>
<style>
.cot {width:1920px;position:relative;height:1024px;}
.tp1 {background:url(1.jpg) no-repeat;width:960px;height:1024px;position:absolute;left:0;z-index:0;}
.tp2 {background:url(2.jpg) no-repeat;width:960px;height:1024px;position:absolute;right:0;z-index:0;}
.btn {background:url(btnDrag.png) no-repeat;width:100px;height:100px;position:absolute;top:600px;left:907px;z-index:10;cursor:w-resize;}
.biaoti {width:867px;height:149px;position:absolute;top:720px;left:528px;z-index:20;}
h1{font:30px/38px 微软雅黑,Arial;color:#FFFFFF;text-align:center;}
p{font:14px/22px 微软雅黑,Arial;color:#FFFFFF;text-align:center;}
</style>
</head>
<body>
<div class="cot">
<div id="dvWhite" class="tp1"></div>
<div id="dvBlack" class="tp2"></div>
<div id="btnDrag" class="btn"></div>
<div class="biaoti">
<h1>这是标题</h1>
<p>特点介绍1214821482-1<br />
多斯拉克
</p>
</div>
</div>
<script>
$(function() {
$('#btnDrag').mousedown(function() {
var mouseX = window.event ? window.event.x: e.screenX;
var xx = mouseX - $('#btnDrag').position().left;
//鼠标移入
$(document).bind('mousemove',
function() {
var mouseX = window.event ? window.event.x: e.screenX;
$('#btnDrag').css('left', mouseX - xx);
$('#dvWhite').width($('#btnDrag').position().left 53);
$('#dvBlack').width(1920 - $('#btnDrag').position().left - 53);
}); //end of mousemove
}); //end of mousedown
$(document).mouseup(function() {
//鼠标移出
$(this).unbind('mousemove');
}); //end of mouseup
//scroll
});
</script>
</body>
</html>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>1</title>
<script src="jquery.min.js"></script>
<style>
.cot {width:1920px;position:relative;height:1024px;}
.tp1 {background:url(1.jpg) no-repeat;width:960px;height:1024px;position:absolute;left:0;z-index:0;}
.tp2 {background:url(2.jpg) no-repeat;width:960px;height:1024px;position:absolute;right:0;z-index:0;}
.btn {background:url(btnDrag.png) no-repeat;width:100px;height:100px;position:absolute;top:600px;left:907px;z-index:10;cursor:w-resize;}
.biaoti {width:867px;height:149px;position:absolute;top:720px;left:528px;z-index:20;}
h1{font:30px/38px 微软雅黑,Arial;color:#FFFFFF;text-align:center;}
p{font:14px/22px 微软雅黑,Arial;color:#FFFFFF;text-align:center;}
</style>
</head>
<body>
<div class="cot">
<div id="dvWhite" class="tp1"></div>
<div id="dvBlack" class="tp2"></div>
<div id="btnDrag" class="btn"></div>
<div class="biaoti">
<h1>这是标题</h1>
<p>特点介绍1214821482-1<br />
多斯拉克
</p>
</div>
</div>
<script>
$(function() {
$('#btnDrag').mousedown(function() {
var mouseX = window.event ? window.event.x: e.screenX;
var xx = mouseX - $('#btnDrag').position().left;
//鼠标移入
$(document).bind('mousemove',
function() {
var mouseX = window.event ? window.event.x: e.screenX;
$('#btnDrag').css('left', mouseX - xx);
$('#dvWhite').width($('#btnDrag').position().left 53);
$('#dvBlack').width(1920 - $('#btnDrag').position().left - 53);
}); //end of mousemove
}); //end of mousedown
$(document).mouseup(function() {
//鼠标移出
$(this).unbind('mousemove');
}); //end of mouseup
//scroll
});
</script>
</body>
</html>