js动画效果（二）

news/2024/7/19 15:51:48 标签: js, 动效, 转盘抽奖, 公告栏轮播

如今，越来愈多的页面动效都依赖于动效插件，插件的封装和使用，大大减少了前端人员实现动效的时间和经历，提高了效率。如今，页面中使用到的大多都是常见的动效，有些动效，由于不常用，只有在特定的页面才会使用到，比如抽奖效果等。因此，在此和大家分享两个动效，第一个是向上的轮播，只是，这一个轮播和图片轮播不同，是类似公告栏的轮播。这样的轮播，当每一行的背景颜色相同时的实现很容易，但如果是隔行变色的布局，会由于视觉差的原因导致效果不能达到预想的效果，故而，为大家提供了两种js书写方式，第一种的可通用的，另一种是仅仅针对于同色的情况。另一个动效则是转盘抽奖动效。
纯css+marginTop仿通知向上滚动动画效果：
css:

js css">*js-rules">{
    js-rule">js-attribute">padding:js-value">js-number">0;
    js-rule">js-attribute">margin:js-value">js-number">0;
js-rule">}
js-tag">ul js-tag">lijs-rules">{
    js-rule">js-attribute">list-style:js-value">none;
js-rule">}
js-class">.mainjs-rules">{
    js-rule">js-attribute">width:js-value">js-number">500px;
    js-rule">js-attribute">height:js-value">js-number">100px;
    js-rule">js-attribute">border:js-value">js-number">1px solid blue;
    js-rule">js-attribute">overflow:js-value">hidden;
js-rule">}
js-class">.main>js-tag">uljs-rules">{
    js-rule">js-attribute">width:js-value">js-number">100%;
    js-rule">js-attribute">height:js-value">auto;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-rules">{
    js-rule">js-attribute">width:js-value">js-number">100%;
    js-rule">js-attribute">height:js-value">js-number">30px;
    js-rule">js-attribute">line-height:js-value">js-number">30px;
    js-rule">js-attribute">background:js-value">yellow;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-pseudo">:nth-child(2n+1)js-rules">{
    js-rule">js-attribute">background:js-value">skyblue;
    js-rule">js-attribute">color:js-value">js-hexcolor">#fff;
js-rule">}

html:

js xml">js-tag"><js-title">div js-attribute">class=js-value">"main" js-attribute">id=js-value">"main">
    js-tag"><js-title">ul>
        js-tag"><js-title">li>js-tag"><js-title">p>1111111111111js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>2222222222222js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>3333333333333js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>4444444444444js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>5555555555555js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>6666666666666js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>7777777777777js-tag"></js-title">p>js-tag"><js-title">li>
        js-tag"><js-title">li>js-tag"><js-title">p>8888888888888js-tag"></js-title">p>js-tag"><js-title">li>
    js-tag"></js-title">ul>
js-tag"></js-title">div>

（隔行变色、同色通用）js:

js php"><script>
    js-keyword">var js-variable">$this = $(js-string">"#main");
    js-keyword">var scrollTimer;
    js-variable">$this.hover(js-function">js-keyword">functionjs-params">() {
            clearInterval(scrollTimer);
        }, js-function">js-keyword">functionjs-params">() {
            scrollTimer = setInterval(js-function">js-keyword">functionjs-params">() {
                scrollNews(js-variable">$this);
        }, js-number">2000);
    }).trigger(js-string">"mouseleave");

    js-function">js-keyword">function js-title">scrollNewsjs-params">(obj) {
        js-keyword">var js-variable">$self = obj.find(js-string">"ul");
        js-keyword">var lineHeight = js-variable">$self.find(js-string">"li:first").height();
        js-variable">$self.animate({
            js-string">"marginTop": (Number(js-variable">$self.css(js-string">'marginTop').split(js-string">'px')[js-number">0]) - lineHeight) + js-string">"px"
            }, js-number">600, js-function">js-keyword">functionjs-params">() {
                js-keyword">if( Math.abs(Number(js-variable">$self.css(js-string">'marginTop').split(js-string">'px')[js-number">0])) === lineHeight*js-number">2){
                    js-variable">$self.find(js-string">"li:first").appendTo(js-variable">$self)
                    js-variable">$self.find(js-string">"li:first").appendTo(js-variable">$self)
                    js-variable">$self.css({
                        marginTop: js-number">0
                    })
                }
        })
    }
</script>

（仅同色）js：

js php">  js-keyword">var js-variable">$this = $(js-string">"#main");
  js-keyword">var scrollTimer;
  js-variable">$this.hover(js-function">js-keyword">functionjs-params">() {
  clearInterval(scrollTimer);
  }, js-function">js-keyword">functionjs-params">() {
  scrollTimer = setInterval(js-function">js-keyword">functionjs-params">() {
  scrollNews(js-variable">$this);
  }, js-number">2000);
  }).trigger(js-string">"mouseleave");

  js-function">js-keyword">function js-title">scrollNewsjs-params">(obj) {
    js-keyword">var js-variable">$self = obj.find(js-string">"ul");
    js-keyword">var lineHeight = js-variable">$self.find(js-string">"li:first").height();
    js-variable">$self.animate({
        js-string">"marginTop": -lineHeight + js-string">"px"
        }, js-number">600, js-function">js-keyword">functionjs-params">() {
        js-variable">$self.css({
        marginTop: js-number">0
        }).find(js-string">"li:first").appendTo(js-variable">$self);
    })
  }

