做一个地图产品,需要做小地图,效果如下:
代码如下:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
<script src="../js/jquery-1.8.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
margin: 20px auto;
border: #000 solid 1px;
}
.out {
width: 300px;
height: 300px;
background: #fff;
overflow: hidden;
}
.in {
border: solid 50px rgba(0, 0, 0, 0.5);
width: 100px;
height: 150px;
border-left-width: 200px;
border-right-width: 200px;
border-top-width: 150px;
border-bottom-width: 150px;
border-top-width: ;
position: absolute;
top: 0;
left: 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="out">
首先浮在上层 首先母DIV设置固定的位置 width:960px; margin:0 auto; 然后设置要浮动的层的position为absolute,设置padding和margin。这样就固定的浮动了。 如果有多个层浮动,那么设置z-index就可以了。 之后要实现背景半透明 CSS代码如下: background-color:#000000; -moz-opacity:0.7;opacity: 0.7; filter:alpha(opacity=70); 上述都写上,这样可以保证绝大多数的浏览器支持半透明。首先浮在上层
首先母DIV设置固定的位置 width:960px; margin:0 auto; 然后设置要浮动的层的position为absolute,设置padding和margin。这样就固定的浮动了。 如果有多个层浮动,那么设置z-index就可以了。 之后要实现背景半透明 CSS代码如下: background-color:#000000; -moz-opacity:0.7;opacity: 0.7; filter:alpha(opacity=70); 上述都写上,这样可以保证绝大多数的浏览器支持半透明。
本文禁止转载!
</div>
<div class="in" id="inbox"></div>
</div>
<script>
var inbox = $("#inbox");
$(document).ready(function() {
// tag_num = $(".head >li").length;
// nav_widthx = document.body.clientWidth; //获取可视区域宽度
// max_width = (tag_num * 60 - nav_widthx + 100) * -1; //获取左滑最大距离
// //alert(max_width);
document.getElementById("inbox").addEventListener('touchstart', touchStart);
document.getElementById("inbox").addEventListener('touchmove', touchMove);
document.getElementById("inbox").addEventListener('touchend', function() {
isMove = false;
console.log("touch end");
// console.log("left:"+inbox.css("left"));
// console.log("top:"+inbox.css("top"));
});
});
var lastLeft = 0;
var lastTop = 0;
var lastPageX;
var lastPageY;
var leftMax = 0; //左边最大值
var topMax = 0;
var leftMin = -200;
var topMin = -150;
//滑动开始事件
function touchStart(e) {
isMove = true;
e.preventDefault();
//tx = parseInt($("#head").css('left'));
lastPageX = e.touches[0].pageX;
lastPageY = e.touches[0].pageY;
// lastLeft=inbox.css("left").replace(/px/, "");
// lastTop=inbox.css("top").replace(/px/, "");
console.log("touch star");
// console.log("left:"+inbox.css("left"));
// console.log("top:"+inbox.css("top"));
console.log("lastpos:" + lastPageX + "," + lastPageY);
}
function touchMove(e) {
if (isMove) {
e.preventDefault();
var nowPageX = e.touches[0].pageX;
var nowPageY = e.touches[0].pageY;
var leftChange = nowPageX - lastPageX;
var topChange = nowPageY - lastPageY;
// console.log("leftChange:"+leftChange);
// console.log("topChange:"+topChange);
nowLeft = parseInt(inbox.css("left").replace(/px/, "")) + leftChange;
nowTop = parseInt(inbox.css("top").replace(/px/, "")) + topChange;
console.log("nowPageX:" + nowPageX);
console.log("nowPageY:" + nowPageY);
console.log("nowLeft:" + nowLeft);
console.log("nowTop:" + nowTop);
if (nowLeft >= leftMin && nowLeft <= leftMax) {
inbox.css("left", nowLeft + "px");
}
if (nowTop >= topMin && nowTop <= topMax) {
inbox.css("top", nowTop + "px");
}
//inbox.css({"left":nowLeft+"px","top":nowTop+"px"});
// var n = tx + e.touches[0].pageX - x;
console.log("e.touches[0].pageY:" + e.touches[0].pageY);
//
// if (n <= 0 && n > max_width) {
// $("#head").css('left', n + 'px');
// console.log("N:"+n);
// }
lastPageX = e.touches[0].pageX;
lastPageY = e.touches[0].pageY;
}
}
</script>
</body>
</html>