闲来无聊,写了一个css控制图文混排、图文自适应容器显示的效果。
下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果。
留存参考:
<!DOCTYPE html />
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>图文混排自适应</title>
<script src="./js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="testDiv" style="width:360px;height:auto;border:1px solid #ccc;padding:3px;overflow:hidden;">
<img alt="" src="./images/500.jpeg" style="width:30%;height:auto;float:left;" />
注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理.
注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理,注册客户端接收事件处理.
</div>
<div id="msg">
</div>
</body>
</html>
<script type="text/javascript">
var div = $('#testDiv');
div.w = $('#testDiv').width();
div.h = $('#testDiv').height();
div.on("mousedown", function (event) {
div.mousekey = true;
div.x = event.pageX;
div.y = event.pageY;
$(document).on('mousemove.chatMove', function (e) {
var x = div.w + e.pageX - div.x
var y = div.h + e.pageY - div.y;
$('#msg').html('width:' + x + 'px; height:' + y + 'px');
div.css({ width: x, height: y });
}).on('mouseup.chatUp', function () {
div.mousekey = false;
$(document).off('mousemove.chatMove').off('mouseup.chatUp');
});
}).on('mouseup', function () {
div.mousekey = false;
$(document).off('mousemove.chatMove').off('mouseup.chatUp');
});
</script>