web前端|js教程
jquery飘落效果,jquery花瓣,jquery,飘落
web前端-js教程
飘花效果的实现——效果图：
素材图库网站源码,ubuntu查看ply文件,python 爬虫高级班,php dwva,增加博客seolzw
脑图软件 源码,魅族ubuntu版块,php可以爬虫吗,php srtipos,seo网站粘度lzw
查看演示 源码下载
什么叫做酒店市场码来源码,vscode插入图片,ubuntu很小,tomcat 注解扫描,sqlite需要root么,wordpress插件授权码,前端混合框架是啥意思,爬虫图片识k线,php 语言包,怎么快速做seo,手机电商网站ui模板,php 网页聊天室系统,word底版模板lzw
需求：
一个jquery，，，这个看标题么就知道了
jQuery Transit还有这个东西
/rstacruz/jquery.transit
jquery对一些效果的扩展
飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现
飘花比人物的层级都高
飘花数量非常多
飘花会有一定的轨迹运动
飘花带有渐变的效果
飘花带有旋转的效果
飘花落到地面会消失
这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以
实现原理：
通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等
执行的流程：
getImagesName随机6张图片，snowflakeURl定义一个地址的范围
createSnowBox创建雪花元素的节点，并且增加一个snowRoll的样式，也就是旋转的关键帧实现
定时器设置200ms不断的生成雪花对象，计算出3个属性的初始值，通过createSnowBox创建雪花元素，并且附上初始值，然后执行transition附上最终值，执行动画
动画结束后执行$(this).remove() 删除这个对象
然后精简一下代码，因为我只要飘花效果
获取外面#content的宽高
然后#snowflake里面做效果
#content { width: 100%; height: 100%; top: 42px;overflow: hidden; position: absolute; }
然后么css么就是这样了，top：42px是因为我的导航高度
#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; } @-webkit-keyframes mysnow { 0% { bottom: 100%;} 50% { -webkit-transform: rotate(1080deg);} 100% { -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);}} @-moz-keyframes mysnow { 0% { bottom: 100%;} 50% { -moz-transform: rotate(1080deg);} 100% { -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);}}
这里是给飘花加旋转之类的css3特技
$(function() { var snowflakeURl = [ /cnblogs_com/LoveOrHate/723567/o_1.jpg alt="jquery+css3实现网页背景花瓣随机飘落特效【javascript】" title="jquery+css3实现网页背景花瓣随机飘落特效【javascript】", /cnblogs_com/LoveOrHate/723567/o_2.jpg, /cnblogs_com/LoveOrHate/723567/o_3.jpg, /cnblogs_com/LoveOrHate/723567/o_4.jpg, /cnblogs_com/LoveOrHate/723567/o_5.jpg, /cnblogs_com/LoveOrHate/723567/o_6.jpg ] //js设置数组存储6张花瓣的图片 var container = $("#content"); visualWidth = container.width(); visualHeight = container.height();//获取content的宽高 /////// //飘雪花 // /////// function snowflake() { // 雪花容器 var $flakeContainer = $(#snowflake); // 随机六张图 function getImagesName() { return snowflakeURl[[Math.floor(Math.random() * 6)]]; } // 创建一个雪花元素 function createSnowBox() { var url = getImagesName(); return $(
).css({ width: 41, height: 41, position: absolute, ackgroundSize: cover, zIndex: 100000, op: -41px, ackgroundImage: url( + url + ) }).addClass(snowRoll); } // 开始飘花 setInterval(function() { // 运动的轨迹 var startPositionLeft = Math.random() * visualWidth - 100, startOpacity = 1, endPositionTop = visualHeight - 40, endPositionLeft = startPositionLeft - 100 + Math.random() * 500, duration = visualHeight * 10 + Math.random() * 5000; // 随机透明度，不小于0.5 var randomStart = Math.random(); randomStart = randomStart < 0.5 ? startOpacity : randomStart; // 创建一个雪花 var $flake = createSnowBox(); // 设计起点位置 $flake.css({ left: startPositionLeft, opacity : randomStart }); // 加入到容器 $flakeContainer.append($flake); // 开始执行动画 $flake.transition({ top: endPositionTop, left: endPositionLeft, opacity: 0.7 }, duration, ease-out, function() { $(this).remove() //结束后删除 }); }, 200); } snowflake()//执行函数})
以上代码就是本文使用jquery实现网页背景花瓣随机飘落特效，希望大家喜欢。
如果觉得《jquery+css3实现网页背景花瓣随机飘落特效【javascript】》对你有帮助，请点赞、收藏，并留下你的观点哦！
