jquery 文字向上滾動(dòng)在怎么寫

內(nèi)容 內(nèi)容 var oMarquee = document.getElementById("mq"); //滾動(dòng)對(duì)象 var iLineHeight = 25; //單行高度，像素 var iLineCount = $ForcastWeatherListFirst.Count; //實(shí)際行數(shù) var iScrollAmount = 1; //每次滾動(dòng)高度

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、磴口ssl等。為超過(guò)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的磴口網(wǎng)站制作公司

用jquery實(shí)現(xiàn)兩個(gè)li中的圖片并列無(wú)縫向上滾動(dòng)的代碼 沒(méi)有按鈕控制，鼠標(biāo)移上去停止?jié)L動(dòng)，離開開始滾動(dòng)。

下面的使用Jquery實(shí)現(xiàn)，使用的時(shí)候請(qǐng)引用Jquery.js，向上滾動(dòng)看看js那里提示修改left為up即可。

style?type="text/css"

.scrollleft{width:491px;?float:left;?padding-top:15px;}

.scrollleft?li{float:left;display:inline;width:195px;text-align:center;}

/style

script

$.fn.imgscroll?=?function(o){

var?defaults?=?{

speed:?40,

amount:?0,

width:?1,

dir:?"left"

};

o?=?$.extend(defaults,?o);

return?this.each(function(){

var?_li?=?$("li",?this);

_li.parent().parent().css({overflow:?"hidden",?position:?"relative"});?//div

_li.parent().css({margin:?"0",?padding:?"0",?overflow:?"hidden",?position:?"relative",?"list-style":?"none"});?//ul

_li.css({position:?"relative",?overflow:?"hidden"});?//li

if(o.dir?==?"left")?_li.css({float:?"left"});

//初始大小

var?_li_size?=?0;

for(var?i=0;?i_li.size();?i++)

_li_size?+=?o.dir?==?"left"???_li.eq(i).outerWidth(true)?:?_li.eq(i).outerHeight(true);

//循環(huán)所需要的元素

if(o.dir?==?"left")?_li.parent().css({width:?(_li_size*3)+"px"});

_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());

_li?=?$("li",?this);

//滾動(dòng)

var?_li_scroll?=?0;

function?goto(){

_li_scroll?+=?o.width;

if(_li_scroll??_li_size)

{

_li_scroll?=?0;

_li.parent().css(o.dir?==?"left"???{?left?:?-_li_scroll?}?:?{?top?:?-_li_scroll?});

_li_scroll?+=?o.width;

}

_li.parent().animate(o.dir?==?"left"???{?left?:?-_li_scroll?}?:?{?top?:?-_li_scroll?},?o.amount);

}

//開始

var?move?=?setInterval(function(){?goto();?},?o.speed);

_li.parent().hover(function(){

clearInterval(move);

},function(){

clearInterval(move);

move?=?setInterval(function(){?goto();?},?o.speed);

});

});

};

$(document).ready(function(){

$(".scrollleft").imgscroll({

speed:?40,????//圖片滾動(dòng)速度

amount:?0,????//圖片滾動(dòng)過(guò)渡時(shí)間

width:?1,?????//圖片滾動(dòng)步數(shù)

dir:?"left"???//?"left"?或?"up"?向左或向上滾動(dòng)

});

});

/script

div?class="scrollleft"

ul

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

li

a?href="#"img?src="images/img4.gif"?width="188"?height="106"?/div?class="mingcheng"該產(chǎn)品名稱/div/a

/li

/ul

/div

Jquery手機(jī)向上滑動(dòng)翻頁(yè)怎么實(shí)現(xiàn)

//聲明一個(gè)為0的變量做記錄值

doucument.body.addEvenetListener('touchstart',function(e){

//記錄下按下時(shí)的e.touches[0].clientY或者e.touches[0].pageY;

});

document.body.addEventListener('touchmove',function(e){

//獲取當(dāng)前e.touches[0].clientY或者e.touches[0].pageY 并且與之前記錄的值比較 當(dāng)前值大于之前值的話就可以判斷當(dāng)前動(dòng)作是在向上滑動(dòng) 然后做翻頁(yè)的操作即可

});

如果用現(xiàn)成的js框架做的話 有一個(gè)叫quo.js的框架非常不錯(cuò)