转盘抽奖：
css:

js css">*js-rules">{
js-rule">js-attribute">padding:js-value">js-number">0;
    js-rule">js-attribute">margin:js-value">js-number">0;
js-rule">}
js-tag">ul js-tag">lijs-rules">{
    js-rule">js-attribute">list-style:js-value">none;
js-rule">}
js-class">.mainjs-rules">{
    js-rule">js-attribute">width:js-value">js-number">500px;
    js-rule">js-attribute">height:js-value">js-number">500px;
    js-rule">js-attribute">overflow:js-value">hidden;
    js-rule">js-attribute">margin:js-value">js-number">100px auto;
    js-rule">js-attribute">background:js-value">skyblue;
js-rule">}
js-class">.main>js-tag">uljs-rules">{
    js-rule">js-attribute">width:js-value">js-number">340px;
    js-rule">js-attribute">height:js-value">js-number">360px;
    js-rule">js-attribute">margin:js-value">js-number">80px auto;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-rules">{
    js-rule">js-attribute">width:js-value">js-number">100px;
    js-rule">js-attribute">height:js-value">js-number">100px;
    js-rule">js-attribute">float:js-value">left;
    js-rule">js-attribute">border-radius:js-value">js-number">10px;
    js-rule">js-attribute">background:js-value">js-hexcolor">#fff;
    js-rule">js-attribute">margin-bottom:js-value">js-number">20px;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-class">.middle_lijs-rules">{
    js-rule">js-attribute">margin:js-value">js-number">0 js-number">20px;
js-rule">}
js-class">.main>js-tag">ul>js-tag">li>js-tag">imgjs-rules">{
    js-rule">js-attribute">width:js-value">js-number">100%;
    js-rule">js-attribute">height:js-value">js-number">100%;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-class">.start_btnjs-rules">{
    js-rule">js-attribute">background:js-value">transparent;
js-rule">}
js-class">.main>js-tag">ul>js-tag">lijs-class">.activejs-rules">{
    js-rule">js-attribute">background:js-value">yellow;
js-rule">}

html:

js xml">js-tag"><js-title">div js-attribute">class=js-value">"main" js-attribute">id=js-value">"main">
    js-tag"><js-title">ul js-attribute">id=js-value">"gif_ul">
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_0">
            js-tag"><js-title">img js-attribute">src=js-value">"1.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_1 middle_li">
            js-tag"><js-title">img js-attribute">src=js-value">"2.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_2">
            js-tag"><js-title">img js-attribute">src=js-value">"3.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_7">
            js-tag"><js-title">img js-attribute">src=js-value">"4.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"middle_li start_btn" js-attribute">id=js-value">"start">
            js-tag"><js-title">img js-attribute">src=js-value">"start.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_3">
            js-tag"><js-title">img js-attribute">src=js-value">"6.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_6">
            js-tag"><js-title">img js-attribute">src=js-value">"7.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_5 middle_li">
            js-tag"><js-title">img js-attribute">src=js-value">"8.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
        js-tag"><js-title">li js-attribute">class=js-value">"gif_li gif_li_4">
            js-tag"><js-title">img js-attribute">src=js-value">"9.png" js-attribute">alt=js-value">""/>
        js-tag"></js-title">li>
    js-tag"></js-title">ul>
js-tag"></js-title">div>

js：

js javascript">    js-keyword">var lottery={
    index:-js-number">1,    js-comment">//当前转动到哪个位置，起点位置
    count:js-number">0,    js-comment">//总共有多少个位置
    timer:js-number">0,    js-comment">//setTimeout的ID，用clearTimeout清除
    speed:js-number">100,    js-comment">//初始转动速度
    times:js-number">0,    js-comment">//转动次数
    cycle:js-number">50,    js-comment">//转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize:-js-number">1,    js-comment">//中奖位置
    init:js-function">js-keyword">functionjs-params">(id){
        js-keyword">if($(js-string">"#"+id).find(js-string">".gif_li").length>js-number">0){
            $lottery = $(js-string">"#"+id);
            $units = $lottery.find(js-string">".gif_li");
            js-keyword">this.obj = $lottery;
            js-keyword">this.count = $units.length+js-number">1;
            $lottery.find(js-string">".gif_li_"+js-keyword">this.index).addClass(js-string">"active");
        }
    },
    roll:js-function">js-keyword">functionjs-params">(){
        js-keyword">var index=js-keyword">this.index;
        js-keyword">var count = js-keyword">this.count;
        js-keyword">var lottery = js-keyword">this.obj;
        $(lottery).find(js-string">".gif_li_"+index).removeClass(js-string">"active");
        index += js-number">1;
        js-keyword">if (index>count-js-number">1) {
            index = js-number">0;
        };
        $(lottery).find(js-string">".gif_li_"+index).addClass(js-string">"active");
        js-keyword">this.index=index;
        js-keyword">return js-literal">false;
    },
    stop:js-function">js-keyword">functionjs-params">(index){
        js-keyword">this.prize=index;
        js-keyword">return js-literal">false;
    }
}

js-function">js-keyword">function js-title">rolljs-params">(){
    lottery.times += js-number">1;
    lottery.roll();js-comment">//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    js-keyword">if (lottery.times > lottery.cycle+js-number">10 && lottery.prize==lottery.index) {
        clearTimeout(lottery.timer);
        lottery.prize=-js-number">1;
        lottery.times=js-number">0;
        click=js-literal">false;
    }js-keyword">else{
        js-keyword">if (lottery.times<lottery.cycle) {
            lottery.speed -= js-number">10;
        }js-keyword">else js-keyword">if(lottery.times==lottery.cycle) {
            js-keyword">var index = js-built_in">Math.random()*(lottery.count)|js-number">0;js-comment">//中奖物品位置为随机数
            lottery.prize = index;        
        }js-keyword">else{
            js-keyword">if (lottery.times > lottery.cycle+js-number">10 && ((lottery.prize==js-number">0 && lottery.index==js-number">7) || lottery.prize==lottery.index+js-number">1)) {
                lottery.speed += js-number">110;
            }js-keyword">else{
                lottery.speed += js-number">20;
            }
        }
        js-keyword">if (lottery.speed<js-number">40) {
            lottery.speed=js-number">40;
        };

        lottery.timer = setTimeout(roll,lottery.speed);js-comment">//循环调用
    }
    js-keyword">return js-literal">false;
}
js-keyword">var click=js-literal">false;

