jQuery插件--图片文字向上向左循环滚动

需要引用jquery

调用非常简单:

一、 向上滚动

$(".scroll_two").jScroll({vertical: true});

<div class="box scroll_two">
    <ul>
        <li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li>
        <li><a href="#">新车</a>| <a href="#">外观媲美轿车 全新一代奥德赛9月初亮相</a></li>
        <li><a href="#">活动</a>| <a href="#">开启燕京啤酒清爽之旅,赢取万元单反相机</a></li>
        <li><a href="#">探密</a>| <a href="#">亲历探寻长寿村莫斯利安的神奇之旅</a></li>
        <li><a href="#">中房</a>| <a href="#">2009CIHAF第十一届中国住交会</a></li>
        <li><a href="#">惠普</a>| <a href="#">你的打印机能省50%打印成本吗?</a></li>
    </ul>
</div>

二、向左翻屏

$(".scroll_three").jScroll({speed: 2000, scroll: 3});

<div class="box scroll_three">
	<ul>
		<li><a href="#"><img src="images/1.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/2.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/3.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/4.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/5.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/6.jpg" width="130" height="107"  /></a></li>
	</ul>
</div>

  

源码如下:

;(function($){
$.fn.extend({
"jScroll":function(o){
o = $.extend({
auto: 3000, //延迟时间(毫秒)
speed: 800, //单次滚动时长(毫秒)
vertical: false, //是否向上滚动(默认向左)
scroll: 1 //每次滚动的元素数量
},o);
var running = false, sizeCss = o.vertical ? "height" : "width", ulSize = 0;
var scrollTimer, scrollLen, itemSize, animCss, i;
var div = $(this), ul = div.find("ul"), li = ul.children("li");

div.css({overflow: "hidden"});
ul.css({margin: "0", padding: "0", display: "inline-block"});
li.css({"list-style-type": "none", float: o.vertical ? "none" : "left"});

//获取LI元素总宽(高)
for(i=0; i<=li.size()-1; i++){
itemSize = o.vertical ? li.eq(i).outerHeight() : li.eq(i).outerWidth();
ulSize+=itemSize;
}
var divSize = o.vertical ? div.height() : div.width(); //容器宽(高)
ul.css(sizeCss, (ulSize*2)+"px");
if(ulSize > divSize) running = true; //UL的宽(高)大于容的器宽(高)时才滚动

div.hover(function(){
clearInterval(scrollTimer);
},function(){
if(running){
scrollTimer = setInterval(function(){
scrollLen = 0;
itemSize = 0;
li = ul.children("li");
for(i=0; i<=o.scroll-1; i++){
itemSize = o.vertical ? li.eq(i).outerHeight() : li.eq(i).outerWidth();
scrollLen+=itemSize;
}
animCss = o.vertical ? {marginTop:-scrollLen +"px"} : {marginLeft:-scrollLen +"px"};
ul.animate(animCss, o.speed, function(){
ul.css(o.vertical ? "margin-top" : "margin-left", "0");
li.slice(0,o.scroll).appendTo(ul); //将前面的元素移至末尾
})
}, parseInt(o.auto+o.speed));
}
}).trigger("mouseleave"); //DOM加载完毕后自动执行hover(fn1, fn2)的fn2
}
});
})(jQuery);

下载例子

时间: 2024-09-30 20:58:29

jQuery插件--图片文字向上向左循环滚动的相关文章

jquery插件图片延时加载实例详解(转)

jquery插件图片延时加载实例详解 效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://keleyi.com/

单行文字向上无间断的滚动

单行文字向上滚动,这里我主要是用了无逢滚动的原理:通过改变top值,让文字让上移动,需要一个定时器 var oNav=document.getElementById('nav'); var oUl=oNav.getElementsByTagName('ul')[0]; var aLi=oUl.children; var timer=null; var speed=-1; oUl.innerHTML+=oUl.innerHTML; oUl.style.height=aLi[0].offsetHei

jquery插件之文字间歇自动向上滚动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

jquery插件之文字无缝向上滚动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

Jquery插件——图片放大镜

偶然前端网发现了一个比较好的图片放大镜效果插件,稍作修改完善了一下,下面分享给大家. 效果还不错,如下图: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> body { margin:200px; background:#000; } ol,

jQuery插件图片懒加载lazyload

来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可 见)中的图片是不加载的,这样势必会引起速度上质的提升. 实现原理: 当图片滚动到可视区时将图片加载进来. 图片不在可视区判断: (一):图片距离页面顶端的高度 大于 窗口可视区的高度+window滚动条的scrollTop. (二

js实现点击上下按钮,图片向上向下循环滚动切换

//popup.js //jquery.1.4.2-min.js (function(p,j){function u(){if(!c.isReady){try{v.documentElement.doScroll("left")}catch(a){setTimeout(u,1);return}c.ready()}}function t(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.glo

jquery实现文字向上滚动效果

html部分 <body> <div id="demo" > <ul id="demo1"> <li>1111111111111111</li> <li>2222222222222222</li> <li>3333333333333333</li> <li>4444444444444444</li> <li>55555555

Jquery制作--循环滚动列表

自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可以的,如下(效果图上传后都加速了,实际效果比这个要慢很多): html代码如下: <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <