頁面常見問題及解決方案
● 問題
1.
如何使頁面不易錯位?2.
如何避免設(shè)置好的樣式被需求方改掉?3.
如何取消flash控件激活?4.
如何使網(wǎng)頁背景全屏居中?5.
JS效果庫 ● 解決方案
1.如何使頁面不易錯位?
a、在頁面中少用熱點鏈接。
b、頁面中內(nèi)外嵌套的表格的尺寸要匹配
2.如何避免設(shè)置好的樣式被需求方改掉?
a、對內(nèi)容比較多的文字做成可編輯可擴展的的,以方便需求方修改和編輯。
b、需要運營人員自己編輯文字的地方,文字的style設(shè)置盡量放在TD里面,
3.如何取消flash控件激活?
采用JS調(diào)用的方法。代碼如下:
<script language="JavaScript"type="text/javascript">flash("top.swf",'100%','315',"Transparent")</script>
4.如何使網(wǎng)頁背景全屏居中?
代碼如下:
<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、向上滾動:
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
<li>看這個向上滾動的代碼</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數(shù)值越大,速度越慢
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、向下滾動:
<div id="demo" style="overflow:hidden;height:100px;width:210px; border:1px solid blue;">
<div id="demo1">
<ul style="margin:0px; padding:0px;">
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
<li>看這個向下滾動的代碼</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script style="text/javascript">
var speed=40;//數(shù)值越大,速度越慢
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、向右滾動:
<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;//數(shù)值越大,速度越慢
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、向左滾動:
<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;//數(shù)值越大,速度越慢
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>