jquery animate 制作简单弹幕
定位滚动条
$("html,body").animate({scrollTop:$(".middle1").offset().top},1000)
弹幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>marquee</title>
<link rel="stylesheet" href="index.css"/>
<script src="jquery.min.js"></script>
<script src="keyframse.js"></script>
</head>
<body>
<!--
a)scrollAmount 它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction 表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay 这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior 用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
-->
<div class="marquee-wrapper">
</div>
<!--$(selector).animate(styles,speed,easing,callback)-->
<div class="wrapper">
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
<div class="piece"></div>
</div>
<div class="wrapper">
<div class="begin-rotate">
waiting...
</div>
</div>
</body>
</html>
弹幕css
.marquee-wrapper{width: 360px;height: 288px;margin: 0 auto;position: relative;overflow: hidden;background-image: url("bg-danmu.png");}
.marquee-piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightblue;background-color:white;text-align: center;}
.dm-phone{color: rgb(55,208,219);}
.marquee{position: absolute;left:}
.wrapper{width: 360px;height: 288px;border: 1px solid red;margin: 0 auto;position: relative;overflow: hidden;}
.marquee-piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightgreen;text-align: center;}
.begin-rotate{width: 100px;height: 100px;line-height: 100px;text-align: center;background-color: #dadada;border-radius: 50%;border-bottom:4px solid red;border-right: 4px solid red;}
.piece{width: 250px;height: 35px;line-height: 35px;border-radius: 20px;border:1px solid lightgreen;text-align: center;}
@keyframes setRight { from {right: -249px;} to {right:100%} }
@-moz-keyframes setRight { from {right: -249px;} to {right:100%} }
@-webkit-keyframes setRight /* Safari 和 Chrome */ { from {right: -249px;} to {right:100%} }
@-o-keyframes setRight /* Opera */ { from {right: -249px;} to {right:100%} }
@keyframes beginRotate {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-o-transform: rotate(0deg); /* Opera */
-moz-transform: rotate(0deg); }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); }
}
@-moz-keyframes beginRotate {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-o-transform: rotate(0deg); /* Opera */
-moz-transform: rotate(0deg); }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); }
}
@-webkit-keyframes beginRotate {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-o-transform: rotate(0deg); /* Opera */
-moz-transform: rotate(0deg); }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); }
}
@-o-keyframes beginRotate {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
-o-transform: rotate(0deg); /* Opera */
-moz-transform: rotate(0deg); }
50% {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); }
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); }
}
.piece1
{
animation: setRight 5s linear 1s infinite ;
/* Firefox: */
-moz-animation: setRight 5s linear 1s infinite ;
/* Safari 和 Chrome: */
-webkit-animation: setRight 5s linear 1s infinite ;
/* Opera: */
-o-animation: setRight 5s linear 1s infinite ;
}
.begin-rotate{
animation: beginRotate 2s linear 1s infinite ;
/* Firefox: */
-moz-animation: beginRotate 2s linear 1s infinite ;
/* Safari 和 Chrome: */
-webkit-animation: beginRotate 2s linear 1s infinite ;
/* Opera: */
-o-animation: beginRotate 2s linear 1s infinite ;
}
弹幕js
/**
* Created by cq on 2015/7/15.*
*/ $(function(){ for(var i=0;i<7;i++){
var marquee = $('<MARQUEE>')
var marqueePiece = $('<div>')
marqueePiece.addClass('marquee-piece')
marqueePiece.html(items[Math.floor(Math.random()*items.length)])
marquee.addClass('marquee')
marquee.attr('scrollAmount',parseInt(Math.random()*8)+1)
marquee.attr('scrollDelay',parseInt(Math.random()*80)+1)
marquee.css('top',i * 40)
$('.marquee-wrapper').append(marquee.append(marqueePiece))
} $('.piece').each(function(ind,ele){
$(ele).html(items[Math.floor(Math.random()*items.length)])
$(ele).css({'position':'absolute','right':'-252px','top':ind * 40 +5})
move(ele)
}) }) var move = function(ele){
$(ele).animate({right:'365px'},Math.random()*13000+2000,'linear',function(){
$(ele).html(items[Math.floor(Math.random()*items.length)])
$(ele).css('right','-252px')
move(ele)
})
} var items = [
"132****3333 我要买肾6",
"132****2759 我要接媳妇",
"135****7527 我要去旅游",
"155****8957 我要吃大餐",
"188****1525 我要玩游戏",
"187****5734 我要盖房子",
"139****4537 我要大别墅",
"131****4378 我要当大厨",
"132****4125 我要成为科学家",
"135****1678 我要躺一天"
]
页面分三个部分，
marquee-wrapper是marquee标签
第一个wrapper 是jquery的animate实现的弹幕
第二个wrapper 是css3的等待效果
jquery animate 制作简单弹幕的更多相关文章
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- Highcharts使用教程（1）：制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
- jQuery手风琴制作
jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- Adobe edge animate制作HTML5动画可视化工具（一）
Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
随机推荐
- 浅析Netty的异步事件驱动（二）
上一篇文件浅析了Netty中的事件驱动过程,这篇主要写一下异步相关的东东. 首先,什么是异步了? 异步的概念和同步相对.当一个异步过程调用发出后,调用者不能立刻得到结果.实际处理这个调用的部件在完成后 ...
- MVC模式 - 理解J2EE模式
MVC模式Model-View-Controller头字母的缩写,中文翻译为“模型-视图-控制器” 模式(或者模型).该模式把一个GUI应用划分 业务逻辑处理(M),画面表示(V),控制(C) ...
- MapReduce之Partition的使用与分析
Partition主要作用就是将map的结果发送到相应的reduce.这就对partition有两个要求: 1)均衡负载,尽量的将工作均匀的分配给不同的reduce. 2)效率,分配速度一定要快. M ...
- 让你系统认识flume及安装和使用flume1.5传输数据到hadoop2.2
本文链接: http://www.aboutyun.com/thread-7949-1-1.html 问题导读:1.什么是flume?2.如何安装flume?3.flume的配置文件与其它软件有什么不 ...
- 全栈式框架的选择：MEAN or MEANS?
说明:个人博客地址为edwardesire.com,欢迎前来品尝.本博客作为备份和引流 这两个月一直在进行sails后端开发,其中遇到的问题不断.放在研究用户访问控制矸例程上的时间太多,最后也没用弄出 ...
- Code Understanding Step by Step - We Need a Task
Code understanding is a task we are always doing, though we are not even aware that we're doing it ...
- 跟着Android官网学习Activity
1.Activity介绍 An Activity is an application component that provides a screen with which users can int ...
- 字符流缓冲区BufferedReader之readLine方法的原理
- Android实例-解决虚拟键盘遮挡问题(XE8+小米2)
结果: 1.可以自动向上移动,来防遮挡,但同时发现个问题,如果是按硬件返回没有问题,要是点输入法(QQ.百度输入法)上的隐藏就不行了. 2.点击Edit2后出现输入法,点输入法上的隐藏后, 再点Edi ...
- 【Stage3D学习笔记续】山寨Starling（三）：Starling核心渲染流程
这篇文章我们剔除Starling的Touch事件体系和动画体系,专门来看看Starling中的渲染流程实现,以及其搭建的显示列表结构. 由于Starling是模仿Flash的原生显示列表,所以我们可以 ...