图片连续滚动(缓冲，一停一顿效果)，可左右翻滚

作者:青锋幽灵日期:2008-09-12 10:31

样式表代码（scroll.css）：

CSS代码

* {margin:0;padding:0;}
body {width:370px;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:underline;color:#f00;}
ul,li {float:left;width:100%;list-style-type:none;}
h3,h3 a {font-size:12px;font-weight:normal;font-family:"宋体",Verdana;}
.bc {height:90px;clear:both;overflow:hidden;padding:3px 15px 0 15px;}
.bc a.scroll {width:12px;height:46px;overflow:hidden;text-indent:-100px;margin-top:5px;background:#333;}
.bc a.s1 {float:left;}
.bc a.s2 {float:rightright;}
#scroll1 {padding:5px 8px 7px 8px;}
.bc div.scroll {float:left;position:relative;width:318px;left:6px;overflow:hidden;}
div.scroll ul {width:8000%;}
div.scroll ul li {width:106px;padding:0 0 2px 0;text-align:center;}
div.scroll ul li img {clear:both;width:90px;height:60px;border:1px solid #ccc;margin:0 auto;}
div.scroll ul li h3 {height:20px;line-height:20px;overflow:hidden;}
div.scroll ul li h3,div.scroll ul li h3 a {color:#c00;font-family:"宋体";}

效果JS代码（scroll.js）：

JavaScript代码

function scroll_initialize(Id){
var self =this;
var obj = document.getElementById(Id);
if(obj.getElementsByTagName('li').length==0)return;
var links = obj.getElementsByTagName('a');
var a = links[0];
var b = links[links.length-1];
var ul = obj.getElementsByTagName('ul')[0];
var div = obj.getElementsByTagName('div')[0];
var li_width = obj.getElementsByTagName('li')[0].offsetWidth;
var li_count = obj.getElementsByTagName('li').length;
var ul_width = li_width * li_count;
this.speed = 2000;
this.mar = null;
this.doSlide = function(n,t,d,c){
var timers=new Array(n);
var x=div.scrollLeft;
for(var i=0;i<n;i++)(function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
timers[i]=setTimeout(function(){
if(d==0){
if(ul_width-div.scrollLeft<=0){
div.scrollLeft-=ul_width;
}else{
div.scrollLeft=x+Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
}
}else{
if(div.scrollLeft<=0){
}else{
div.scrollLeft=x-Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));
}
}
},(i+1)*t);
})();
if(ul_width-div.scrollLeft<=0 || (div.scrollLeft % li_width != 0 && div.scrollLeft != 0)){
div.scrollLeft=0;
}
}
this.istop=function(){
clearInterval(self.mar);
};
this.istart=function(){
self.mar = setInterval(function(){self.doSlide(20,40,0,1);},self.speed);
};
this.initialize = function(){
ul.innerHTML+=ul.innerHTML;
ul.style.width = parseInt(ul_width * 2) + 'px';
a.onclick=function(e){self.doSlide(20,40,0,3);return false;};
a.onfocus=function(){this.blur();};
a.onmouseout=function(){self.istart();};
a.onmouseover=function(){self.istop();};
b.onclick=function(e){self.doSlide(20,40,1,3);return false;};
b.onfocus=function(){this.blur();};
b.onmouseout=function(){self.istart();};
b.onmouseover=function(){self.istop();};
div.onmouseout=function(){self.istart();};
div.onmouseover=function(){self.istop();};
this.istart();
};
this.initialize();
}

页面HTML代码(scroll.html)：

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>doc1</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="scroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scroll.js"></script>
</head>
<body>
<div class="bc" id="scroll1">
<a href="#left" class="scroll s1" title="向左滚动">向左滚动</a>
<div class="scroll">
<ul>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111627130.jpg" /></a>
<h3><a href="#">魔幻《天地OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h68/img200809091601330.jpg" /></a>
<h3><a href="#">《名将三国》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051655460.jpg" /></a>
<h3><a href="#">变型金刚OL</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051653330.jpg" /></a>
<h3><a href="#">盛大《八门OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051650450.jpg" /></a>
<h3><a href="#">回合制《穿越OL》</a></h3>
</li>
<li>
<a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111633050.jpg" /></a>
<h3><a href="#">卡通网页游戏乐土</a></h3>
</li>
</ul>
</div>
<a href="#right" class="scroll s2" title="向右滚动">向右滚动</a>
</div>
</body>
</html>

效果预览：

效果预览

代码下载：点击下载

类别: Javascript | 引用: 0 | 评论: 2 | 阅读: 2394 | 打印 | 打包

获取js后所带的参数，如：a.js?a=value1&b=value2

作者:青锋幽灵日期:2008-09-10 11:23

将以下代码保存为：a.js

JavaScript代码

function querystring(){
this.params = new Object();
this.initialize = function(){
var param=this.paramstring();
if(param.length == 0) return;
if(param.substring(0,1)=='?'){
param=param.substring(1);
}
param = param.replace(/\+/g, ' ');
var args = param.split('&');
for (var i=0;i<args.length;i++){
var value;
var pair = args[i].split('=');
var name = unescape(pair[0]);
if (pair.length == 2)
value = unescape(pair[1]);
else
value = name;
this.params[name] = value;
}
};
this.get = function(key, defvalue){
return this.params[key]==null?defvalue:this.params[key];
};
this.paramstring = function(){
var col=document.getElementsByTagName("script");
var jsrc=col.item(col.length-1).src;
var i=jsrc.indexOf("?");
var words=jsrc.substr(i+1,jsrc.length);
return(words);
};
this.initialize();
}
var q = new querystring();
var a = q.get('a','defaultvalue'); //defaultvalue是默认值
var b = q.get('b','defaultvalue'); //defaultvalue是默认值

调用：

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="a.js?a=baidu&b=google"></script>
<title>无标题文档</title>
</head>
<body>
<!--
　　js运行结果将得到：
　　a=baidu
　　b=google
-->
</body>
</html>

是不是很有趣呢？呵呵～～

标签: javascript 参数

类别: Javascript | 引用: 0 | 评论: 3 | 阅读: 1739 | 打印 | 打包

隐藏文件名后缀的URL Rewrite

作者:青锋幽灵日期:2008-09-10 02:10

我看网上有很多此类功能，当然asp.net自身很容易实现，但是其它的要实现会出现一点小问题，本人写了一个，经过测试没有任何问题，应该也支持apache。

代码如下：

RewriteRule ^(.*)/([\w\-]+)\?(.*)$ $1/$2\.asp\?$3
RewriteRule ^(.*)/([\w\-]+)$ $1/$2.asp

标签: URLRewrite

类别: 正则表达式 | 引用: 0 | 评论: 2 | 阅读: 3398 | 打印 | 打包

一天弹出一次的广告JS代码

作者:青锋幽灵日期:2008-09-10 02:02

有一个页面有两条图片广告，当用户访问这个页面时按十分之一的概率随机点击两个广告中的一个广告，当该用户已经弹出过广告则一天内不再弹出。

主函数：

name：cookie名称
urls：广告地址数组
width：宽度
height：高度

JavaScript代码

function popad(name,urls,width,height)
{
if(!name || !urls) return false;
width = width ? width : 300;
height = height ? height : 300;
var cookieString = new String(document.cookie);
var cookieName = name+'=';
var pos = cookieString.indexOf(cookieName);
if (pos <0){
if(rand(10)==1) {
url = urls[rand(urls.length)-1];
window.open(url,'hello','location=yes,resizable=yes,width='+width+',height='+height);
var now = new Date();
expiredate = new Date(now.getYear(),now.getMonth(),now.getDate(),23,59,59);
document.cookie = name+'=opened;expires='+ expiredate.toGMTString();
}
}
}

随机函数：

返回的值为1~number的值。

JavaScript代码

function rand(number) {
return Math.floor(Math.random() * number + 1);
}

调用：

JavaScript代码

adurls = new Array('http://www.163.com','http://www.cnfol.com');
popad('popad', adurls, 800, 600);

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 1874 | 打印 | 打包

SQLServer 通用分页存储过程(使用游标)

作者:青锋幽灵日期:2008-09-10 01:58

SQL代码

----------------------------------------------------------------------
-- 通用分页存储过程
----------------------------------------------------------------------
CREATE PROCEDURE [dbo].[cmsdream_SP_MultiPage](
@sql varchar(8000)='',
@PageSize int=1,
@CurrentPage int=1,
@RecordCount int=0 output,
@PageCount int=1 output
)AS
if @PageSize < 1 set @PageSize = 1
if @CurrentPage < 1 set @CurrentPage = 1
begin
set nocount on
declare @p1 int,
@rowcount int
exec sp_cursoropen @p1 output,@sql,@scrollopt=1,@ccopt=1,@rowcount=@rowcount output
set @PageCount = ceiling(1.0 * @rowcount / @PageSize)
set @CurrentPage = (@CurrentPage - 1) * @PageSize + 1
set @RecordCount = @rowcount
exec sp_cursorfetch @p1, 16, @CurrentPage, @PageSize
set nocount off
end
GO

标签: 存储过程 sql 游标

类别: SQL Server | 引用: 0 | 评论: 0 | 阅读: 2368 | 打印 | 打包

Javacript+xml+DOM 浏览器兼容性问题

作者:青锋幽灵日期:2008-09-09 15:13

javacript中对xml dom的支持，与其他任何特性一样面临着浏览器兼容问题。

一 IE中的XML DOM
1.微软通过ActiveX的MSXML库提供了支持，通过：
var oXmlDom = new ActiveXObject("MSXML2.DOMDocument.5.0")得到一个XML DOM对象，这是在IE6中的，如果你的IE是更老版本的，可以使用下面的函数得到，如果你没有安装MSXML，将不能得到：

[code]
function createXMLDOM() {

var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",

[阅读全文]

标签: javascript xml dom

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 2104 | 打印 | 打包

一个简单的Ajax类

作者:青锋幽灵日期:2008-09-08 11:44

JavaScript代码

/**
14:21 2008-5-10
**/
function CMSDreamAjaxLib(){
/**//**
成员变量
*/
this.XMLHttpReq = null; //XML对象
this.method = "post"; //执行的方法(post/get)
this.url = ""; //异步调用的页面地址
this.responseText = ""; //异步返回的响应字符串
this.responseXML = ""; //异步返回的响应XML
this.failed = false; //创建对象错误标志
/**//**
事件区
*/
this.onLoading = function() {}; //正在发送请求
this.onLoaded = function() {}; //已经接收到全部响应内容
this.onInteractive = function() {}; //正在解析响应内容
this.onCompletion = function() {}; //响应内容解析完成
this.onError = function() {}; //异步错误处理事件
this.onFail = function() {}; //创建对象失败处理世界
/**//**
重置所有事件函数
*/
this.resetFunctions = function() {
this.onLoading = function() {};
this.onLoaded = function() {};
this.onInteractive = function() {};
this.onCompletion = function() {};
this.onError = function() {};
this.onFail = function() {};
};
/**//**
初始化函数(构造时自动初始化)
*/
this.init = function(){
if(window.XMLHttpRequest){
this.XMLHttpReq = new XMLHttpRequest();
}else if (window.ActiveXObject){
try{this.XMLHttpReq = new ActiveXObject("Msxml4.XMLHTTP");}
catch(e){
try{this.XMLHttpReq = new ActiveXObject("Msxml3.XMLHTTP");}
catch(e){
try{this.XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){
try{this.XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");}
catch(oc){this.failed=true;}
}
}
}
}
};
/**//**
发送请求函数
@param data 发送的数据
@example send("id=1");
*/
this.send=function(data){
var self=this;
if(this.method=="post") {
this.XMLHttpReq.open(self.method,self.url,true);
}else{
this.XMLHttpReq.open(self.method,self.url+"?"+encodeURI(data),true);
}
//添加消息响应头
this.XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
//异步回调函数
this.XMLHttpReq.onreadystatechange = function(){
//对象未创建
if (self.failed) {
self.onFail();
return;
}
//消息响应标志
switch (self.XMLHttpReq.readyState) {
case 1:{
self.onLoading();
break;
}
case 2:{
self.onLoaded();
break;
}
case 3:{
self.onInteractive();
break;
}
case 4:{
self.responseText = self.XMLHttpReq.responseText;
self.responseXML = self.XMLHttpReq.responseXML;
self.onCompletion();
break;
}
}
};
if(this.method=="post"){
this.XMLHttpReq.send(data); //发送请求
}else{
this.XMLHttpReq.send(); //发送请求
}
};
this.abort=function(){
this.XMLHttpReq.abort();
}
this.close=function(){
this.XMLHttpReq=null;
}
this.init();
}

标签: ajax javascript

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 1417 | 打印 | 打包

动态加载样式元素的函数(兼容IE,FireFox,Opera)

作者:青锋幽灵日期:2008-09-07 11:34

如题，目前只对IE，FireFox，Opera这三种浏览器的兼容性进行过测试，其它浏览器还未测试。

有兴趣的朋友可以研究一下，应该也没问题的。

JavaScript代码

function AttachStyle(styDom, styCss, styId){
var istyle = styDom.createElement('style');
istyle.setAttribute("type", "text/css");
if(styId!=null){if(!document.getElementById(styId)){istyle.setAttribute("id", styId);}}
if (istyle.styleSheet){
istyle.styleSheet.cssText=styCss;
}else{
istyle.appendChild(styDom.createTextNode(styCss));
}
styDom.getElementsByTagName("head")[0].appendChild(istyle);
}

应用代码：

JavaScript代码

if(!document.getElementById('attach-css-1')){
var iCss='';
iCss+='.test-style1 {font-size:18px;color:#f60;}';
iCss+='.test-style2 {font-size:16px;color:#f60;}';
iCss+='.test-style3 {font-size:14px;color:#f60;}';
iCss+='.test-style4 {font-size:12px;color:#f60;}';
AttachStyle(document,iCss,'attach-css-1');
}
/**
大家可以测试一下 test-style1,test-style2,test-style3 这三个样式变化了吗？
**/

标签: 动态加载样式 javascript

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 2098 | 打印 | 打包

图片连续滚动(缓冲，一停一顿效果)，可左右翻滚

作者:青锋幽灵日期:2008-09-12 10:31

获取js后所带的参数，如：a.js?a=value1&b=value2

作者:青锋幽灵日期:2008-09-10 11:23

隐藏文件名后缀的URL Rewrite

作者:青锋幽灵日期:2008-09-10 02:10

一天弹出一次的广告JS代码

作者:青锋幽灵日期:2008-09-10 02:02

SQLServer 通用分页存储过程(使用游标)

作者:青锋幽灵日期:2008-09-10 01:58

Javacript+xml+DOM 浏览器兼容性问题

作者:青锋幽灵日期:2008-09-09 15:13

一个简单的Ajax类

作者:青锋幽灵日期:2008-09-08 11:44

动态加载样式元素的函数(兼容IE,FireFox,Opera)

作者:青锋幽灵日期:2008-09-07 11:34

类别

日历

最新日志

归档

友情鏈結

青鋒幽靈其他博客

搜索

作者:青锋幽灵 日期:2008-09-12 10:31

作者:青锋幽灵 日期:2008-09-10 11:23

作者:青锋幽灵 日期:2008-09-10 02:10

作者:青锋幽灵 日期:2008-09-10 02:02

作者:青锋幽灵 日期:2008-09-10 01:58

作者:青锋幽灵 日期:2008-09-09 15:13

作者:青锋幽灵 日期:2008-09-08 11:44

作者:青锋幽灵 日期:2008-09-07 11:34

类别

日历

最新日志

归档

友情鏈結

青鋒幽靈其他博客

搜索

作者:青锋幽灵日期:2008-09-12 10:31

作者:青锋幽灵日期:2008-09-10 11:23

作者:青锋幽灵日期:2008-09-10 02:10

作者:青锋幽灵日期:2008-09-10 02:02

作者:青锋幽灵日期:2008-09-10 01:58

作者:青锋幽灵日期:2008-09-09 15:13

作者:青锋幽灵日期:2008-09-08 11:44

作者:青锋幽灵日期:2008-09-07 11:34