微信是目前最流行的社交软件，每逢节假日，很多人都会在朋友圈分享自己的照片，有的人更是把照片做成了相册，图片的切换还伴随有音乐，这个就是微信场景。
接下来就带领大家做一个微信场景。
备注：通过本套教程的学习，能够学到触摸事件的使用，多点触摸技术，手势事件滑动方向判断的算法，CSS3动画调用，文字动画（动画全部自定义），音乐的播放和控制，CSS3动画的控制，网络字体的使用，js操作DOM等知识。大家学习过程中遇到任何问题可以加我QQ：1416759661.
大致步骤如下：
001、效果预览
002、创建项目
003、mete属性和径向渐变
004、添加图片
005、定位图片
006、监听触摸开始事件
007、监听触摸结束事件
008、滑动方向判断
009、上滑切换图片
010、添加过渡动画效果
011、调用动画和重置属性
012、下滑切换图片
013、添加3d旋转效果
014、添加文字效果
015、文字移动移动
016、文字样式重置
017、文字旋转效果
018、下滑文字效果
019、圆形音乐控制按钮
020、按钮旋转动画
021、停止旋转动画
022、控制音乐的播放与停止
023、自动调用动画切换效果
先体验下制作好的效果，使用微信扫描下面的二维码就可以看到效果。
也可以点击下面的链接查看效果，由于是国外的服务器，可能比较慢。
https://1416759661.github.io/changjing/
详细代码：
nbsp;html>加载中![微信场景制作的步骤及实例代码]()
两情若是久长时，
又岂在朝朝暮暮！
当你老了，
头白了，
睡思昏沉，
依然爱慕你的美丽！
思念直到永远
两情若是久长时，
又岂在朝朝暮暮！
轻轻的我走了，
正如我轻轻的来！
我挥一挥衣袖，
不带走一片云彩！
CSS3教程上线啦
QQ：1416759661！
当你老了，
头白了，
睡思昏沉，
依然爱慕你的美丽！
思念直到永远
两情若是久长时，
又岂在朝朝暮暮！
轻轻的我走了，
正如我轻轻的来！
我挥一挥衣袖，
不带走一片云彩！
CSS3教程上线啦
QQ：1416759661！
<ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>// $(function(){// // });// $(window).load(function(){// $(".loding").hide();// $("ul").show();// }); window.addEventListener('load', function(){ $(".loding").hide(); $("ul").show(); }, false); var audio = document.getElementById("audioPlay");var musicbox=document.getElementById("musicbox"); document.getElementById("musicbox").onclick=function(e){if(this.className=="musicbox") { audio.pause(); musicbox.className="musicbox closeroate"; }else{ audio.loop = true; audio.play(); this.className="musicbox"; } }; var timer1=setInter
val(function(){ sliderNext(); },13000); sliderNext();var container = document.getElementById("mybox");var start_x;var start_y;var end_x;var end_y; container.addEventListener("touchstart", function(event) { clearInterval(timer1);if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; start_x = touch.pageX; start_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchmove", function(event) { event.preventDefault();if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; move_x = touch.pageX; move_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchend", function(event) {if(event.changedTouches.length == 1) {var touch = event.changedTouches[0]; end_x = touch.pageX; end_y = touch.pageY; };var x=end_x-start_x;var y=end_y-start_y; if(Math.abs(x) > Math.abs(y) && x > 0){ console.log('向右'); }else if(Math.abs(x) > Math.abs(y) && x < 0){ console.log('向左'); }else if(Math.abs(x) < Math.abs(y) && y > 0){ console.log('向下'); sliderPre(); }else if(Math.abs(x) < Math.abs(y) && y < 0){ console.log('向上'); sliderNext(); } timer1=setInterval(function(){ sliderNext(); },13000); }, { passive: false}); function sliderNext() { var lastli = $("li:last-child")[0]; $("li:last-child").prependTo($("ul")); $("li").removeAttr("style"); lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; $("p").removeAttr("style"); lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); }function sliderPre() { $("p").removeAttr("style"); $("li:first-child").appendTo($("ul")); $("li").removeAttr("style"); var lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; lastli.addEventListener('webkitAnimationEnd', function () {//console.log('Li动画执行完毕！'); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); }
