前台制作与脚本 « Zen's 记事

文章关键字 ‘前台制作与脚本’

很好的单行滚动调用函数版

2009年08月31日，星期一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> code.js.cn </title>
<style>
a{display:block;font-size:15px;line-height:18px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;}
.shell{
  background:url(http://bbs.blueidea.com/images/common/xml.gif) no-repeat 4px 5px;
  border:1px solid #aaa;
  width:400px;
  padding:3px 2px 2px 20px;
}
.core{
  height:18px;
  overflow:hidden;
}
</style>
</head>
<body>
<div class="shell">
  <div id="div1" class="core">
    <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a>
    <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a>
    <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a>
    <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a>
    <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a>
    <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a>
  </div>
</div>
<p></p>
<div class="shell">
  <div id="div2" class="core">
    <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a>
    <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a>
    <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a>
    <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a>
    <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a>
    <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a>
  </div>
</div>
<p></p>
<div class="shell">
  <div id="div3" class="core">
    <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a>
    <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a>
    <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a>
    <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a>
    <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a>
    <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a>
  </div>
</div>
<p></p>
<div class="shell">
  <div id="div4" class="core">
    <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a>
    <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a>
    <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a>
    <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a>
    <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a>
    <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a>
  </div>
</div>
<p></p>
<div class="shell">
  <div id="div5" class="core">
    <a href="javascript:">请教高手帮我看下这段代码 FLASH显示不了</a>
    <a href="javascript:">请教在UTF-8编辑下的符号显示问题 </a>
    <a href="javascript:">jquery做的一个滑动效果,不知如何增加延迟,现在太灵敏了</a>
    <a href="javascript:">技术研究-QQ09版按钮渐显渐隐的由来 </a>
    <a href="javascript:">javascript读取Json数据并分页显示，支持键盘和滚轮翻页 </a>
    <a href="javascript:">腾讯网奇怪的PNG文件，拜师以求解惑</a>
    <a href="javascript:">更新lhgdialog-ver2.0.1弹出窗口组件 2009-7-18 </a>
  </div>
</div>
</body>
<script>
function myGod(id,w,n){
  var box=document.getElementById(id),can=true,w=w||1500,fq=fq||10,n=n==-1?-1:1;
  box.innerHTML+=box.innerHTML;
  box.onmouseover=function(){can=false};
  box.onmouseout=function(){can=true};
  var max=parseInt(box.scrollHeight/2);
  new function (){
    var stop=box.scrollTop%18==0&&!can;
    if(!stop){
      var set=n>0?[max,0]:[0,max];
      box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n;
    };
    setTimeout(arguments.callee,box.scrollTop%18?fq:w);
  };
};
myGod('div1',10);
myGod('div2',10,-1);
myGod('div3',500,-1);
myGod('div4',500);
myGod('div5',1500,-1);
</script>
</html>

标签：前台制作与脚本
发布在网络生活 | 没有评论 »

符合w3c标准的向上不间断滚动代码!

2009年02月2日，星期一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>符合w3c标准的向上不间断滚动代码</title>
<style type="text/css">
<!–
a{background:#FFF; color:#333;}
a:hover{background:#FFF;color: #C00;}
#demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;}

–>
</style>

</head>
<body >

<div id="demo">
<div id="demo1">
<ul>
    <li><a href="1" title="三列自适应宽度液态布局│Three Column Liquid Layouts">三列自适应宽度液态布局│Three Column Liquid Layouts </a></li>
    <li><a href="1" title="Internet Explorer 7 对CSS的兼容–Box Model Changes">Internet Explorer 7 对CSS的兼容–Box Model Changes </a></li>
    <li><a href="2" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li>
    <li><a href="2" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">为不同的浏览器载入不同CSS的二种方法CSS Browser Selector </a></li>
    <li><a href="2" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li>
    <li><a href="http://www.stunc.cn" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li>
    <li><a href="1" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
    <li><a href="2" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
    <li><a href="2" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
    <li><a href="2" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li>
</ul>
</div>
<div id="demo2"> </div>
<script type="text/javascript">
var speed=40;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('demo1');
var FGDemo2=document.getElementById('demo2');
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>

</body>
</html>

标签：前台制作与脚本
发布在网络生活 | 没有评论 »

根据浏览器版本执行不同语句<!–[if –>

2008年09月15日，星期一

屈服了各个浏览器了…

除IE外都可识别

标签：前台制作与脚本 , 浏览器
发布在网络生活 | 没有评论 »

上下滚动符合dtd下的ff ie6 7

2008年07月1日，星期二

标签：前台制作与脚本 , 无间隙, 滚动
发布在网络生活 | 没有评论 »

经典的图片无缝滚动,点击向左向右按钮还可以控制方向

2008年06月26日，星期四

经典的图片无缝滚动,点击向左向右按钮还可以控制方向

向左向右

标签：前台制作与脚本
发布在网络生活 | 没有评论 »

CSS解决未知高度垂直居中

2008年06月4日，星期三

重复转一次

原文标题：Vertical Centering in CSS
副标题：Yuhu's Definitive Solution with Unknown Height

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 (全文…)

标签：前台制作与脚本
发布在网络生活 | 没有评论 »

IE上测试工具IEDevToolBarSetup

2008年01月4日，星期五

虽然不及FIREBUG，但IE带IEDevToolBarSetup可以是一个补充

自己备份

似乎maxthon是无效带，我一般都在IE7上看，有IE7干嘛还用MAXTHON呢？要快，如opear，要玩新奇的，如FIREFOX……

浏览器浏览，也很多学问。

IEDevToolBarSetup.rar

标签：iedevtoolbar, 前台制作与脚本
发布在网络生活 | 没有评论 »

WEB2.0的单手定则 —— Twinsen Liang

2008年01月2日，星期三

转下彪叔的文章

http://www.twinsenliang.net/web/20080101.htm WEB2.0的单手定则

之前的一篇关于CSS的文章不太被很多人了解，结果好一段时间都在沉思关于CSS一块的文章应该怎么写，至今尚未得出一个让自己满意的答案。新的一年了，回首之前的日子；公司里面一大堆东西在忙差不多有一个月没有写过有关技术的文章，也很久没有关注过群里的事情（屏蔽了好几个）。这两天回到群里面看，发觉质量下降了；闲聊的人越来越多，谈论乱78糟事情的人也越来越多了。……看来是时候该写一点东西出来，鼓舞一下网站重构人员的士气和给大家树立一个明确的目标。 (全文…)

标签：Web2.0, 前台制作与脚本 , 网站重构
发布在网络生活 | 没有评论 »

Zen's 记事

文章关键字 ‘前台制作与脚本’

很好的单行滚动调用函数版

符合w3c标准的向上不间断滚动代码!

根据浏览器版本执行不同语句<!–[if –>

上下滚动符合dtd下的ff ie6 7

经典的图片无缝滚动,点击向左向右按钮还可以控制方向

CSS解决未知高度垂直居中

IE上测试工具IEDevToolBarSetup

WEB2.0的单手定则 —— Twinsen Liang

分类目录

文章索引模板

最近评论

功能