js重点文本滚动效果代码共享

本文给出了JS焦点文本滚动效果的一个例子,供大家参考:

效果描述:

这是今天推荐的原生js焦点映射。

默认自动切换和手动切换

Javascript代码使用函数对象编程,即Javascript编程中的模块模式。

基本用法非常简单,主要特点是三:

1、模块化、可重用

2。封装变量和函数,不接触全局命名空间,不污染全局变量。

三.只公开公共方法,所有其他私有方法都被隐藏,确保js不相互冲突。

兼营:-------------------查看结果-------------------效果图


提示:如果不能在浏览器中正常运行,可以尝试切换浏览模式。

共享jQuery下拉式美化搜索表单效果代码如下






纯js(不依赖于现有框架)集中文本滚动效果

*边距:0;填充:0;列表样式:无;}

#滑块{溢出:隐藏;宽度:470px;身高:150px;位置:相对;保证金:100px汽车;}
#滑块。图片{宽度:470px;身高:150px }
# slider.pics李{身高:150px;宽度:470px;浮动:左}
#滑块# NAV {位置:绝对;底:5px;右:5px;}
#滑块#导航里,导航{背景:# f47500;颜色:# FFF;}
#滑块#李{ border: 1px solid净值# f47500;颜色:# d94b01;鼠标指针;背景:# FFF;字体大小:12px;高度:15px;宽度:15px;字体大小:12px;






















无功lanrenzhijia = { },H $ =功能(ID){ return document.getelementbyid(ID)},H $ =函数(C,P){ return p.getelementsbytagname(C)}
lanrenzhijia.slider =函数(){
返回{
init(函数,选项){
VaR UL =这。U = H $('ul',H $(id)){ 0 },李= H $(李,UL);
如果(选项。navidoptions。curclass){ this.nav = H $(李,H $(选项。纳)),这个C =选项。curclass;}
这一组的选择。汽车| | 0;这个V =选项。垂直| | 0美元;H(ID)。Style.overflow =隐藏的;H $(ID)。style.position = 'relative ';UL位置=绝对的风格;
如果(这。v){ UL。风格。= 0;这。H =选项。高度| |李{ 0 }。offsetheight;UL。风格。高度=(本。L,H)+ 'px;}
别的{ UL。风格。左= 0;这。W =选项。宽度| |李{ 0 }。offsetwidth;UL。风格。宽度=(本。L,W)+ 'px;}
This.pos(选项。指数| | 0本。a1:0);
},

Pos:函数(POS,A){
ClearInterval(这个。u.posanim);clearInterval(这个。u.auto);
无功curpos = this.vparseint(这个。u.style。顶部):parseInt(这个。u.style。左),
correctpos =这。VPOS *本。H:POS机*本。W,
方向= correctpos > math.abs(curpos)1 - 1;
correctpos * = 1;
this.index = POS;
如果(这。NAV){为(var i = 0;i <这。L;i++){这个导航{我}。类名=我= = posthis。C:} }
this.u.posanim = setInterval(function(){ lanrenzhijia.slider.anim(correctpos,方向,A)},10);
},

Anim:功能(DES,迪尔,一){
无功curpos = this.vparseint(这个。u.style。顶部):parseInt(这个。u.style。左);
如果(curpos = = DES){
ClearInterval(这个。u.posanim);
如果(一| |这一lanrenzhijia.slider.auto){()}
}
别的{
var v = curpos-math.ceil(Math.abs(DES curpos)×07)×目录+ 'px;
这,这,u.style。= V:这。u.style左= V;
}
},

自动:函数(){
这个u.auto = setInterval(函数(){ },这lanrenzhijia.slider.move(1,1),×1000)
},

移动:函数(n,a){
VaR Num =这个指数+ n,i = n = = 1num = =这。10:民:民< 0this。L-1:民;lanrenzhijia.slider.pos(我的);
}
};
(});


Lanrenzhijia.slider.init('slider,{
汽车:3,
纵向:1,
NavId:'nav,
CurClass:'nav,
索引:0 };









以上是分享js(不依赖于现有框架)的重点文本滚动效果代码,希望大家能喜欢。