常见的页面效果，相关的js代码

1、焦点图

$(document).ready(function(){
var i=0;

var autoChange= setInterval(function(){

if(i<$(".hdp li").length-1){
i++;
}else{
i=0;
}
changeTo(i) ;

},1500);

$(".hdp").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
i=item;
},
function(){
autoChange= setInterval(function(){
if(i<$(".hdp li").length-1){
i++;
}else{
i=0;
}
changeTo(i) ;
},1500);
});
});

function changeTo(num){
$(".hdp").find("li").removeClass("hdOn").hide().eq(i).fadeIn().addClass("hdOn");
$(".num").find("li").fadeIn().removeClass("bo").eq(i).addClass("bo");
}

/*$(".hd").hover(function(){
$(this).find(".next,.prev").fadeTo("show",0.1);

},function(){
$(this).find(".next,.prev").hide();
}
)*/
});

相关的html代码：

<div class="js" >
<div class="hd">
<ul class="hdp">
<li class="hdOn"><a href="#" target="_blank"><img src="data:images/0.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/3.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/4.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/5.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/6.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="data:images/7.jpg" /></a></li>
</ul>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
<div >
<ul class="num">
<li class="bo">1</li>
<li >2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</div>

相关的css 代码：

.hd{width:660px;height: 280px; position: relative; overflow:hidden; float:left; }
.hdOn{display: block;}
.hd .num { overflow:hidden; height: 25px; position: absolute; bottom:12px; left: 15px; zoom:1; z-index:3;}
.hd .num li{ width: 25px; height: 25px; line-height: 25px; text-align: center; font-weight: 400; font-family: "宋体", Arial; color: #FFFFFF; background: #444444; margin-right: 10px; border-radius:50%; cursor:pointer; float: left; }
.hd .num .bo{background: yellow;}
.hdOn{display: block;}

.hd .prev,
.hd .next { display: none; width: 40px; height: 100px; background: url(../images/btn.png) no-repeat; position: absolute; top: 115px;}
.hd .prev { left: 0; }
.hd .next { right: 0; background-position: right }

2、选择卡

根据相关的数组，变换内容
var oDatas=[
"成绩优秀，经常考全校第一",
"爱哭，不喜欢",
"非常调皮",

];
var sHtml="";

$(document).ready(function(){
$("#lb").find("li").hover(function(){
$("#lb").find("li").attr('class','');
$("#nr").html();
$(this).addClass("lon");
sHtml="<p>"+oDatas[$(this).index()] +"</p>";
$("#nr").html(sHtml);
});
});

3、无缝滚动

/*向上滚动*/

var speed=60;

var oClient1=document.getElementById('client1');
var oClient2=document.getElementById('client2');
var oClient3=document.getElementById('client3');
function Marquee1(){
if(oClient2.offsetHeight-oClient1.scrollTop<=0){
oClient1.scrollTop-=oClient2.offsetHeight;
}else{
oClient1.scrollTop++;

}

}

var MyMar1=setInterval(Marquee1,speed);
oClient1.onmouseover=function() {clearInterval(MyMar1)};
oClient1.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)};

/* 向左滚动*/

$(function (){
//奖项滚动
if($("#awtab").length > 0 && $("#awtab1").length > 0 && $("#awtab2").length > 0){
scrollLeftFunByCommon.init(15,document.getElementById('awtab'),document.getElementById('awtab1'),document.getElementById('awtab2'));
}
});

var scrollLeftFunByCommon={
_speed:40,
_container0:null,
_container1:null,
_container2:null,

init:function(speed,container0,container1,container2){
if(typeof(speed)!='undefined' || !isNaN(speed)){
this._speed=speed;
}
this._container0=container0;
this._container1=container1;
this._container2=container2;
this._container2.innerHTML=this._container1.innerHTML;
var _this=this;
var Marquee1=function(){
if(_this._container2.offsetWidth-_this._container0.scrollLeft<=0){
_this._container0.scrollLeft-=_this._container1.offsetWidth;
}
else{
_this._container0.scrollLeft++ ;
}
} ;
var MyMar1=setInterval(Marquee1,this._speed);
this._container0.onmouseover=function() {clearInterval(MyMar1);};
this._container0.onmouseout=function() {MyMar1=setInterval(Marquee1,_this._speed);};
}
};

相关的html代码：

