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 DOM操作小结与实例
Jan 07 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
简单实现JS计算器功能
Dec 21 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
随机头像PHP版
2006/10/09 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
深入理解Python中装饰器的用法
2016/06/28 Python
浅析Python四种数据类型
2018/09/26 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
最新大学生自我评价
2013/09/24 职场文书
金融专业推荐信
2013/11/14 职场文书
户籍证明的格式
2014/01/13 职场文书
竞聘上岗演讲
2014/05/19 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2019同学聚会主持词
2019/05/06 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
python中Matplotlib绘制直线的实例代码
2021/07/04 Python