123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <title>Document</title>
- <meta name="applicable-device" content="pc,mobile" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css' />
- <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' />
- <style type="text/css">
- /* 显示元素设定 */
- .slider {
- position: absolute;
- left: 2%;
- width: 96%;
- height: 170px;
- }
- .slider img {
- border: 5px solid #fff;
- display: block;
- height: 170px;
- }
- .slider button {
- visibility: hidden;
- }
- .msgbox {
- display: none;
- position: fixed;
- top: 50%;
- left: 50%;
- min-width: 300px;
- max-width: 600px;
- transform: translate(-50%,-50%);
- z-index: 99999;
- text-align: center;
- padding: 15px;
- border-radius: 3px;
- }
- .info {
- color: #ffc152;
- background-color: #ff;
- border-color: #d6e9c6;
- }
- .error {
- color: #a94442;
- background-color: #f2dede;
- border-color: #ebccd1;
- }
- </style>
- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
- <script type="text/javascript">
- const DOUBAN_TAGS = ["电影", "电视剧", "动漫"];
- const DOUBAN_URL = 'https://movie.douban.com/j/new_search_subjects?range=0,10&start=0&tags={0}&countries=&sort=U&year_range=2021,2021';
- const DOUBAN_DETAIL_URL = 'web://https://movie.douban.com/subject/';
- const HAIKUO_SEARCH_URL = 'hiker://search?s=';
- const MAX_SLIDER_SIZE = 20; // 最大图片显示张数
- const PLAY_SPEED = 3000; // 播放速度
- const PRESS_EVENT_TIMER = 1000; // 长按事件毫秒数
- const CACHE_TIMEOUT = 60 * 60 * 1000; // 缓存超时时间
- const SHAKE_THRESHOLD = 1800; // 摇一摇 摇动幅度
- const SHAKE_TIMES = 4; // 摇一摇 摇动次数
- const SHAKE_TIMER = 100; // 摇一摇 摇动检测间隔
- const SHAKE_CLEAR_TIMER = 500; // 摇一摇 摇动数据清空间隔
- const SHAKE_SLIDER_CHANGE_TXT = '滚屏切换中'; // 摇一摇切换文字
- let timeOutEvent = 0;
- let lastUpdate = 0;
- let x = y = z = lastX = lastY = lastZ = 0;
- let currentTagIdx = 0;
- let shakeTimes = 0;
- let showInfoMsg = (msg, timeout) => {
- $('.msgbox').html(msg).addClass('info').show().delay(timeout).fadeOut();
- };
- let showErrorMsg = (msg, timeout) => {
- $('.msgbox').html(msg).addClass('error').show().delay(timeout).fadeOut();
- };
- // 点击
- let imgClick = (title) => {
- location.href = HAIKUO_SEARCH_URL + title;
- };
- // 长按
- let imgTouch = (id) => {
- location.href = DOUBAN_DETAIL_URL + id;
- };
- let getCache = () => {
- let cache = localStorage.getItem("DOUBAN_CACHE")
- if (cache) {
- let cacheArray = JSON.parse(cache);
- return Array.isArray(cacheArray) ? cacheArray : null;
- } else {
- return null;
- }
- };
- let readFromDouban = (url, callback) => {
- $.get(url)
- .done((data) => {
- if (!data.data) callback();
- let cache = getCache();
- if (!cache) cache = [];
- cache[currentTagIdx] = { time: new Date().getTime(), data: data };
- localStorage.setItem('DOUBAN_CACHE', JSON.stringify(cache));
- callback();
- })
- .fail(() => {
- callback();
- });
- };
- let getDoubanData = (processDataCallback) => {
- let cache = getCache();
- let now = new Date().getTime();
- let doCallback = () => {
- cache = getCache();
- processDataCallback((cache && cache[currentTagIdx]) ? cache[currentTagIdx].data : null);
- };
- if (!cache || !cache[currentTagIdx] || now > cache[currentTagIdx].time + CACHE_TIMEOUT) {
- let url = DOUBAN_URL.replace("{0}", DOUBAN_TAGS[currentTagIdx]);
- readFromDouban(url, () => {
- doCallback();
- });
- } else {
- doCallback();
- }
- };
- let processData = (data) => {
- if (!data && !data.data) {
- showErrorMsg('出錯啦!', 5000);
- return;
- }
- for (let i = 0; i < MAX_SLIDER_SIZE && data.data.length > i; i++) {
- let image = $('<img>').attr('src', data.data[i].cover);
- image.on('touchstart', () => {
- timeOutEvent = setTimeout(() => {
- timeOutEvent = 0;
- // 长按事件
- imgTouch(data.data[i].id);
- }, PRESS_EVENT_TIMER);
- });
- image.on('touchmove', () => {
- clearTimeout(timeOutEvent);
- timeOutEvent = 0;
- });
- image.on('touchend', () => {
- clearTimeout(timeOutEvent);
- if (timeOutEvent != 0) {
- // 点击事件
- imgClick(data.data[i].title);
- }
- });
- $('.slider').append(image);
- }
- $('.slider').slick({
- lazyLoad: 'ondemand',
- autoplaySpeed: PLAY_SPEED,
- slidesToShow: 3,
- autoplay: true,
- slidesToScroll: 1,
- pauseOnFocus: false,
- pauseOnHover: false,
- pauseOnDotsHover: false
- });
- };
- // 摇一摇
- deviceShaking = () => {
- currentTagIdx++;
- if (currentTagIdx >= DOUBAN_TAGS.length) currentTagIdx = 0;
- showInfoMsg("当前分类: " + DOUBAN_TAGS[currentTagIdx], 1000);
- $('.slider').html('').removeClass().addClass('slider');
- getDoubanData((data) => {
- processData(data);
- });
- };
- let deviceMotionHandler = (e) => {
- let acceleration = e.accelerationIncludingGravity;
- let curTime = new Date().getTime();
- if ((curTime - lastUpdate) > SHAKE_TIMER) {
- let diffTime = curTime - lastUpdate;
- lastUpdate = curTime;
- x = acceleration.x;
- y = acceleration.y;
- z = acceleration.z;
- let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
- if (speed > SHAKE_THRESHOLD) {
- shakeTimes++;
- if (shakeTimes >= SHAKE_TIMES) {
- shakeTimes = 0;
- // 摇一摇事件
- deviceShaking();
- }
- } else if (curTime - lastUpdate > SHAKE_CLEAR_TIMER) {
- shakeTimes = 0;
- }
- lastX = x;
- lastY = y;
- lastZ = z;
- }
- };
- $(document).ready(() => {
- getDoubanData((data) => {
- processData(data);
- // 添加传感器监听
- if (window.DeviceMotionEvent) {
- window.addEventListener('devicemotion', deviceMotionHandler, false);
- } else {
- showErrorMsg('您的设备不支持摇一摇', 3000);
- }
- });
- });
- </script>
- </head>
- <body>
- <div class="msgbox"></div>
- <div class="slider"></div>
- </body>
- </html>
|