87,990
社区成员
发帖
与我相关
我的任务
分享页面旋转90度在手机怎么正常显示
一个弹幕的代码（百度的）我想手机浏览的时候可以旋转90度后正常显示，不会出现滚动条，有没有大佬帮忙改写下，已知思路，直接旋转展示弹幕的div，可是我做出来的有滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery弹幕</title>
<link href="" rel="stylesheet" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html ,body{
background-color: transparent;
}
.ctxt{
width:1000px;
height:400px;
overflow:hidden;
margin:0 auto;
}
.ctxt p{
position:relative;
left:1000px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="" class="ctxt"></div>
<br />
<form method="post" action="" align="center">
<input type="text" id="msg" style="height:24px;width:200px;" /> <button type="button" id="submitBut">发布</button>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#submitBut").click(function(){
var msgtxt=$("#msg").val();
var colortxt = getReandomColor();
var topPos = generateMixed(3);
if (topPos > 300)
{
topPos = 30;
}
var newtxt = '<p style="top:'+topPos+'px; color:'+colortxt+'">'+$("#msg").val()+'</p>';
$(".ctxt").prepend(newtxt);
var addTextW = $(".ctxt").find("p").width();
$(".ctxt p").animate({left: '-'+addTextW+"px"}, 30000,function(){
$(this).hide();
});
});
});
//随机获取颜色值
function getReandomColor(){
return '#'+(function(h){
return new Array(7-h.length).join("0")+h
})((Math.random()*0x1000000<<0).toString(16))
}
//生成随机数据。n表示位数
var jschars = ['0','1','2','3','4','5','6','7','8','9'];
function generateMixed(n) {
var res = "";
for(var i = 0; i < n ; i ++) {
var id = Math.ceil(Math.random()*9);
res += jschars[id];
}
return res;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery弹幕</title>
<link href="" rel="stylesheet" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
html ,body{
background-color: transparent;
}
.ctxt{
width:1000px;
height:400px;
overflow:hidden;
margin:0 auto;
}
.ctxt p{
position:relative;
left:1000px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="" class="ctxt"></div>
<br />
<form method="post" action="" align="center">
<input type="text" id="msg" style="height:24px;width:200px;" /> <button type="button" id="submitBut">发布</button>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#submitBut").click(function(){
var msgtxt=$("#msg").val();
var colortxt = getReandomColor();
var topPos = generateMixed(3);
if (topPos > 300)
{
topPos = 30;
}
var newtxt = '<p style="top:'+topPos+'px; color:'+colortxt+'">'+$("#msg").val()+'</p>';
$(".ctxt").prepend(newtxt);
var addTextW = $(".ctxt").find("p").width();
$(".ctxt p").animate({left: '-'+addTextW+"px"}, 30000,function(){
$(this).hide();
});
});
});
//随机获取颜色值
function getReandomColor(){
return '#'+(function(h){
return new Array(7-h.length).join("0")+h
})((Math.random()*0x1000000<<0).toString(16))
}
//生成随机数据。n表示位数
var jschars = ['0','1','2','3','4','5','6','7','8','9'];
function generateMixed(n) {
var res = "";
for(var i = 0; i < n ; i ++) {
var id = Math.ceil(Math.random()*9);
res += jschars[id];
}
return res;
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
weixin_42434031 2018-07-10
- 打赏
- 举报
这个我试过，效果不行，你可以试试看[/quote]
我试了。很正常，你具体要什么效果？[/quote]
自己解决了谢谢啊
weixin_42434031 2018-07-06
- 打赏
- 举报
这个我试过，效果不行，你可以试试看
天际的海浪 2018-07-06
- 打赏
- 举报
这个我试过，效果不行，你可以试试看[/quote]
我试了。很正常，你具体要什么效果？
天际的海浪 2018-07-04
- 打赏
- 举报
两处1000px改成100%
.ctxt{
width:100%;
height:400px;
overflow:hidden;
margin:0 auto;
}
.ctxt p{
position:relative;
left:100%;
margin:0;
padding:0;
}