js-comment">//转盘开始
js-function">js-keyword">function js-title">startjs-params">(){
    js-keyword">if (click) {js-comment">//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
        js-keyword">return js-literal">false;
    }js-keyword">else{
        lottery.speed=js-number">200;
        roll();    js-comment">//转圈过程不响应click事件，会将click置为false
        click=js-literal">true; js-comment">//一次抽奖完成后，设置click为true，可继续抽奖
        js-keyword">return js-literal">false;
    }
}

window.onload=js-function">js-keyword">functionjs-params">(){
    lottery.init(js-string">'gif_ul');
    $(js-string">"#start").unbind().bind(js-string">"click",js-function">js-keyword">functionjs-params">(){
        start();
    })
}

http://www.niftyadmin.cn/n/1202782.html

相关文章

spring cloud微服务分布式云架构-Spring Cloud Netflix

spring cloud微服务分布式云架构-Spring Cloud Netflix

该项目通过自动配置为Spring Boot应用程序提供Netflix OSS集成&#xff0c;并绑定到Spring环境和其他Spring编程模型成语。通过几个简单的注释&#xff0c;您可以快速启用和配置应用程序中的常见模式&#xff0c;并通过经过测试的Netflix组件构建大型分布式系统。提供的模式包括…
阅读更多...
js 阿拉伯数字转化为中文数字

