jquery는 하늘에 날아다니는 눈송이와 크리스마스 축복 눈송이 효과 코드 공유를 실현합니다_jquery
- WBOY원래의
- 2016-05-16 15:43:571583검색
하늘에 날아다니는 눈송이를 구현한 jquery 기반의 크리스마스 축복 눈송이 효과 코드입니다. 눈송이의 크기도 변경할 수 있고, 배경 이미지도 변경할 수 있어 매우 실용적인 슬라이드쇼 특집입니다. 효과 소스 코드.
하늘에 날아다니는 눈송이를 사용한 jquery 크리스마스 축복 눈송이 효과를 클릭하여 다양한 효과를 선택할 수 있습니다. 즐겨보세요.
효과 시연 소스코드 다운로드 (브라우저에서 제대로 작동하지 않으면 브라우징 모드를 전환하거나 직접 다운로드를 선택하세요)
하늘을 나는 눈송이에 대한 jquery 크리스마스 축복 눈송이 효과 코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="images/jquery-latest.min.js"></script>
<script src='images/snowfall.jquery.js'></script>
<link rel="stylesheet" href="images/styles.css"></link>
</head>
<body class="darkBg">
<input type="button" id="clear" value="Click to clear"/>
<input type="button" id="round" value="Rounded"/>
<input type="button" id="shadows" value="Shadows"/>
<input type="button" id="roundshadows" value="Rounded Shadows"/>
<input type="button" id="deviceorientation" value="Deviceorientation"/>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
</body>
<script type='text/javascript'>
$(document).ready(function(){
$('.collectonme').hide();
//Start the snow default options you can also make it snow in certain elements, etc.
$(document).snowfall();
$("#clear").click(function(){
$(document).snowfall('clear'); // How you clear
});
$("#round").click(function(){
document.body.className = "darkBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
});
$("#shadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, flakeCount:200}); // add shadows
});
$("#roundshadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
});
$("#deviceorientation").click(function(){
$(document).snowfall('clear');
$('.collectonme').hide();
document.body.className = "darkBg";
$(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
});
});
</script>
<p align="center"><font color="#FFFFFF">来源：</font><a href="http://www.jb51.net/" target="_blank"><font color="#FFFFFF">脚本之家</font></a></p>
</html>
위는 날아다니는 눈송이에 대한 jquery 크리스마스 축복 눈송이 효과 코드입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.