未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
阿里页面常见问题及解决方案

2008.12.01

关注
页面常见问题及解决方案
● 问题
1.如何使页面不易错位?
2.如何避免设置好的样式被需求方改掉?
3.如何取消flash控件激活?
4.如何使网页背景全屏居中?
5.JS效果库
● 解决方案
1.如何使页面不易错位?
a、在页面中少用热点链接。
b、页面中内外嵌套的表格的尺寸要匹配
2.如何避免设置好的样式被需求方改掉?
a、对内容比较多的文字做成可编辑可扩展的的,以方便需求方修改和编辑。
b、需要运营人员自己编辑文字的地方,文字的style设置尽量放在TD里面,
3.如何取消flash控件激活?
采用JS调用的方法。代码如下:
<script language="JavaScript"type="text/javascript">flash("top.swf",'100%','315',"Transparent")</script>
4.如何使网页背景全屏居中?
代码如下:
<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;//数值越大,速度越慢
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;//数值越大,速度越慢
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;//数值越大,速度越慢
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;//数值越大,速度越慢
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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
按需加载图片(图片懒加载)
jQuery 图片切换,带标题和说明文字
仿迅雷首页flash幻灯效果代码
原生js实现图片切换
轮播图案例
图片浏览(附带样式+效果)
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!