/*向上*/

<div id="client1" class="client1" style="height:100px;">
<div id="client2">
<ul class="three" >
<li><a >4</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >5</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >6</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >5</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >6</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
</ul>
</div>
<div id="client3">
<ul class="three" >
<li><a >4</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >5</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >6</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >5</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
<li><a >6</a><span>用户名</span><span style="color:#fc8026">投资金额</span></li>
</ul>
</div>
</div>

/*向左*/

<div class="awards">
<div id="awtab1">
<a target="_blank" href="http://rihui158.cn/apply/?type=1new">
<ul class="jx-list-box clearfix">
<li class="j-x1">智选品牌大奖</li>
<li class="j-x2">最佳原油交易平台</li>
<li class="j-x3">最佳石油衍生品服务机构</li>
<li class="j-x4">上海石油业贸易场<br>最活跃交易商</li>
<li class="j-x5">最具知名度<br>上海原油投资公司</li>
<li class="j-x6">海外财经风云榜<br>[最受欢迎原油交易平台]</li>
<li class="j-x7">中国财经风云榜<br>[最佳综合服务提供企业]</li>
<li class="j-x8">中国财经风云榜<br>[最具营销影响力企业]</li>
<li class="j-x9">都市盛世大中华<br>超卓商誉品牌奖</li>
<li class="j-x10">领航杯贵金属行业<br>[最佳交易平台大奖]</li>
<li class="j-x11">金融服务年度<br>国际杰出企业荣誉大奖</li>
<li class="j-x12">金典奖之<br>[最具价值品牌]</li>
<li class="j-x13">中国石油交易服务<br>消费者满意第一品牌</li>
<li class="j-x14">品牌中国金投奖</li>
</ul>
</a>
</div>

<div id="awtab2">
<a target="_blank" href="http://rihui158.cn/apply/?type=1new">
<ul class="jx-list-box clearfix">
<li class="j-x1">智选品牌大奖</li>
<li class="j-x2">最佳原油交易平台</li>
<li class="j-x3">最佳石油衍生品服务机构</li>
<li class="j-x4">上海石油业贸易场<br>最活跃交易商</li>
<li class="j-x5">最具知名度<br>上海原油投资公司</li>
<li class="j-x6">海外财经风云榜<br>[最受欢迎原油交易平台]</li>
<li class="j-x7">中国财经风云榜<br>[最佳综合服务提供企业]</li>
<li class="j-x8">中国财经风云榜<br>[最具营销影响力企业]</li>
<li class="j-x9">都市盛世大中华<br>超卓商誉品牌奖</li>
<li class="j-x10">领航杯贵金属行业<br>[最佳交易平台大奖]</li>
<li class="j-x11">金融服务年度<br>国际杰出企业荣誉大奖</li>
<li class="j-x12">金典奖之<br>[最具价值品牌]</li>
<li class="j-x13">中国石油交易服务<br>消费者满意第一品牌</li>
<li class="j-x14">品牌中国金投奖</li>
</ul>
</a>
</div>
</div>
</div>

4、手风琴

$(document).ready(function(){

var $jt= $(".jia li:first");
$jt.animate({width:'300px'},300);
$(".jia li").click(function(){

if (!$(this).is(':animated')){

$(this).animate({width:'300px'},300).siblings().animate({width:'88px'},300);

}
});

});

相关的html代码：
<div class="js" >

<div class="jia" >
<ul >
<li><img src="data:images/0.jpg" /></li>
<li><img src="data:images/1.jpg" /></li>
<li><img src="data:images/2.jpg" /></li>
<li><img src="data:images/3.jpg" /></li>
<li><img src="data:images/4.jpg" /></li>
</ul>
</div>
</div>

5、登陆的验证码

相关的html代码

<input type="button"  readonly="readonly" onclick="createCode()" id="checkCode" class="code" />

js代码：

var code ; //在全局 定义验证码
function createCode()
{
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','wW','x','y','z');//所有候选组成验证码的字符，当然也可以用中文的

for(var i=0;i<codeLength;i++)
{

var charIndex = Math.floor(Math.random()*36); //随机产生一个1到36的数
code +=selectChar[charIndex];

}
//alert(code);
if(checkCode)
{
checkCode.className="code";
checkCode.value = code;
}

}

