[js样式效果]具有停顿效果上下滚动方式
一般用于公告的滚动效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
ul {
margin:100px;
height:22px; border:1px solid red;
overflow:hidden;
}
li {
height:22px; line-height:22px; font-size:12px;
}
</style>
</head>
<body>
<ul id="a">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>1-4</li>
</ul>
<script>
//document.getElementById()的最简化应用
function $(element){
if(arguments.length>1){
for(var i=0,length=arguments.length,elements=[];i<length;i++){
elements.push($(arguments[i]));
}
return elements;
}
if(typeof element=="string"){
return document.getElementById(element);
}else{
return element;
}
}
//类创建函数
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
//对象属性方法扩展
Function.prototype.bind=function(object){
var method=this;
return function(){
method.apply(object,arguments);
}
}
var Scroll=Class.create();
Scroll.prototype={
//第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度
initialize:function(element,height,delay,speed){
this.element=$(element);
this.element.innerHTML+=this.element.innerHTML;
this.height=height;
this.delay=delay*1000;
this.speed=speed;
this.maxHeight=this.element.scrollHeight/2;
this.counter=0;
this.scroll();
this.timer="";
this.element.onmouseover=this.stop.bind(this);
this.element.onmouseout=function(){this.timer=setTimeout(this.scroll.bind(this),1000);}.bind(this);
},
scroll:function(){
if(this.element.scrollTop<this.maxHeight){
this.element.scrollTop++;
this.counter++;
}else{
this.element.scrollTop=0;
this.counter=0;
} if(this.counter<this.height){
this.timer=setTimeout(this.scroll.bind(this),this.speed);
}else{
this.counter=0;
this.timer=setTimeout(this.scroll.bind(this),this.delay);
}
},
stop:function(){
clearTimeout(this.timer);
}
}
new Scroll('a', 22,2.5,15)
</script>
</body>
</html>
[js样式效果]具有停顿效果上下滚动方式的更多相关文章
- js 上下滚动加停顿效果，js 跑马灯加停顿效果
<div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...
- 使用js实现带有停顿效果的图片滚动（按钮控制）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Js]焦点图轮播效果
一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
随机推荐
- sublime text 内调试Javascript代码
转自:sublime内调试Javascript代码 之前用webstorm, 可以直接调试js, 在浏览器中也可以调试js,最近换了sublime text, 在想它是否支持调试js代码,于是找到了这 ...
- 对Spring 及SpringMVC的理解
spring是一个轻型容器(light-weight Container),其核心是Bean工厂(Bean Factory),用以构造我们所需要的M(Model).在此基础之上,Spring提供了AO ...
- EL表达式中的11个隐式对象
EL表达式中定义了11个隐式对象,使用这些隐式对象可以很方便地读取到Cookie.HTTP请求消息头字段.请求参数.Web应用程序中的初始化参数的信息,EL表达式中的隐式对象具体如下: 隐式对象 作用 ...
- js有关数组的函数
map()和filter()函数 js的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似1)filter是满足条件的留下,是对原数组的过滤(筛选):2) ...
- 【HDU5126】 stars k-d树
题目大意:有$m$个操作,分两种:在指定三维坐标内加入一个点,询问指定空间内点的数量. 其中$m≤5*10^{4},1≤x,y,z≤10^9$ 这题几乎就是裸的$k-d$树啊.我们动态维护一棵$k-d ...
- OS之内存管理 ---基本的内存管理策略（一）
基本概念 基本硬件 CPU可以直接访问的通用存储只有内存和处理器的内置的寄存器.机器指令可以用内存地址作为参数,而不能用磁盘地址作为参数.所以执行指令以及指令使用的数据,应在这些可执行访问的存储设备上 ...
- IQKeyboardManager 问题锦集
Keep UINavigationBar at the top (Don't scroll with keyboard) (#21, #24) If you don't want to hide th ...
- mysql中UNION ALL用法
MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后会对所产生的结果集进行排序运算,删除重复的记录再返回结果. 举例说明: select * from table1 u ...
- 使用canvas绘制渐变色矩形和使用按键控制人物移动
使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...
- SQL中存储过程和函数的区别
转:https://www.cnblogs.com/jacketlin/p/7874009.html 本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个. 而函数是可以嵌入在s ...