您的位置:首页 > Web前端 > JQuery

jquery 实现无间图片文字向上滚动效果

2013-09-05 20:24 1001 查看
以前我们都是用js来实现图片或文字滚动,今天我们来用jquery做一个实现。
/**
* author junru
* create time author
* version 0.1
* rely on: jquery(/share/js/jquery.js) 1.3.2+
* description: used this for cache .
* example :
if(pathname=="/user/test.html"){
init.run = function(){
alert("test");
};
}
**/



function _init(){
this.start = function(){
if(this.run instanceof Object){
this.run();
}
}
}
var init = new _init();
$(document).ready(function(){
init.start();
});
var pathname = document.location.pathname;
// 首页 js 开始
if(pathname=="/index.net" || pathname=="/" ||pathname == "/index.html"){
var speed=30;
var dem;
var dem1;
var dem2;
Marquee =function(){
if(dem.scrollTop==319){
dem.scrollTop = 0;
clearInterval(MyMar1);
setTimeout(function(){MyMar1=setInterval(Marquee,speed);}, 3000);
}
if(dem2.offsetTop-dem.scrollTop<=0){
dem.scrollTop-=dem1.offsetHeight;
}else{
dem.scrollTop++
}
if(dem.scrollTop % 80 ==0){
clearInterval(MyMar1);
setTimeout(function(){MyMar1=setInterval(Marquee,speed);}, 3000);
}
}
var MyMar1=null;
var showDiv_1 = function(id){
var s=id.charAt(1);
$(".focus_menu").each(function(){
i = $(this).attr("id");
$("#c"+i).hide();
$(this).addClass("normal_menu_d");
$(this).removeClass("focus_menu");
});
$("#"+id).show();
$("#"+s).addClass("focus_menu");
}
jQuery(document).ready(function(){
jQuery("#menu_head td[sub]").mouseo教程ver(function(){
jQuery("#menu_head td[sub]").removeClass();
jQuery(".mainbg").hide();
var tmpArr = jQuery(this).attr("sub").split("_");
jQuery(this).addClass("focus_menu_"+tmpArr[2]);
jQuery("#" + jQuery(this).attr("sub")).show();
});
});
var counts = 4;
var nnn = 1;
var customersimages = new Array();
var customersimage_alts = new Array();
customersimages[1]= 'images/friends01.gif';
customersimages[2]= 'images/friends02.gif';
customersimages[3]= 'images/friends03.gif';
customersimages[4]= 'images/friends04.gif';
customersimage_alts[1] = "中国站长站";
customersimage_alts[2] = "中顺集团";
customersimage_alts[3] = "北京师范大学";
customersimage_alts[4] = "百度";
changeImg = function() {
$("#custermerImg").fadeOut("slow",function(){
document.getElementById("custermerImg").src=customersimages[nnn];
document.getElementById("custermerImg").alt=customersimage_alts[nnn];
$("#custermerImg").fadeIn("slow");
nnn++;
if(nnn>counts){
nnn = 1;
}
ttt = setTimeout('changeImg()', 5000);
});
}

changeimg =function(n) {
nn = n;
window.clearInterval(ttt);
changeImg();
}

moveingimg = function(){
dem=document.getElementById("certpic");
dem2=document.getElementById("dem3");
dem1=document.getElementById("dem2");
setTimeout(function(){MyMar1=setInterval(Marquee,speed);}, 1500);
$("#dem").onmouseover=function() {clearInterval(MyMar1)}
$("#dem").onmouseout=function() {
clearInterval(MyMar1);
if(dem.scrollTop % 80 != 0) MyMar1=setInterval(Marquee,speed);
}
}
init.run = function(){
$(document).ready(function(){$("#query").focus();});
changeImg();
moveingimg();
};

jQuery(document).ready(function(){
var mainbg = jQuery(".mainbg")
});
}
//首页JS 结束
//虚拟主机首页 /vhost/index.net
if(pathname=="/vhost/index.net" ||pathname=="vhost/"){
}
//虚拟主机首页 /vhost/index.net 结束
html代码
<div class="customerMain">
<div class=cert id=certpic style="height:82px; width:218px; margin:0px auto; overflow:hidden;text-align:center">
<div id=dem2>
<a href=/aboutus/cert.php教程 target=_blank><img src=images/cert0.gif border="0"/></a>
<a href=/associate/cnnic_cer.net target=_blank><img src=images/cert01.gif height=80 border="0"/></a>
<a href=/aboutus/cert.php target=_blank><img src=images/cert002.gif border="0"/></a>
<a href=/associate/credit_king.net target=_blank><img src=images/cert03.gif border="0"/></a>
<a href=/aboutus/cert.php target=_blank><img src=images/cert0.gif border="0"/></a>
</div>
<div id=dem3></div>
</div>
</div>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: