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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
js窗口震动小程序分享
Nov 28 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
详解JavaScript 作用域
Jul 14 Javascript
js实现简易拖拽的示例
Oct 26 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Django的models模型的具体使用
2019/07/15 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
serialVersionUID具有什么样的特征
2014/02/20 面试题
大学生实习自我鉴定
2013/12/11 职场文书
入党介绍人评语
2014/05/06 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis