一个简单的小动画效果-js教程-PHP中文网

首页

web前端

js教程

一个简单的小动画效果

PHP中文网

Jun 19, 2017 pm 05:34 PM

动画区域效果

演示效果：

项目需要做这个效果，把效果写出来了顺便就封装成了一个插件，也练习了一下插件的写法。

代码：

html:这个没什么说的，就是简单的布局：在图片上有一个介绍，介绍定位在区域外部。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css?1.1.10" /><script src="js/jquery-2.1.0.js?1.1.10" type="text/javascript" charset="utf-8"></script><script src="js/TweenMax.js?1.1.10" type="text/javascript" charset="utf-8"></script><style type="text/css">ul {width: 800px;margin: 100px auto;}ul li {display: inline-block;width: 45%;cursor: pointer;position: relative;margin-top: 30px;overflow: hidden;}ul li img {width: 100%;height: 100%;}ul li .info {position: absolute;width: 100%;height: 100%;top: 100%;left: 100%;background-color: rgba(255, 255, 255, .6);color: #f00;text-align: center;line-height: 80px;}</style></head><body><ul class="clearfix"><li> <img src="img/animation1.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation2.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation3.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation4.jpg" /><div class="info">点我吧</div></li></ul><script src="js/lonelyAni.js?1.1.10" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {
                $("ul li").lonelyMove({
                    moveClass: ".info"});
            });</script></body></html>

登录后复制

JS插件效果:把效果封装成了一个插件，以后直接调用就行了。

//移入移出插件(function($) {
    $.fn.extend({"lonelyMove": function(options) {var defaults = {
                time: .3,
                close: null}var opts = $.extend(true, defaults, options);var vision = /mobile/.test(navigator.userAgent.toLowerCase());return $(this).on(&#39;mouseenter mouseleave&#39;, function(event) {if(!vision) {var event = event || window.event,
                        liWidth = $(this).width(),
                        liHeight = $(this).height(),
                        u0 = (event.pageX - ($(this).offset().left) - (liWidth / 2)) * (liWidth > liHeight ? (liHeight / liWidth) : 1),
                        F0 = (event.pageY - ($(this).offset().top) - (liHeight / 2)) * (liHeight > liWidth ? (liWidth / liHeight) : 1),
                        index = Math.round((((Math.atan2(F0, u0) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
                        location = [{&#39;top&#39;: "-100%",&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: "100%"}, {&#39;top&#39;: "100%",&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: "-100%"}],
                        type = event.type;if(type == &#39;mouseenter&#39;) {
                        $(this).find(opts.moveClass).css(location[index]);
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: {
                                top: 0,
                                left: 0},
                            ease: Cubic.Linear
                        });
                    } else {
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: location[index],
                            ease: Cubic.Linear
                        });
                    }
                }
            });
        }
    });
})(jQuery);

登录后复制

以上是一个简单的小动画效果的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7529

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

用户遭遇罕见故障三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告

CSS动画：如何实现元素的闪光效果 Nov 21, 2023 am 10:56 AM

CSS动画：如何实现元素的闪光效果，需要具体代码示例在网页设计中，动画效果有时可以为页面带来很好的用户体验。而闪光效果是一种常见的动画效果，它可以使元素更加引人注目。下面将介绍如何使用CSS实现元素的闪光效果。一、闪光的基本实现首先，我们需要使用CSS的animation属性来实现闪光效果。animation属性的值需要指定动画名称、动画执行时间、动画延迟时

动画不工作在PowerPoint中[修复] Feb 19, 2024 am 11:12 AM

您是否正在尝试制作演示文稿，但无法添加动画？如果动画在你的WindowsPC上的PowerPoint中不起作用，那么这篇文章将会帮助你。这是一个常见的问题，许多人都在抱怨。例如，在Microsoft团队中演示或在屏幕录制期间，动画可能会停止工作。在本指南中，我们将探索各种故障排除技术，以帮助您修复在Windows上的PowerPoint中无法运行的动画。为什么我的PowerPoint动画不起作用？我们注意到可能导致Windows上PowerPoint中的动画无法工作问题的一些可能原因如下：由于个

九州风神阿萨辛 4S 散热器评测风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系

ppt动画如何设置先进入再退出 Mar 20, 2024 am 09:30 AM

我们在日常的办公中经常会使用到ppt，那么你是否对ppt里边的每个操作功能都很了解呢？例如：ppt中怎么设置动画效果、怎么设置切换效果、每个动画的效果时长是多少？每个幻灯片能不能自动播放、ppt动画先进入再退出等等，那么今天这期我就先跟大家分享ppt动画先进入再退出的具体操作步骤，就在下方，小伙伴们快来看一看吧！1.首先，我们在电脑中打开ppt，单击文本框外侧选中文本框，（如下图红色圈出部分所示）。2.然后，单击菜单栏中的【动画】，选中【擦除】的效果，（如图红色圈出部分所示）。3.接下来，单击【

春日里的精致光影艺术，哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入

跳票 2 年，国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，国产3D动画电影《二郎神之深海蛟龙》发布一组最新剧照，正式宣布将于7月13日上映。据了解，《二郎神之深海蛟龙》是由迷狐星（北京）动漫有限公司、霍尔果斯众合千澄影业有限公司、浙江横店影业有限公司、浙江共赢影业有限公司、成都天火科技有限公司、华文映像（北京）影业有限公司出品，王君执导的动画电影，原定2022年7月22日在中国大陆上映。本站剧情简介：封神之战后，姜子牙携“封神榜”分封诸神，而后封神榜被天庭密封于九州秘境深海之下。事实上，除了分封神位，封神榜中还封缄着众多强大的妖邪元

宫崎骏动画电影《红猪》延长上映至明年 1 月 16 日，豆瓣 8.6 分 Dec 18, 2023 am 08:07 AM

本站消息，宫崎骏动画电影《红猪》宣布将上映时间延长至2024年1月16日本站此前报道，《红猪》已于11月17日登陆全国艺联专线影院，累计票房超2000万，豆瓣评分8.6分，4、5星好评占85.8%。《红猪》由吉卜力工作室制作，宫崎骏执导，森山周一郎、加藤登纪子、大冢明夫、冈村明美等参与配音，最初于1992年在日本上映。该片改编自宫崎骏漫画作品《飞行艇时代》，讲述了意大利空军的王牌飞行员波鲁克・罗森被施了魔法变成了一头猪。之后，他成为了一位赏金猎人，打击空中劫匪，保护身边人。剧情简介：罗森是一战中

See all articles

一个简单的小动画效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题