function validate ()
{
var inputCode = document.getElementById("yz").value;
if(inputCode.length <=0)
{
alert("请输入验证码！");
}
else if(inputCode != code )
{
alert("验证码输入错误！");
createCode();//刷新验证码
} else if(inputCode = code)
{
// $("#btn").click(function(){
var url='lg.php?user='+$("#user").val()+'&pass='+$("#pass").val()+'&sub=';
ajax(url, function (str){

if(str=='1'){
$(".login").css("display","none");
$("#btn").css("display","none");
$(".login-after").css("display","block");
$("#yong").html($("#user").val());
document.cookie=$("#user").val();

}else{
if(str=='0'){

alert("用户名或密码有误");

}
else{
alert("用户不存在");
}
}
// });
});
}

}

6、在线浮动的窗口

<!-- 在线浮动窗口-->
<div id="ad_online" style="z-index:1001; position:absolute;">
<a href="#" target="_blank" class="os_link"><img src="data:images/345.jpg">
</div>

<script type="text/javascript">
//在线漂浮窗口
(function(){
var x = 50,y = 60;
var xin = true, yin = true;
var step = 1 ;
var delay = 30;
var obj=document.getElementById("ad_online");
var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
function float() {
var L=T=0;
var R= clientWidth-obj.offsetWidth;
var B = clientHeight-obj.offsetHeight;
obj.style.left = x + document.body.scrollLeft+'px'; //底部的滚动条
obj.style.top = y + document.body.scrollTop+'px';
x = x + step*(xin?1:-1);
if (x < L) {xin = true; x = L};
if (x > R){ xin = false; x = R};
y = y + step*(yin?1:-1);
if (y < T) { yin = true; y = T };
if (y > B) { yin = false; y = B };
}
var itl= setInterval(float, delay)
obj.onmouseover=function(){clearInterval(itl)};
obj.onmouseout=function(){itl=setInterval(float, delay)};
})();

/*$(document).ready(function(){
var timer1 = setTimeout("foo()",500);

});
function foo(){
alert("尊敬的公司，感谢您的访问，本人初来上海，由于部分公司要求作品，本人初步做了一个粗糙的网站，很多功能尚未完善，还请见谅！谢谢！帐号：123456 密码：123456")
}
/* $("#btn").click(function(){
var url='lg.php?user='+$("#user").val()+'&pass='+$("#pass").val()+'&sub=';
ajax(url, function (str){

if(str=='1'){
$(".login").css("display","none");
$("#btn").css("display","none");
$(".login-after").css("display","block");
$("#yong").html($("#user").val());
}else{
if(str=='0'){

alert("用户名或密码有误");

}
else{
alert("失败");
}
}

});

});*/
</script>

7、向上滑动

$(document).ready(function(){
function initMenu() {
$('.box2 .xx_02').hide();
$('.box2 .xx_01').mouseover(
function() {
var checkElement = $(this).next();
if((checkElement.is('.xx_02')) && (!checkElement.is(':visible'))) {
$('.box2 .xx_02:visible').slideUp('slow');
checkElement.slideDown('slow');
return false;
}
}
);

$('.box2 .xx_02').mouseover(
function(){
$(this).show();
}
);
$('.box2 .xx_02').mouseout(
function(){
$(this).hide();
}
);

}
$(function() {initMenu();});
});

参考：石油财富12文件夹

8、页面随滚动条变化

$(document).ready(function(){
setInterval(function(){
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
if(scrollTop>1100 && scrollTop<1500){
$("#lc-box33").removeClass("lc-box33-1");
$("#lc-box33").addClass("lc-box33-2");

}else if( scrollTop>=1500 ){
$("#lc-box33").removeClass("lc-box33-2");
$("#lc-box33").addClass("lc-box33-3");

}
},500);

$("#next1").click(function(){
$("#lc-one").removeClass("dis").addClass("undis");
$("#lc-two").removeClass("undis").addClass("dis");
$("#lc-box31").removeClass("lc-nav1 lc-nav3 lc-nav4" ).addClass("lc-nav2");
});

});

9、QQ闪动的效果

$(document).ready(function(){
$(".bl").hover(function(){
setInterval(function(){banScroll();},900);
function banScroll(){
$(".bl").animate({
opacity:"1"
},150);

$(".bl").delay(300).animate({
opacity:"0"
},150);
}
});

});