js 阿拉伯数字转化为中文数字

作为一个中国人&#xff0c;总会在某个瞬间觉得中文是那样的美&#xff0c;中华文化是那样的博大精深。当书写数字时&#xff0c;都不忘了使用中文式的数字&#xff0c;比如写单据&#xff0c;章节名时&#xff0c;写上中文数字显得高大上一些。在这里&#xff0c;就和大家分享…
阅读更多...
ARTS 第一周

ARTS 第一周

Algorithm 以前在学校的时候还写算法题&#xff0c;工作快2年了&#xff0c;只剩下个影响。按照难度排名最低的一道题错了4次&#xff0c;第五次才 AC。 Review Tip Share
阅读更多...
一台WAF价格大约是多少？想买WAF的先来了解下。

一台WAF价格大约是多少？想买WAF的先来了解下。

最近有朋友咨询&#xff0c;说想买台WAF&#xff0c;向我打听价格&#xff0c;我便查了一些信息&#xff0c;供他参考&#xff0c;常见的WAF价格如下&#xff1a;品牌&#xff1a;F5型号&#xff1a;F5-BIG-ASM-i5600价格&#xff1a;55万8千元延保服务1年&#xff1a;72540.0元…
阅读更多...
HBuilder创建App并打包发布

HBuilder创建App并打包发布

如今&#xff0c;各式的代码编辑器层出不穷&#xff0c;一门语言的使用就会产生多个编辑器&#xff0c;就以前端而言&#xff0c;前端代码的编辑目前小编就熟悉了四款&#xff1a;Sublime、WebStorm、HBuilder、HBuilderX。曾经小编以为&#xff0c;HBuilder只是前端的代码编辑…
阅读更多...
精读《Function VS Class 组件》

精读《Function VS Class 组件》

1. 引言 为什么要了解 Function 写法的组件呢&#xff1f;因为它正在变得越来越重要。 那么 React 中 Function Component 与 Class Component 有何不同&#xff1f; how-are-function-components-different-from-classes 这篇文章带来了一个独特的视角。 顺带一提&#xff0c;…
阅读更多...
win10 安装Git 点击git bash 闪退问题解决方案

win10 安装Git 点击git bash 闪退问题解决方案

Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理。通过Git,可以将代码上传至github中&#xff0c;通过github的迭代进行版本的控制等。而每一款软件的使用&#xff0c;总是离不开安装&#xff0c;原本git的安装是十分快捷的&a…
阅读更多...
xampp安装

xampp安装

XAMPP&#xff08;ApacheMySQLPHPPERL&#xff09;是一个功能强大的建站集成软件包&#xff0c; 是一个易于安装且包含 MySQL、PHP 和 Perl 的 Apache 发行版。小编在安装MySQL的路上不断碰壁&#xff0c;虽然是越挫越勇&#xff0c;但是&#xff0c;一旦挫太多次了也就没有那份…
阅读更多...
最新文章

Copyright @ 2022~2023