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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 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图像处理类分享
2014/11/18 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
DOM精简教程
2006/10/03 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python实现分页效果
2017/10/25 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Linux开机引导的步骤是什么
2014/02/26 面试题
汇源肾宝广告词
2014/03/20 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
消防安全月活动总结
2015/05/08 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书