頁(yè)面常見(jiàn)問(wèn)題及解決方案
● 問(wèn)題
1.
如何使頁(yè)面不易錯位？2.
如何避免設置好的樣式被需求方改掉？3.
如何取消flash控件激活？4.
如何使網(wǎng)頁(yè)背景全屏居中？5.
JS效果庫 ● 解決方案
1.如何使頁(yè)面不易錯位？
a、在頁(yè)面中少用熱點(diǎn)鏈接。
b、頁(yè)面中內外嵌套的表格的尺寸要匹配
2.如何避免設置好的樣式被需求方改掉？
a、對內容比較多的文字做成可編輯可擴展的的，以方便需求方修改和編輯。
b、需要運營(yíng)人員自己編輯文字的地方，文字的style設置盡量放在TD里面，
3.如何取消flash控件激活？
采用JS調用的方法。代碼如下：
<script language="JavaScript"type="text/javascript">flash("top.swf",'100%','315',"Transparent")</script>
4.如何使網(wǎng)頁(yè)背景全屏居中？
代碼如下：
<div style="width:100%;background:url(http://i02.c.aliimg.com/news/upload/swfw/px/top1_1216198121972.jpg) center no-repeat;height:83px"></div>
5.JS效果庫
a、向上滾動(dòng)：
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
<li>看這個(gè)向上滾動(dòng)的代碼</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數值越大，速度越慢
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML;
demo.scrollTop=demo.scrollHeight;
function MarqueeUp(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo2.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(MarqueeUp,speed);
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(MarqueeUp,speed);}
</script>
b、向下滾動(dòng)：
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
<li>看這個(gè)向下滾動(dòng)的代碼</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數值越大，速度越慢
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML;
demo.scrollTop=demo.scrollHeight;
function MarqueeDown(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(MarqueeDown,speed);
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(MarqueeDown,speed);}
</script>
c、向右滾動(dòng)：
<div id="demo" style="overflow:hidden;height:90px;width:210px; border:1px solid blue;">
<div id="demo1">
<table cellspacing="0">
<tr>
<td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td><td><img src="1207014080942.jpg" height="84" width="64"></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數值越大，速度越慢
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo.scrollLeft=demo.scrollWidth
function MarqueeRight(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(MarqueeRight,speed);
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(MarqueeRight,speed);}
</script>
d、向左滾動(dòng)：
<div id="demo" style="overflow:hidden;height:301px;width:312px; border:1px solid blue;">
<div id="demo1">
<table width="312" height="301" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="103" height="146"><img src="images/cuxiao_08.jpg" width="103" height="146" alt=""></td>
<td width="105"><img src="images/cuxiao_09.jpg" width="105" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td width="104"><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
</tr>
<tr>
<td height="155"><img src="images/cuxiao_14.jpg" width="103" height="155" alt=""></td>
<td><img src="images/cuxiao_15.jpg" width="105" height="155" alt=""></td>
<td><img src="images/cuxiao_16.jpg" width="104" height="155" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
<td><img src="images/cuxiao_10.jpg" width="104" height="146" alt=""></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數值越大，速度越慢
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
function MarqueeLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(MarqueeLeft,speed);
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(MarqueeLeft,speed);}
</script>
