jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
本文實(shí)例講述了jQuery+css實(shí)現(xiàn)的動(dòng)態(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動(dòng)畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
- jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果(附demo源碼下載)
- jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果
- jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果
- jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
- jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
- jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
- jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼
相關(guān)文章
jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹
這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區(qū)別介紹的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果
這篇文章主要介紹了基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果的相關(guān)資料,需要的朋友可以參考下2015-09-09jquery實(shí)現(xiàn)動(dòng)態(tài)畫圓
這篇文章主要給大家分享了一段jquery實(shí)現(xiàn)動(dòng)態(tài)畫圓代碼,需要的朋友可以參考下2014-12-12jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片
本文給大家分享的是使用jQuery插件animateSlide制作多點(diǎn)滑動(dòng)幻燈片特效,十分的炫酷,有需要的小伙伴可以參考下2015-06-06jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08