87,992
社区成员
发帖
与我相关
我的任务
分享这段代码是什么意思，不理解js+css
下面这段代码是如何实现字体倒立的:不太理解，请高手解释一下。
<style>
body{font-size:19px;font-family:宋体}
#aa{position:relative;width:168px;height:18px}
</style>
<script language="javascript">
function aab(){
tat=document.getElementById("aa").innerHTML
aaa=""
ja=""
for(i=19,a=20;i<58;i++,a--){
ja+="<div style='overflow:hidden;width:168px;height:1px;'><p style='background-color:red;margin:-"+(18-(i-18))+"px 0px 0px 0px'>"+tat+"</p></div>"
}
aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa">号<div>
</body>
<style>
body{font-size:19px;font-family:宋体}
#aa{position:relative;width:168px;height:18px}
</style>
<script language="javascript">
function aab(){
tat=document.getElementById("aa").innerHTML
aaa=""
ja=""
for(i=19,a=20;i<58;i++,a--){
ja+="<div style='overflow:hidden;width:168px;height:1px;'><p style='background-color:red;margin:-"+(18-(i-18))+"px 0px 0px 0px'>"+tat+"</p></div>"
}
aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa">号<div>
</body>
...全文
请发表友善的回复…
发表回复
KK3K2005 2013-07-17
- 打赏
- 举报
加入这个文字在div中 这个div高度是18px
那么 我用 18个一模一样内容的div
每个div高度1px 分别显示18px中的一个像素 用margin来进行偏移
这样等于有了 18的像素线
然后你可以 自己拼 随便换次序 18个到过来排在加上透明度设置 就倒影
潮起潮落 2013-07-17
- 打赏
- 举报
这个只是模拟出了“字体倒过来”的效果，并不是真正把一个字倒立了。
关键在于margin-top这个属性，你设置为正值元素上面会出现外边距，设置为负值，就是反过来，看着就像是元素有一部分“向上缩”。
打个比方，汉字“三”，这个字正常情况下你设置包裹层为height:1px;overflow:hidden;
那么露出来的1px就是最上面那条横杠，如果设置margin-top:-5px;(或者-6，不太精确)，露出来的就是第二条横杠。
说一下他的原理就是，计算字体高度，比如height是18px，就1个px创建一个层，这个层中只放那个字，也就是说模拟出这个18px的字倒立的效果，需要18个div，每个里面内容都相同，每个高度为1px。
然后找一个元素设置为margin-top:-17px;
那么它最终显示的是字体最下面的部分，然后依次-16px、-15px直到0，就通过18个像素把一个字的各个部分拼在了一起，你把负值换成正的，就能看到字又“正过来了”。
CJuNing 2013-07-17
- 打赏
- 举报
把上面的文字切成1px高的div，通过排序做出来颠倒的效果 这个你看它生成的代码就会特别明显了
