js焦点文字滚动效果代码分享


Posted in Javascript onAugust 25, 2015

本文实例讲述了js焦点文字滚动效果。分享给大家供大家参考。具体如下:
效果描述:
今天推荐的这个又是一个原生的js焦点图效果
默认自动切换,也可以手动切换
javascript代码采用函数式对象编程,也就是javascript编程中的Module模式
基本用法很简单,主要特点有三
1、模块化,可重用
2、封装了变量和function,和全局的命名空间不接触,不污染全局变量
3、只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突
运行效果图:-------------------查看效果-------------------

js焦点文字滚动效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery下拉美化搜索表单效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯js(不依赖现有框架)焦点文字滚动效果</title>
<style >
*{margin:0;padding:0; list-style:none;}

#slider{overflow:hidden;width:470px;height:150px;position:relative; margin:100px auto;}
#slider .pics{width:470px;height:150px}
#slider .pics li{height:150px;width:470px;float:left}
#slider #nav {position:absolute;bottom:5px;right:5px;}
#slider #nav li.nav{background:#F47500; color:#fff;}
#slider #nav li{border:1px solid #f47500; color:#d94b01; cursor:pointer;background:#fff;font-size:12px; height:15px;width:15px;float:left;margin-left:4px;display:inline;text-align:center}
</style>
</head>
<body>

<!--代码部分begin-->
<div id="slider">
 <ul class="pics">
 <li><img alt="js焦点图效果" src="images/01.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/02.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/03.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/04.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/05.jpg" /></li>
 </ul>
 <ul id="nav">
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(0)},300)">1</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(1)},300)">2</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(2)},300)">3</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(3)},300)">4</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(4)},300)">5</li>
 </ul>
</div>
<script>
var lanrenzhijia = {}, H$ = function(id){return document.getElementById(id)}, H$$ = function(c,p){return p.getElementsByTagName(c)}
lanrenzhijia.slider = function(){
 return{
 init:function(id,options){
  var ul = this.u = H$$('ul',H$(id))[0], li = H$$('li',ul); this.l=li.length; this.index = 0;
  if(options.navId&&options.curClass){this.nav = H$$('li',H$(options.navId)), this.c = options.curClass;}
  this.a=options.auto||0; this.v=options.vertical||0;H$(id).style.overflow = 'hidden';H$(id).style.position = 'relative';ul.style.position='absolute';
  if(this.v){ul.style.top=0; this.h=options.height||li[0].offsetHeight; ul.style.height=(this.l*this.h)+'px';}
  else{ul.style.left=0; this.w=options.width||li[0].offsetWidth; ul.style.width=(this.l*this.w)+'px';}
  this.pos(options.index||0,this.a?1:0);
 },
 
 pos:function(pos,a){
  clearInterval(this.u.posAnim); clearInterval(this.u.auto);
  var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
  correctPos=this.v?pos*this.h:pos*this.w, 
  direction = correctPos>Math.abs(curPos)?1:-1;
  correctPos*=-1; 
  this.index = pos;
  if(this.nav){for(var i=0;i<this.l;i++){this.nav[i].className = i==pos?this.c:''}}
  this.u.posAnim = setInterval(function(){lanrenzhijia.slider.anim(correctPos,direction,a)},10);
 },
 
 anim:function(des,dir,a){
  var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
  if(curPos == des){
  clearInterval(this.u.posAnim);
  if(a||this.a){lanrenzhijia.slider.auto()}
  }
  else{
  var v=curPos-Math.ceil(Math.abs(des-curPos)*.07)*dir+'px';
  this.v?this.u.style.top=v:this.u.style.left=v;
  }
 },
 
 auto:function(){
  this.u.auto=setInterval(function(){lanrenzhijia.slider.move(1,1)},this.a*1000)
 },
 
 move:function(n,a){
  var num=this.index+n, i=n==1?num==this.l?0:num:num<0?this.l-1:num; lanrenzhijia.slider.pos(i,a);
 }
 };
}();
</script>
<script>
lanrenzhijia.slider.init('slider',{ 
 auto:3,
 vertical:1,
 navId:'nav',
 curClass:'nav',
 index:0});
</script>
<!--代码部分end-->

</body>
</html>

以上就是为大家分享的js(不依赖现有框架)焦点文字滚动效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 #Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 #Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 #Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
You might like
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
Javascript的比较汇总
2016/07/25 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js初始化验证实例详解
2016/11/26 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
如何使用python切换hosts文件
2020/04/29 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
.net面试题
2016/09/17 面试题
性能测试工程师的面试题
2015/02/20 面试题
Ajax的工作原理
2015/12/04 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
社会实践评语
2014/04/28 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL