微信场景制作的步骤及实例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信场景制作的步骤及实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9945字，纯文字阅读大概需要15分钟。

内容图文

微信是目前最流行的社交软件，每逢节假日，很多人都会在朋友圈分享自己的照片，有的人更是把照片做成了相册，图片的切换还伴随有音乐，这个就是微信场景。

接下来就带领大家做一个微信场景。

备注：通过本套教程的学习，能够学到触摸事件的使用，多点触摸技术，手势事件滑动方向判断的算法，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/

微信场景制作的步骤及实例代码 - 文章图片

详细代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="Pragma" contect="no-cache"><meta http-equiv="Cache-Control" contect="no-cache"><meta http-equiv="Expires" contect="0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><title></title><style type="text/css">
            @font-face {font-family:yyjcwfont;src:url(font/hand.ttf);}
            @-webkit-keyframes musicrotate {from {
                    -webkit-transform: rotate(0);}to {-webkit-transform: rotate(360deg);}}
            
            @keyframes dhfadein {from {
                    width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;z-index: 1;}to {width: 100%;height: 100%;top: 0;left: 0;opacity: 1;transform: rotate(720deg) rotateY(360deg);z-index: 100;}}
            
            
            @keyframes dhfadein-p1 {from {
                    width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:50%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p2 {from {
                    width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:60%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p3 {from {
                    width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:70%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p4 {from {
                    width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:80%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}    
            
            @keyframes dhfadein-p5 {from {
                    width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}to {width:10%;left:80%;top:10%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}    
            
            
            
            
            
            
            * {margin: 0;padding: 0;}
            html,
            body {width: 100%;height: 100%;}
            ul {width: 100%;height: 100%;list-style: none;overflow: hidden;position: relative;background:radial-gradient(white,#FC7D08);display: none;}
            ul li {width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;/*    animation: dhfadein 3s 1 forwards;*/}
            ul li img {width: 100%;height: 100%;display: block;margin: 0 auto;opacity: 1;}
            p{font-family: yyjcwfont;}
            ul li p.text1 {width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text2 {width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}ul li p.text3 {width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text4 {width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}ul li p.text5 {width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}
            .musicbox {background-image: url(images/m.jpg);background-position: 0 0;width:38px;height:38px;overflow: hidden;background-repeat: no-repeat;background-size: contain;border-radius:19px;position: absolute;z-index: 102;top: 10px;right:10px;cursor: pointer;animation:musicrotate 1s linear infinite;box-shadow: 0 0 15px 2px blue;}
            div.closeroate{animation-play-state: paused;}
            .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;}</style></head><body id="mybox"><div class="loding">加载中<img src="images/wait.gif"></div><ul><li><img src="images/01.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/02.png" /><p class="text1">当你老了，</p><p class="text2">头白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然爱慕你的美丽！</p><p class="text5">思念直到永远</p></li><li><img src="images/03.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/04.png" /><p class="text1">轻轻的我走了，</p><p class="text2">正如我轻轻的来！</p><p class="text3">我挥一挥衣袖，</p><p class="text4">不带走一片云彩！</p></li><li><img src="images/05.png" /><p class="text1">CSS3教程上线啦</p><p class="text2">QQ：1416759661！</p></li><li><img src="images/06.png" /><p class="text1">当你老了，</p><p class="text2">头白了，</p><p class="text3">睡思昏沉，</p><p class="text4">依然爱慕你的美丽！</p><p class="text5">思念直到永远</p></li><li><img src="images/07.png" /><p class="text1">两情若是久长时，</p><p class="text2">又岂在朝朝暮暮！</p></li><li><img src="images/08.png" /><p class="text1">轻轻的我走了，</p><p class="text2">正如我轻轻的来！</p><p class="text3">我挥一挥衣袖，</p><p class="text4">不带走一片云彩！</p></li><li><img src="images/09.png" /><p class="text1">CSS3教程上线啦</p><p class="text2">QQ：1416759661！</p></li></ul><audio src="music/music.mp3" autoplay="autoplay" loop="loop" id="audioPlay"></audio><div class="musicbox" id="musicbox"></div><script src="js/zepto_1.1.3.js?1.1.11" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//            $(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=setInterval(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);
            }            
            </script></body></html>

以上就是微信场景制作的步骤及实例代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的微信场景制作的步骤及实例代码全部内容，希望文章能够帮你解决微信场景制作的步骤及实例代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/392920.html

来源：【匿名】

【上一篇】HTML+CSS知识点汇总【下一篇】PHP 和 HTML

更多 ►

【微信场景制作的步骤及实例代码】教程文章相关的互联网学习教程文章

一、概述所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。二、Range 用于请求头中，指定第一个字节的位置和最后一个字节的位置，一般格式： Range:用于客户端到服务端的请求，可以通过改字段指定下载文件的某一段大小及其单位，字节偏移...

html页改成jsp的具体实例代码

一般情况，将html页改成jsp有两种方法，第一种是直接修改html文件，另一种是新建jsp文件。下面具体说一下这两种方式。假设我们要将testPage.html文件修改为testPage.jsp文件。原testPage.html文件内容为：[html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title...

分享HTML5Canvas画印章效果实例代码

$velocityCount 下面分享一个用HTML5 Canvas画印章效果实例代码，可以看一下<!DOCTYPE html> <html> <head><meta charset="gbk"><title>HTML5 Canvas画印章</title> </head> <body><canvas id="canvas" width="200" height="200"></canvas> <script>var canvas = document.getElementById("canvas"); var context = canvas.getContext(2d);var text = "XXX专用章";var companyName = "浙江网络科技股份有限公司";// 绘制印章边框...

分享一个利用H5实现下拉顶部放大的实例代码【图】

height="484"/>仿app下拉放大.gif本文只提供设计思路,即js代码.完整代码,请下载demo设计思路:1.监听整个下拉区域的touchstart事件,并记录下pageY和clientY值content.addEventListener(touchstart,function (event) {var touch = event.touches[0];startY = touch.pageY;clientY = touch.clientY; });2.监听整个区域的touchmove 事件,并判断是上移还是下移,以及滚动开始时,clientY和pageY是否相等,最后实现动画content.addEvent...

php 批量替换html标签的实例代码

1.把html元素全部去掉，或者保留某几个html标签代码如下:<?php$text = <p>Test paragraph.</p> <a href="#fragment">Other text</a>;echo strip_tags($text);echo "/n"; // Allow <p> and <a>echo strip_tags($text, <p><a>);?>结果为(去掉了注释)： <blockquote>Test paragraph. Other text<p>Test paragraph.</p> <a href="#fragment">Other text</a></blockquote>2.相反，只去掉某一个html标签代码如下:<?php...

分享一个HTML5实现拖放的实例代码

在html5中，支持拖放API接口，通过该功能，数据可以在浏览器与其他应用程序之间互相拖放，想要实现该操作，必须经过一下两个步骤（1）将想要拖放的对象标签的draggable属性设为true。这样才能将该标签进行拖放，令外，img标签与a标签必须指定为true，默认允许拖放。 (2)编写与有拖放有关的事件处理代码，常用的播放事件如下： dragstart 开始拖放操作 drag 拖放过程中 dragenter 被拖放的标签开始进入本标签的范围内...

投票系统与脚本简单刷票实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <head> <title>投票系统 & js脚本简单刷票</title> <style type="text/css"> * { padding: 0; margin: 0; } #wrap { margin: 0 auto; width: 600px; text-align: center...

html5之拖放的学习和完整实例代码

本文学习html5的拖放并完整实例代码，希望对H5初学者有帮助！1)创建来源项目 1.1)draggable属性的值： true——此元素能被拖动； false——此元素不能被拖动； auto——浏览器能够自主决定某个元素能否被拖动； 1.2）被拖动元素的事件： dragstart——在元素開始被拖动时触发； drag——在元素被拖动时重复触发。 dragend——在拖动操作完毕时触发；2）创建释放区 2.1）释放区事件： dra...

H5项目开发iOS插件功能的实例代码

HBuilder用来写H5项目，Xcode用来写iOS原生的插件，我所需实现的是，在H5页面点击打印，运行iOS原生插件来实现连接蓝牙打印机并打印出获取的内容。首先去HBuilder文档上，下载HBuilder离线打包iOS版SDK，运行HBuilder-Hello，在HBuilder-Hello项目基础上开始进行原生插件开发。HTML5+ 基座扩展采用三层结构，JS层、PluginBridge层和Native层。三层功能分别是：JS层：在Webview页面调用，触发Native层代码，获取执行结果。 Plugin...

HTML6实现折叠菜单与手风琴菜单的实例代码

页面主体部分：<body> <ul id="menu"><li> <a href="#">一级菜单1</a><ul><li>二级菜单1-1</li><li>二级菜单1-2</li><li>二级菜单1-3</li></ul> </li><li> <a href="#">一级菜单2</a><ul><li>二级菜单2-1</li><li>二级菜单2-2</li><li>二级菜单2-3</li></ul> </li><li><a href="#">一级菜单3</a><ul><li>二级菜单3-1</li><li>二级菜单3-2</li><li>二级菜单3-3</li></ul> </li><li><a href="#">一级菜单4</a><ul><li>...

HTML5拖放关于API实现拖放排序的实例代码

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。前言HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggabl...

tmalPHP生成HTML静态页面实例代码

为cd2sc.com网站功能而开发，代码为本人原创，生成速度一般。（出于众所周知的原因，涉及到数据库的数据字段名称做了改动，并且为了代码明晰去掉了参数过滤的部分）说明：原动态地址为 moban.php?id=1 ，生成后地址为 html/200808/sell_1.html 。page.php为分页程序，本博客中有发布。页面使用方式，将本代码保存为make.php，使用方法为浏览器访问 make.php?t=数量&pg=页面；例如 make.php?t=300&pg=2，即每次生成300条数据，从...

HTML中嵌入PHP的实例代码

1、把PHP嵌入HTMLPHP是可以与HTML混合使用的嵌入式语言，然而成千上万的代码中，然而如何做到区分HTML与PHP呢，PHP分解符（tags）如同界石，准确标示着PHP脚本的开始与结束位置。有四种分解符可以让PHP嵌入到HTML。(1)<?php 和?>：PhP标准的分解符。(2)<?和?>：简写的分解符。(3)<script language="php">和</script>：javaScript/VBScript风格分解符(4)<%和%>：ASP分解符。其中第一种与第二种是最常用的方法；第三种方法类似于Java...

phpHtmlReplace输入过滤安全函数实例代码

HtmlReplace是将某目录下所有 HTML 文件或选定 HTML 文件中的和间的内容替换为指定 file 的内容,这对于批量改动网页的相同内容(譬如菜单栏)特别有用.这个替换函数，可以对用户输入的一些安全过滤，防止用户提交了不安全的代码。// $rptype = 0 表示仅替换 html标记 // $rptype = 1 表示替换 html标记同时去除连续空白字符 // $rptype = 2 表示替换 html标记同时去除所有空白字符 // $rptype = -1 表示仅替换 html危险的标记 ...

phphtmlspecialchars实例代码详解

htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。预定义的字符是：& （和号）成为 &" （双引号）成为 " （单引号）成为 < （小于）成为 <> （大于）成为 >此函数返回被转换的字符串。示例代码如下://取消HTML代码 function shtmlspecialchars($string) { if(is_array($string)) { foreach($string as $key => $val) { $string[$key] = shtmlspecialchars($val); } } else { $string = preg_replace(‘/&((#(\d{3,5...

首页 / HTML / 微信场景制作的步骤及实例代码

微信场景制作的步骤及实例代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【微信场景制作的步骤及实例代码】教程文章相关的互联网学习教程文章

HTML5大文件上传详解及实例代码

html页改成jsp的具体实例代码

分享HTML5Canvas画印章效果实例代码

分享一个利用H5实现下拉顶部放大的实例代码【图】

php 批量替换html标签的实例代码

分享一个HTML5实现拖放的实例代码

投票系统与脚本简单刷票实例代码

html5之拖放的学习和完整实例代码

H5项目开发iOS插件功能的实例代码

HTML6实现折叠菜单与手风琴菜单的实例代码

HTML5拖放关于API实现拖放排序的实例代码

tmalPHP生成HTML静态页面实例代码

HTML中嵌入PHP的实例代码

phpHtmlReplace输入过滤安全函数实例代码

phphtmlspecialchars实例代码详解

实例 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程