QQ 1640076782

2014年07月25日

jQuery 几种常见的滚动

Filed under: 英语网站设计 — 标签: — limeng @ 9:45 上午

1. 带箭头左右滚动-缓动 不限制图片数

function $get(id){return document.getElementById(id)}; //不可少

var MarqueeDiv2Control=new Marquee(“MarqueeDiv2″); //箭头控制滚动方向、加速及鼠
标拖动实例
MarqueeDiv2Control.Direction=”left”;
MarqueeDiv2Control.Step=1;
MarqueeDiv2Control.Width=477;
MarqueeDiv2Control.Height=145;
MarqueeDiv2Control.Timer=20;
MarqueeDiv2Control.ScrollStep=1; //若为-1则禁止鼠标控制实例
MarqueeDiv2Control.Start();
$get(“LeftButton2″).onmouseover=function(){MarqueeDiv2Control.Direction=2};
$get(“LeftButton2″).onmouseout=$get(“LeftButton2″).onmouseup=function()
{MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};
$get(“LeftButton2″).onmousedown=$get(“RightButton2″).onmousedown=function()
{MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep+3};
$get(“RightButton2″).onmouseover=function(){MarqueeDiv2Control.Direction=3};
$get(“RightButton2″).onmouseout=$get(“RightButton2″).onmouseup=function()
{MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};
箭头控制滚动方向、加速及鼠标拖动,通用不间断滚动JS封装类
此js缺点是需要修改包含所有li的div宽度,如果宽度不适当,会造成不能滚动

2. 一段文字或图片,循环向上滚动

var demo = document.getElementById(“demo”);
var demo1 = document.getElementById(“demo1″);
var demo2 = document.getElementById(“demo2″);
var speed=30; //滚动速度值,值越大速度越慢
var nnn=200/demo1.offsetHeight;
for(i=0;i“+ demo1.innerHTML}
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的
目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器

这个方法比较简单,一般适用于一段文字循环向上滚动

3. 箭头控制左右,不限制张数,不间断滚动,用法简单

这种滚动有一点就是不平滑
jQuery(function() {
jQuery(‘#pro’).jCarouselLite({
visible:7,
scroll:2,
speed:300,
btnPrev:’#pro_right’,
btnNext:’#pro_left’,
auto:4000,
circular:true
}
这里可以控制每次滚动张数,滚动时间,显示图片数等