jQuery520情人节表白特效代码



21 81 28



特效描述:jQuery 520情人节表白,jQuery520情人节表白特效代码

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/snow.js"></script>

2. HTML代码

<!--start top-->
<div class="top">
	<marquee behavior="alternate">时光不老,我们不散</marquee>
</div>
<!--end top-->
<!--start box-->
<div class="box">
	<div class="pic">
		<ul>
			<li><img src="images/1.png" width="" height="" alt=""></li>
			<li><img src="images/2.png" width="" height="" alt=""></li>
			<li><img src="images/3.png" width="" height="" alt=""></li>
			<li><img src="images/4.png" width="" height="" alt=""></li>
			<li><img src="images/5.png" width="" height="" alt=""></li>
			<li><img src="images/6.png" width="" height="" alt=""></li>
		</ul>
	</div>
</div>
<!--end box-->
<!--start text-->
<div id="text"></div>
<!--end text-->
<embed src="music.mp3" hidden="true">
<!--雪花-->
<script>
	$(".pic ul li").each(function(i){//遍历
		var deg=360/$(".pic ul li").size();//size个数
		//当前的li对象 添加css样式
		$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
		$.fn.snow({
			minSize:10,
			maxSize:15,
			newOn:500,
			flakeColor:"#ffffff"
		});
	});
	var i=0;
	var str="能够遇见你是我最大的幸运,有了你生活变得丰富多彩,有了你,世界变得如此迷人;你是我的世界,我的世界是你,对我来说,不是在最美好的时光遇见了你,而是遇见你后都是最美好的时光!";
	window.onload=function typing(){
		//获取div
		var mydiv=document.getElementById("text");
		mydiv.innerHTML+=str.charAt(i);
		i++;
		var id=setTimeout(typing,100);
		if(i==str.length){
			clearTimeout(id);
		}
	}
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 旋转翻转 旋转 翻转 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到