js扩展滚动窗口小插件实现文字左右上下滚动效果实例

方法一：使用小插件实现，兼容很好
插件代码如下：

(function($) { $.fn.jMarquee = function(o) {o = $.extend({ speed:50, step:1,//速度 direction:"up",//方向 visible:1//数量 }, o || {});//配置参数var i=0;var div=$(this);var ul=$("ul",div);var tli=$("li",ul);var liSize=tli.size();if(o.direction=="left")tli.css("float","left");var liWidth=tli.innerWidth();var liHeight=tli.height();var ulHeight=liHeight*liSize;var ulWidth=liWidth*liSize;//写入if(liSize>o.visible){ul.append(tli.slice(0,o.visible).clone())  //重写htmlli=$("li",ul);liSize=li.size();//写css样式div.css({"position":"relative",overflow:"hidden"});ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});li.css({margin:"0",padding:"0","position":"relative"});switch(o.direction){ case "left": div.css("width",(liWidth*o.visible)+"px"); ul.css("width",(liWidth*liSize)+"px"); li.css("float","left"); break; case "up": div.css({"height":(liHeight*o.visible)+"px"}); ul.css("height",(liHeight*liSize)+"px"); break; }var MyMar=setInterval(ylMarquee,o.speed);ul.hover( function(){clearInterval(MyMar);}, function(){MyMar=setInterval(ylMarquee,o.speed);} ); }; function ylMarquee(){ if(o.direction=="left"){ if(div.scrollLeft()>=ulWidth){ div.scrollLeft(0); } else { var leftNum=div.scrollLeft(); leftNum+=parseInt(o.step); div.scrollLeft(leftNum) } } if(o.direction=="up"){ if(div.scrollTop()>=ulHeight){ div.scrollTop(0); } else{ var topNum=div.scrollTop(); topNum+=parseInt(o.step); div.scrollTop(topNum); } } }; };  })(jQuery);//调用
$(document).ready(function(){ //.stroll1是div里面带一个ul就行了，里面的数据使用php调取 $(".stroll1").jMarquee({visible:4,step:1,direction:"up"}); $(".stroll2").jMarquee({visible:4,step:1,direction:"up"}); $(".stroll3").jMarquee({visible:4,step:1,direction:"up"}); })

方法二：css3加js实现，转载自靖鸣君博客
js代码：

/**
* @author 靖鸣君
* @email jingmingjun92@163.com
* @description 滚动
* @class Marquee
* @param {Object}
*/
var Marquee = function(){this.direction = "top";this.speed = 30;
};Marquee.prototype = {//initialinit: function(obj, setttings){this.obj = obj;this._createBox();this.scroll();if(settings){settings.direction && (this.direction = settings.direction);settings.speed && (this.speed = settings.speed);}},_createBox: function(){//create inner box Athis.iBox = document.createElement("div");var iBox = this.iBox;with(iBox.style){width = "100%";height = "100%";overflow = "hidden";}iBox.setAttribute("id", "marqueeBoxA");iBox.innerHTML = obj.innerHTML;//clone inner box Bvar iBox2 = iBox.cloneNode(true);iBox2.setAttribute("id", "marqueeBoxB");//append to obj Boxthis.obj.innerHTML = "";this.obj.appendChild(iBox);this.obj.appendChild(iBox2);},//animationscroll: function() {var _self = this;this.timer = setInterval(function(){_self._ani();}, this.speed);},//setInterval function_ani: function() {if(obj.clientHeight - obj.scrollTop <= 0){obj.scrollTop = obj.offsetHeight - obj.scrollTop + 1;} else {obj.scrollTop++;console.log(obj.offsetHeight, obj.scrollTop);}},stop: function(){clearInterval(this.timer);},start: function(){this.scroll();}
};

html对应代码

<!DOCTYPE HTML>
<html>
<head>  <meta charset="UTF-8">  <title>Demo</title><style type="text/css">#box { width: 150px;height: 200px;border:1px solid #EFEFEF;background: #F8F8F8;padding:0 20px;line-height:22px;overflow:hidden;}</style>
</head><body><div id="box">我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br />我是靖鸣君1<br /> 我是靖鸣君2<br /> 我是靖鸣君3<br /> 我是靖鸣君4<br /> 我是靖鸣君5<br /></div>
</body>
</html>

js扩展滚动窗口小插件实现文字左右上下滚动效果实例相关推荐

JQuery弹出窗口小插件ColorBox
ColorBox官方网站:http://colorpowered.com/colorbox/ colorbox()函数使用一堆key/value对象和一个可选的callback函数格式:$('sele ...
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下. <template><div class=" ...
Bootstrap3 滚动监听插件的事件
滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...
Bootstrap3 滚动监听插件的选项
滚动监听插件的选项 Bootstrap为滚动监听插件提供了一个选项 offset,用来调整滚动位置距顶部偏移的像素值,取值为数字,默认值为10.正值表示滚动条向上偏移,负值表示向下偏移. offset ...
前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
2021-4-27 工作记录--input和textarea出现边框部分失踪+让多个文本输入框左侧对齐+电话号码的正则表达式+图片和文字没有对齐+jQuery滚动视觉差插件+清除浮动
一.input和textarea在不同屏幕尺寸下出现边框部分失踪的问题 1.解决方法给input和textarea设置border 2.使用例子代码: 结果: 二.让多个文本输入框左侧对齐代码: ...

js扩展滚动窗口小插件实现文字左右上下滚动效果实例

js扩展滚动窗口小插件实现文字左右上下滚动效果实例相关推荐

最新文章

热门文章