CSS/Javascript中的规则页效应
CSS/Javascript中的规则页效应
提问于 2012-03-24 12:55:00
我希望在CSS或Javascript/JQuery，例如中创建一个规则页面效果。我知道这可以通过设置一个固定的线高度和创建一个适合的背景图像CSS实现。
然而，我更喜欢创建一个向量解决方案(即没有图像)的像这样，但我需要它在IE中工作。
在不使用所有现代浏览器都能工作的图像的情况下，是否可能产生这种效果？
理想的解决方案是在段落中检测一行的顶部和底部，并使用javascript在两者之间画一条线--因此它将适用于未定义的线条高度(但如果有必要，我很乐意对它们进行定义)。
我忘了提到课文是动态的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-24 13:47:30
尝试朝这个方向前进：http://jsfiddle.net/Jw8pw/这是非常基本的，但是你可以得到更深的，如果你考虑线的边框高度，文本的位置。基本上，每件事都需要以高度为基础。用透明的div表示边框的边距，用div表示通过边界半径的孔打孔。
刚刚添加了更多： http://jsfiddle.net/julienetienne/Jw8pw/6/
//jquery
var lineHeight = $('#content p').css('line-height') ;
$('.line').css({height: lineHeight },0);
var x = $('#content').height();
$('#paper').css('height', x + 40 +"px");您需要编写一个脚本来手动添加div行，这样它们就可以在溢出后填充纸张，但不要太多。
- 估计在最大值情况下使用的像素数(假设为40‘s)，您将执行“文本高度#内容div”除以自定义(40’s)比率的操作，添加10 (为了安全起见)，这就是您需要“写”的行数。
- #文件没有溢出，因此欢迎更多的div行，但过多的(如数百行)有点懒惰。
Stack Overflow用户
发布于 2012-03-24 15:07:01
您可以在所有现代浏览器中使用画布(包括。IE9)。下面的示例在IE7和IE8中不起作用，但我还没有在那里进行测试。
<!DOCTYPE html>
<html>
<head>
<title>Line Test</title>
<style type="text/css">
#ruled {
border: 1px solid red;
}
#textContainer {
position: absolute;
left: 0;
top: 0;
width: 580px;
height: 1200px;
font-size: 12px;
margin: 10px;
padding: 5px 10px;
line-height: 20px;
}
</style>
<script type="text/javascript">
function drawLines(){
// get the canvas element using the DOM
var canvas = document.getElementById('ruled');
var currentLineY = 0;
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#CCC";
ctx.beginPath();
// draw some lines (the +1.5 offsets the text baseline
// and we use the .5 for crisp lines because the stroke()
// method requires floats, not ints
for (var i=1, imax=30; i<imax; i++) {
currentLineY = i*20 + 1.5;
ctx.moveTo(0,currentLineY);
ctx.lineTo(600,currentLineY);
}
ctx.stroke();
} else {
alert('You need a modern browser to see the lines.');
}
}
</script>
</head>
<body onload="drawLines()">
<canvas id="ruled" width="600" height="602"></canvas>
<div id="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9851944
复制相关文章
相似问题
腾讯云开发者
