jQuery+css實(shí)現(xiàn)炫目的動態(tài)塊漂移效果
本文實(shí)例講述了jQuery+css實(shí)現(xiàn)的動態(tài)塊漂移效果.分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > function createColor() { var color = []; for (var i = 0; i < 3; i++) { color.push(Math.round(Math.random() * 256)); } return "rgb(" + color.join(",") + ")" } function createRect(left, top, index) { var width = Math.round(Math.random() * 150) + 10; var height = Math.round(Math.random() * 150) + 10; left = left > width ? left - width : left; top = top > height ? top - height : top; var html = []; html.push('<div id="rect_'+index+'" class="rect shadow radius" style="background:'); html.push(createColor()); html.push(';left:'); html.push(left); html.push('px;top:'); html.push(top); html.push('px;width:'); html.push(width); html.push('px; height:'); html.push(height); html.push('px;"></div>'); return html.join(""); } function initRect() { var body = $("#body"); var width = body.width(); var height = body.height(); var index = new Date().getTime(); body.append(createRect(Math.round(Math.random() * width), Math.round(Math.random() * height), index)); setAnimate(index, height); } function setAnimate(index, height) { var rect = $("#rect_" + index); var top = parseInt(rect.position().top); var selfHeight = rect.height(); if (top > height - selfHeight) { rect.remove(); initRect(); } else { var filter = top / height; rect.css({ "top": (top + 5) + "px", "opacity": filter }); setTimeout(function () { setAnimate(index, height); }, 33); } } function initAllRect() { for (var i = 0; i < 20; i++) { initRect(); } } $(document).ready(function () { initAllRect(); }); </script> <style type="text/css" > .rect { background:#DDDDDD; width:100px; height:100px; position:absolute; } .radius { border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } .shadow { -moz-box-shadow:-5px -5px 5px #999 inset; -webkit-box-shadow:-5px -5px 5px #999 inset; box-shadow:-5px -5px 5px #999 inset; } #body { height:700px; width:100%; background:black; margin:0; } </style> </head> <body> <div id="body" class="shadow radius"> </div> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery+css實(shí)現(xiàn)的時鐘效果(兼容各瀏覽器)
- jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動的正方形效果(附demo源碼下載)
- jquery+css3實(shí)現(xiàn)會動的小圓圈效果
- jQuery+css實(shí)現(xiàn)的換頁標(biāo)簽欄效果
- jQuery+CSS實(shí)現(xiàn)滑動的標(biāo)簽分欄切換效果
- jquery+css實(shí)現(xiàn)動感的圖片切換效果
- jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
- jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
- jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級導(dǎo)航菜單效果代碼
- jquery+CSS3模擬Path2.0動畫菜單效果代碼
相關(guān)文章
jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果
這篇文章主要介紹了基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果的相關(guān)資料,需要的朋友可以參考下2015-09-09jQuery插件animateSlide制作多點(diǎn)滑動幻燈片
本文給大家分享的是使用jQuery插件animateSlide制作多點(diǎn)滑動幻燈片特效,十分的炫酷,有需要的小伙伴可以參考下2015-06-06jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁面指定位置的實(shí)例
下面小編就為大家?guī)硪黄猨query 仿錨點(diǎn)跳轉(zhuǎn)到頁面指定位置的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02