jquery如何實(shí)現(xiàn)菜單條由下向上滑動(dòng)顯示 由上向下滑動(dòng)隱藏

由上向下滑動(dòng)由 slideDown()控制，

由下向上滑動(dòng)由 slideUp()控制。

首先將菜單條隱藏，這種情況一般賦予其CSS屬性：display:none; 來(lái)隱藏。

然后通過(guò)jquery賦予它事件：點(diǎn)擊或者鼠標(biāo)移入。

通過(guò)這個(gè)事件綁定由下向上滑動(dòng)的 slideUp()。

最后通過(guò)點(diǎn)擊或者鼠標(biāo)移出綁定由上向下滑動(dòng)的 slideDown()。

slideDown()slideUp()中的括號(hào)填入速度。比如

slideDown("fast")

用jquery來(lái)設(shè)置網(wǎng)頁(yè)導(dǎo)航欄向下滾動(dòng)時(shí)隱藏，向上滾動(dòng)時(shí)顯示的代碼

script?type="text/javascript"?src=""/script

script

(function()?{

new?Headroom(document.querySelector("#nav-scroll"),?{?//這里的nav-scroll改為你的導(dǎo)航欄的id或class

offset?:?5,?//?在元素沒(méi)有固定之前，垂直方向的偏移量（以px為單位）

tolerance:?5,?//?scroll?tolerance?in?px?before?state?changes????????

classes:?{

initial:?"animated",??//?當(dāng)元素初始化后所設(shè)置的class

pinned:?"slideUp",?//?向上滾動(dòng)時(shí)設(shè)置的class

unpinned:?"slideDown"?//?向下滾動(dòng)時(shí)所設(shè)置的class

}

}).init();????

}());

/script

然后，加上樣式就可以了：

.animated?{position:?fixed;top:?0;left:?0;right:?0;transition:?all?.2s?ease-in-out;}

.animated?.slideDown?{top:?-100px;}

.animated?.slideUp?{top:?0;}

我想給這段jQuery代碼添加自動(dòng)循環(huán)向上滾動(dòng)效果，請(qǐng)高手幫忙，代碼如下：

給你一個(gè)函數(shù)

你調(diào)用下就OK了，支持加速滾動(dòng)、循環(huán)滾動(dòng)、間隔滾動(dòng)、上下滾動(dòng)、左右滾動(dòng)等等

直接將這段代碼拷貝到一個(gè)JS文件里面，這段代碼需要jquery1.3以上運(yùn)行環(huán)境。

代碼里面有調(diào)用示例。

望采納··

/**

* @classDescription 超級(jí)Marquee，可做圖片導(dǎo)航，圖片輪換

* @dependence jQuery 1.3.2

* @DOM

* div id="marquee"

* ul

* li/li

* li/li

* /ul

* /div

* @CSS

* #marquee {width:200px;height:50px;overflow:hidden;}

* @Usage

* $('#marquee').superMarquee(options);

* @options

* distance:200,//一次滾動(dòng)的距離

* duration:20,//緩動(dòng)效果，單次移動(dòng)時(shí)間，越小速度越快，為0時(shí)無(wú)緩動(dòng)效果

* time:5,//停頓時(shí)間，單位為秒

* direction: 'left',//滾動(dòng)方向，'left','right','up','down'

* scrollAmount:1,//步長(zhǎng)

* scrollDelay:20//時(shí)長(zhǎng)，單位為毫秒

* isEqual:true,//所有滾動(dòng)的元素長(zhǎng)寬是否相等,true,false

* loop: 0,//循環(huán)滾動(dòng)次數(shù)，0時(shí)無(wú)限

* btnGo:{left:'#goL',right:'#goR'},//控制方向的按鈕ID，有四個(gè)屬性left,right,up,down分別對(duì)應(yīng)四個(gè)方向

* eventGo:'click',//鼠標(biāo)事件

* controlBtn:{left:'#goL',right:'#goR'},//控制加速滾動(dòng)的按鈕ID，有四個(gè)屬性left,right,up,down分別對(duì)應(yīng)四個(gè)方向

* newAmount:4,//加速滾動(dòng)的步長(zhǎng)

* eventA:'mouseenter',//鼠標(biāo)事件，加速

* eventB:'mouseleave',//鼠標(biāo)事件，原速

* navId:'#marqueeNav', //導(dǎo)航容器ID，導(dǎo)航DOM:ulli1/lili2/liul,導(dǎo)航CSS:.navOn

* eventNav:'click' //導(dǎo)航事件

*/

