Js 之turn.js翻书效果
一、效果图
二、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>翻书效果</title> <link rel="stylesheet" href="css/base.css"> <style> .flipbook div{ color: #fff; } </style> </head> <body> <div class="book_content flipbook"> <div class="page_d"><span class="text"> 当代大学生群体由于其特殊的年龄阶段、成长经历及社会压力，心理健康问题越来越受到各方关注。近年来的调查资料表明，大学生心理困惑、障碍乃至变态导致的行为异常普遍存在且日益严重，严重影响了该群体的身心健康和学业成就，也导致家庭幸福和社会安宁受到损害，引起党和政府以及教育界、医学界的高度重视。早在1998年，《中共中央国务院关于深化教育改革全面推进素质教育的决定》就明确指出了心理健康教育的目的和路径。2001年教育部教社政【2001】1号文件进一步明儿了高等学校大学生心理健康教育工作的主要任务、工作原则、基本思路等，为大学生心理健康干预指明了方向。由此，关于大学生心理健康的研究深入发展，各高校陆续采取多种手段对学生进行心理健康教育和干预，取得了一定的成效。 关于音乐治疗 成书于汉代的《黄帝内经》详细记载了“五音”与“五脏”的关系及“五音疗疾”的原则，是存世最早的音乐治疗的文献记录，可惜具体方法失传。当代学者根据古籍记载，结合现代音乐医学理论，对“五音疗疾”的方法进行了复原，取得了一定的临床疗效。这些方法，大多局限于“听”和“唱”的范围，与针药等中医的常用手段尚未进行深入结合。 西方音乐治疗的历史同样源远流长。自二次大战以来发展起来的现代音乐治疗学首先在美国兴起并得到广泛应用，随后传到欧洲。1980年代我国学者将其引进推广，并成立了全国性的研究学会。目前，国内有不少高校设立了音乐治疗专业，并形成从本科到博士研究生不同阶段的学历教育。由于其学术源头来自于美欧，故国内的研究大多秉承了美欧音乐治疗学以心理学为主的价值取向，强调音乐技能在治疗中的作用，使其在我国心理/精神学界的普及应用受到阻碍，难以大规模推广应用。对于普通生理疾病的治疗，西方音乐治疗学更显得力不从心，无从入手。 </span></div> <div class="page_d"> <img src="images/0001.jpg" style="width: 100%;height: 50%;" alt=""> 坐落于乐清市清江镇，是一家专业生产销售曲线锯条，往复锯条，钢凿的企业。经过十几年的不断研发和创新，我们有先进的生产技术和设备，生产的产品型号齐全，款式多样，产品的质量一直深得广大客户的信赖和好评。公司拥有自营出口权，产品不仅主销全国各地，更远销海外市场。 </div> <div class="page_d"> <video src="1.mp4" style="width: 100%;" controls></video> <span class="text">以音乐为媒介进行心理调整，同时以音乐振动对人体经络产生的作用进行生理干预，与传统心理干预方法相结合，这样不仅发挥了现代化工具一定程度替代人工的效能，缩短了干预时间和周期，提高了干预效果，而且能够受到学生欢迎，利于普及和推广。本课题的研究，以借助音乐治疗仪这一科学工具为特色，有别于以往研究重“软件”（教育、咨询方法和技巧）、轻“硬件”（仪器设备）的做法，力图通过有效运用现代化工具，提高效率，降低成本，提高对重度心理障碍和心理危机的干预效果，有效降低转诊率。 基于中医理论的心理干预方法</span> </div> </div> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/hash.js"></script> <script type="text/javascript" src="js/turn.js?v=1.0"></script> <script type="text/javascript"> $(function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机 } else if (u.indexOf('iPhone') > -1) {//苹果手机 //屏蔽ios下上下弹性 $(window).on('scroll.elasticity', function (e) { e.preventDefault(); }).on('touchmove.elasticity', function (e) { e.preventDefault(); }); } else if (u.indexOf('Windows Phone') > -1) {//winphone手机 } var w = $(window).width(); var h = $(window).height(); $('.flipboox').width(w).height(h); $(window).resize(function () { w = $(window).width(); h = $(window).height(); $('.flipboox').width(w).height(h); }); $('.flipbook').turn({ width: w, height: h, acceleration:true, //设置硬件加速模式，对于触摸设备，此值必须为真 //elevation: 50, //转换期间页面的高度 elevation: 0, //转换期间页面的高度 duration: 1000, //翻页速度，值越小越快 gradients: true, //翻页过程中显示渐变和阴影 autoCenter: true, display: 'single', //设置单页还是双页 when: { turning: function (event, page, pageObject) { var book = $(this), currentPage = book.turn('page'), pages = book.turn('pages'); Hash.go('page/' + page).update(); closeVideo() }, turned: function(event, page, view) { $(this).turn('center'); if (page==1) { //设置右下角翻起 //$(this).turn('peel', 'br'); } }, } }); //设置地址hash，URIs - Format #/page/1 Hash.on('^page\/([0-9]*)$', { yep: function(path, parts) { var page = parts[1]; if (page!==undefined) { if ($('.flipbook').turn('is')) $('.flipbook').turn('page', page); } }, nop: function(path) { if ($('.flipbook').turn('is')) $('.flipbook').turn('page', 1); } }); }); function closeVideo() { $(".flipbook").find('video').each(function (k, v) { $(this).load(); $(this).stop(); }) } </script> </body> </html>
