jquery 立体走马灯_jquery实现跑马灯效果（一）

$(function () {

var demo = $("#demo")[0];

var demo1 = $("#demo1")[0];

var demo2 = $("#demo2")[0];

var speed = 10; //滚动速度值，值越大速度越慢

var nnn = 200 / demo1.offsetHeight;

for (i = 0; i < nnn; i++) {

demo1.innerHTML += "
" + demo1.innerHTML

}

demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1

function Marquee() {

if (demo2.offsetTop - demo.scrollTop <= 0) //当滚动至demo1与demo2交界时

demo.scrollTop -= demo1.offsetHeight //demo跳到最顶端

else {

demo.scrollTop++

}

var MyMar = setInterval(Marquee, speed); //设置定时器

demo.onmouseover = function () {

clearInterval(MyMar)

} //鼠标经过时清除定时器达到滚动停止的目的

demo.onmouseout = function () {

MyMar = setInterval(Marquee, speed)

} //鼠标移开时重设定时器

});

HTML5是一个丰富的应用，可以给用户很多视觉上的享受！

jquery 立体走马灯_jquery实现跑马灯效果（一）相关推荐

jquery 立体走马灯_jquery无缝隙连续滚动代码【走马灯效果】
通常我们在做网页布局的时候,客户为要求在某个地方实现图片滚动或文字滚动的展示,这就是所谓的跑马灯效果,在以前蓝叶用html标签marquee来做跑马灯效果,marquee不是很完美,如果一个层的宽度或 ...
jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
jquery 立体走马灯_Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解照例先上代码: HTML: 在中,再包含了一个div,且设置了一个很比较大的宽度,是为了解决一个 ...
jquery 立体走马灯_jquery实现页面百叶窗走马灯式翻滚显示效果的方法
本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: jQuery.fn.extend(( ...
html纵向的跑马灯效果,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
java 走马灯程序,详解微信小程序实现跑马灯效果（附完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
android:ellipsize实现跑马灯效果总结
原文地址:http://www.cnblogs.com/Gaojiecai/archive/2013/06/18/3142783.html android:ellipsize用法如下: 在xml中 a ...
web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
Android --- 跑马灯效果
1.基于开发者文档的官方说明跑马灯效果主要使用的控件为TextView,其中涉及的几个标签如下所示: android:ellipsize If set, causes words that are ...

jquery 立体走马灯_jquery实现跑马灯效果（一）

jquery 立体走马灯_jquery实现跑马灯效果（一）相关推荐

最新文章

热门文章