(function($){

$.fn.superMarquee = function(options){

var opts = $.extend({},$.fn.superMarquee.defaults, options);

return this.each(function(){

var $marquee = $(this);//滾動(dòng)元素容器

var _scrollObj = $marquee.get(0);//滾動(dòng)元素容器DOM

var scrollW = $marquee.width();//滾動(dòng)元素容器的寬度

var scrollH = $marquee.height();//滾動(dòng)元素容器的高度

var $element = $marquee.children(); //滾動(dòng)元素

var $kids = $element.children();//滾動(dòng)子元素

var scrollSize=0;//滾動(dòng)元素尺寸

var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滾動(dòng)類型，1左右，0上下

var scrollId, rollId, isMove, marqueeId;

var t,b,c,d,e; //滾動(dòng)動(dòng)畫的參數(shù),t:當(dāng)前時(shí)間，b:開始的位置，c:改變的位置，d:持續(xù)的時(shí)間，e:結(jié)束的位置

var _size, _len; //子元素的尺寸與個(gè)數(shù)

var $nav,$navBtns;

var arrPos = [];

var numView = 0; //當(dāng)前所看子元素

var numRoll=0; //輪換的次數(shù)

var numMoved = 0;//已經(jīng)移動(dòng)的距離

//防止?jié)L動(dòng)子元素比滾動(dòng)元素寬而取不到實(shí)際滾動(dòng)子元素寬度

$element.css(_type?'width':'height',10000);

//獲取滾動(dòng)元素的尺寸

var navHtml = 'ul';

if (opts.isEqual) {

_size = $kids[_type?'outerWidth':'outerHeight']();

_len = $kids.length;

scrollSize = _size * _len;

for(var i=0;i_len;i++){

arrPos.push(i*_size);

navHtml += 'li'+ (i+1) +'/li';

}

}else{

$kids.each(function(i){

arrPos.push(scrollSize);

scrollSize += $(this)[_type?'outerWidth':'outerHeight']();

navHtml += 'li'+ (i+1) +'/li';

});

}

navHtml += '/ul';

//滾動(dòng)元素總尺寸小于容器尺寸，不滾動(dòng)

if (scrollSize(_type?scrollW:scrollH)) return;

//克隆滾動(dòng)子元素將其插入到滾動(dòng)元素后，并設(shè)定滾動(dòng)元素寬度

$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);

//輪換導(dǎo)航

if (opts.navId) {

$nav = $(opts.navId).append(navHtml).hover( stop, start );

$navBtns = $('li', $nav);

$navBtns.each(function(i){

$(this).bind(opts.eventNav,function(){

if(isMove) return;

if(numView==i) return;

rollFunc(arrPos[i]);

$navBtns.eq(numView).removeClass('navOn');

numView = i;

$(this).addClass('navOn');

});

});

$navBtns.eq(numView).addClass('navOn');

}

//設(shè)定初始位置

if (opts.direction == 'right' || opts.direction == 'down') {

_scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;

}else{

_scrollObj[_type?'scrollLeft':'scrollTop'] = 0;

}

if(opts.isMarquee){

//滾動(dòng)開始

//marqueeId = setInterval(scrollFunc, opts.scrollDelay);

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

//鼠標(biāo)劃過(guò)停止?jié)L動(dòng)

$marquee.hover(

function(){

clearInterval(marqueeId);

},

function(){

//marqueeId = setInterval(scrollFunc, opts.scrollDelay);

clearInterval(marqueeId);

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

}

);

//控制加速運(yùn)動(dòng)

if(opts.controlBtn){

$.each(opts.controlBtn, function(i,val){

$(val).bind(opts.eventA,function(){

opts.direction = i;

opts.oldAmount = opts.scrollAmount;

opts.scrollAmount = opts.newAmount;

}).bind(opts.eventB,function(){

opts.scrollAmount = opts.oldAmount;

});

});

}

}else{

if(opts.isAuto){

//輪換開始

start();

//鼠標(biāo)劃過(guò)停止輪換

$marquee.hover( stop, start );

}

//控制前后走

if(opts.btnGo){

$.each(opts.btnGo, function(i,val){

$(val).bind(opts.eventGo,function(){

if(isMove == true) return;

opts.direction = i;

rollFunc();

if (opts.isAuto) {

stop();

start();

}

});

});

}

}

function scrollFunc(){

var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

if(opts.isMarquee){

if (opts.loop 0) {

numMoved+=opts.scrollAmount;

if(numMovedscrollSize*opts.loop){

_scrollObj[_dir] = 0;

return clearInterval(marqueeId);

}

}

var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;

}else{

if(opts.duration){

if(t++d){

isMove = true;

var newPos = Math.ceil(easeOutQuad(t,b,c,d));

if(t==d){

newPos = e;

}

}else{

newPos = e;

clearInterval(scrollId);

isMove = false;

return;

}

}else{

var newPos = e;

clearInterval(scrollId);

}

}

if(opts.direction == 'left' || opts.direction == 'up'){

if(newPos=scrollSize){

newPos-=scrollSize;

}

}else{

if(newPos=0){

newPos+=scrollSize;

}

}

_scrollObj[_dir] = newPos;

if(opts.isMarquee){

marqueeId = setTimeout(scrollFunc, opts.scrollDelay);

}else if(td){

if(scrollId) clearTimeout(scrollId);

scrollId = setTimeout(scrollFunc, opts.scrollDelay);

}else{

isMove = false;

}

};

function rollFunc(pPos){

isMove = true;

var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;

numRoll = numRoll +_neg;

//得到當(dāng)前所看元素序號(hào)并改變導(dǎo)航CSS

if(pPos == undefinedopts.navId){

$navBtns.eq(numView).removeClass('navOn');

numView +=_neg;

if(numView=_len){

numView = 0;

}else if(numView0){

numView = _len-1;

}

$navBtns.eq(numView).addClass('navOn');

numRoll = numView;

}

var _temp = numRoll0?scrollSize:0;

t=0;

b=_scrollObj[_dir];

//c=(pPos != undefined)?pPos:_neg*opts.distance;

e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;

if(_neg==1){

if(eb){

c = e-b;

}else{

c = e+scrollSize -b;

}

}else{

if(eb){

c =e-scrollSize-b;

}else{

c = e-b;

}

}

d=opts.duration;

//scrollId = setInterval(scrollFunc, opts.scrollDelay);

if(scrollId) clearTimeout(scrollId);

scrollId = setTimeout(scrollFunc, opts.scrollDelay);

}

function start(){

rollId = setInterval(function(){

rollFunc();

}, opts.time*1000);

}

function stop(){

clearInterval(rollId);

}

function easeOutQuad(t,b,c,d){

return -c *(t/=d)*(t-2) + b;

}

function easeOutQuint(t,b,c,d){

return c*((t=t/d-1)*t*t*t*t + 1) + b;

}

});

};

$.fn.superMarquee.defaults = {

isMarquee:false,//是否為Marquee

isEqual:true,//所有滾動(dòng)的元素長(zhǎng)寬是否相等,true,false

loop: 0,//循環(huán)滾動(dòng)次數(shù)，0時(shí)無(wú)限

newAmount:3,//加速滾動(dòng)的步長(zhǎng)

eventA:'mousedown',//鼠標(biāo)事件，加速

eventB:'mouseup',//鼠標(biāo)事件，原速

isAuto:true,//是否自動(dòng)輪換

time:5,//停頓時(shí)間，單位為秒

duration:50,//緩動(dòng)效果，單次移動(dòng)時(shí)間，越小速度越快，為0時(shí)無(wú)緩動(dòng)效果

eventGo:'click', //鼠標(biāo)事件，向前向后走

direction: 'left',//滾動(dòng)方向，'left','right','up','down'

scrollAmount:1,//步長(zhǎng)

scrollDelay:10,//時(shí)長(zhǎng)

eventNav:'click'//導(dǎo)航事件

};

$.fn.superMarquee.setDefaults = function(settings) {

$.extend( $.fn.superMarquee.defaults, settings );

};

})(jQuery);

分享標(biāo)題：jquery向上滾動(dòng),html向上滾動(dòng)
本文地址：http://chinadenli.net/article43/dsihhhs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號(hào)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)