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及其样式即可以了. ...

随机推荐

分享一个安卓中异步获取网络图片并自适应大小的第三方程序（来自github）
安卓中获取网络图片,生成缓存用安卓手机,因为手机流量的限制,所以我们在做应用时,要尽量为用户考虑,尽量少耗点用户的流量,而在应用中网络图片的显示无疑是消耗流量最大的,所以我们可以采取压缩图片或者将图 ...
在ubuntu中启用ftp服务
Vsftpd vsftpd,ftp服务端,本文转自http://wiki.ubuntu.org.cn/Vsftpd 目录 [隐藏] 1 stand alone和super daemon 2 安装 3 ...
关于win10安装VisualSVN遇到的一个问题及解决办法
问题:在win10系统中安装VisaulSVN遇到问题,错误提示:There is problem with this Windows Installer package. A DLL require ...
HW5.34
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
maven 约定
pom.xml 放置在项目的根目录在 src/main/java 中放置项目的主代码在 src/main/resources放置主项目的资源在 src/test/java 中放置项目的测试代码 ...
基于Qt的P2P局域网聊天及文件传送软件设计
基于Qt的P2P局域网聊天及文件传送软件设计 zouxy09@qq.com http://blog.csdn.net/zouxy09 这是我的<通信网络>的课程设计作业,之 ...
POJ3468--A Simple Problem with Integers（Splay Tree）
虽然有点难,但是这套题都挂了一个月了啊喂…… 网上模板好多……最后还是抄了kuangbin聚聚的,毕竟好多模板都是抄他的,比较习惯…… POJ 3468 题意:给n个数,两种操作,区间整体加一个数,或 ...
Android实例-多窗口的切换(XE8+小米2)
1.图片一是程序运行后的界面. 2.图片二是点击"非模态显示"的界面. 3.图片三是点击"模诚显示"的界面(提示平台不支持). unit Unit1; inte ...
DTD - XML Building Blocks
The main building blocks of both XML and HTML documents are elements. The Building Blocks of XML Doc ...
mysql 索引建立
如何建立mysql索引? 创建索引原则 1.左前缀原则 : mysql索引匹配会从右匹配,到遇到( > < between like)终止.如我们建立索引(a,b,c,d), a = ...

jquery animate 制作简单弹幕

jquery animate 制作简单弹幕的更多相关文章

随机推荐

热门专题