逆流悲心 2015-01-27 07:34 采纳率: 0%
浏览 3704

idangerous.swiper.js怎么样获取当前页面

<!DOCTYPE html>



demo







<br> body { margin: 0; }<br> .swiper-container { width: 100%; height: 480px; }<br> .swiper-slide img { width: 100%; }<br> #audio_btn { position: absolute; left: 10px; bottom: 10px; z-index: 200; display: none; width: 50px; height: 50px; background-repeat: no-repeat; }<br> .loading_background { background-image: url(img/music_loading.gif); background-size: 30px 30px; opacity: 0.5; background-position: center center; }<br> .loading_yinfu { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-image: url(img/yinfu.png); background-repeat: no-repeat; background-position: center center; }<br> .play_yinfu { background-image: url(img/music.gif); background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; }<br> .rotate { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background-size: 100% 100%; background-image: url(img/music_off.png); -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite; }<br> @-webkit-keyframes rotating { from {<br> -webkit-transform: rotate(0deg);<br> }<br> to { -webkit-transform: rotate(360deg); }<br> }<br> @keyframes rotating { from {<br> transform: rotate(0deg);<br> }<br> to { transform: rotate(360deg); }<br> }<br> @-moz-keyframes rotating { from {<br> -moz-transform: rotate(0deg);<br> }<br> to { -moz-transform: rotate(360deg); }<br> }<br> .off { background-image: url(img/music_off.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; }<br> @-webkit-keyframes start { 0%, 30% {<br> opacity: 0;<br> -webkit-transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> -webkit-transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> -webkit-transform: translate(0, -8px);<br> }<br> }<br> @-moz-keyframes start { 0%, 30% {<br> opacity: 0;<br> -moz-transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> -moz-transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> -moz-transform: translate(0, -8px);<br> }<br> }<br> @keyframes start { 0%, 30% {<br> opacity: 0;<br> transform: translate(0, 10px);<br> }<br> 60% {<br> opacity: 1;<br> transform: translate(0, 0);<br> }<br> 100% {<br> opacity: 0;<br> transform: translate(0, -8px);<br> }<br> }<br>

$(function(){ $('#audio_btn').click(function() { if($(this).hasClass('play_yinfu')){ $(this).attr('class','off'); $(this).find('#yinfu').removeClass(); $('audio')[0].pause(); }else{ $(this).attr('class','play_yinfu'); $(this).find('#yinfu').addClass('rotate'); $('audio')[0].play(); } }); });

var mySwiper; setTimeout("ready()", 1000); function ready(){ if($("img")[0].height == 0){ $("img")[0].onload = function () { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, mode: 'vertical', speed : 500, freeMode:true, freeModeFluid:true, // onSlidePrev:function(swiper){ // alert(2); // } }) } } else { $(".swiper-container").css("height", $("img")[0].height); mySwiper = new Swiper('.swiper-container',{ pagination: false, paginationClickable: true, mode: 'vertical', }) // mySwiper.activeSlide = function(swiper){ // alert(swiper) // $('header').addClass('animated fadeInDown'); // } } } $(".swiper-container").css("height", document.documentElement.clientHeight+"px"); $(".swiper-slide").css("height", $("img")[0].height+"px"); // alert($(".swiper-slide").css("height")+"haha"+$("img")[0].height+"nrg"+$(".swiper-container").css("height"));



要做css3动画效果，急求

  • 写回答

0条回答 默认 最新

    报告相同问题？

    悬赏问题

    • ¥15 素材场景中光线烘焙后灯光失效
    • ¥15 请教一下各位，为什么我这个没有实现模拟点击
    • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
    • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
    • ¥20 有关区间dp的问题求解
    • ¥15 多电路系统共用电源的串扰问题
    • ¥15 slam rangenet++配置
    • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
    • ¥15 ubuntu子系统密码忘记
    • ¥15 保护模式-系统加载-段寄存器