常用jQuery代码02
一、each函数拿到每个元素的宽度
setTimeout(function () {
$(".sticker_list img").each(function () { var Width = $(this).width();
var Height = $(this).height();
// alert(Width);
// alert(Height);
$(this).css({ "margin-left": (Width / 2) * (-1) + "px", "margin-top": (Height / 2) * (-1) + "px" });
});
}, 500);
+=的使用
二、第一次触摸页面开启音频
Audio = new Audio("audio/music.mp3");
Audio.load;
Audio.loop = true;
Audio.play();
$("body").one("touchstart", function () { if (!!sound.paused) { sound.play(); } });
$(".music_btn").on("touchstart", function () {
// alert("d");
if (!!Audio.paused) {
$(".music_btn").removeClass("stop");
Audio.play();
} else {
$(".music_btn").addClass("stop");
Audio.pause()
} });
三、整体尺寸缩小
$("#GuanKa .page_content").css("transform", "scale(0.92)");
四、序列帧图片切换
function SuiPian() { var _i = 1; setTimeout(function () {
_Change = setInterval(function () {
++_i;
//alert(_i);
$(".step07_pic").attr("src", "images/intro/step07_pic0" + _i + ".png");
if (_i >= 5) { clearInterval(_Change); _i = 0; }
}, 500);
}, 1800);
}
或者这样也可以
$(".music_animate_box img").fadeIn(); var _index =1;
_MusicAnimate = setInterval(function () { $(".music_animate_box img").attr("src", "images/addLoading/music_pic/music00" + _index + ".png");
_index++;
console.log(_index);
if (_index > 64) { _index=1 }
},40);
//滑动切换 var _upY = , _starty = null;
var _page = $("body");
_page.off("touchstart");
_page.on("touchstart", function (ev) { ev.stopPropagation();
var e = event.touches ? event.touches[] : ev; _starty = e.pageY;
_upY = ;
//alert(_starty);
console.log(_starty); });
_page.off("touchmove")
_page.on("touchmove", function (ev) { ev.stopPropagation();
var e = event.touches ? event.touches[] : ev; _upY = (_starty - e.pageY);//Y轴上:起始位置坐标减去结束位置坐标的值大于0 -----> 往上滑动 console.log(_starty); if (_upY > ) {
_upY = ;
alert("往上滑");
} });
测试的时候不要使用alert()这样会把阻止掉一些事件的,改用console.log(); 还可以参考一下网址帮助理解:
http://aresli.com/finger-direction.html
或者随机数
this.GetRand=function(minNum,minMax)
{
var _number = parseInt(Math.random() * (minMax - minNum + )) + minNum;
return _number;
}
var _num1 = "images/result/index_num" + SiteFunc.GetRand(6, 9) + ".png";
var _num2 = "images/result/index_num" + SiteFunc.GetRand(0, 9) + ".png";
GetRand=function(minNum,minMax)
{
var _number = parseInt(Math.random() * (minMax - minNum + 1)) + minNum;
return _number;
}
GetRand(1,8);//5
随机获取一个颜色
"#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
10秒以内的假loading
中间慢
var _Num = 1; function SetLoadingTime(speed) {
_Num++;
if (_Num > 10) {
Audio.play();
if (!(Cmn.Func.IsIOS())) {
Audio.play();
// $(".add_music_btn").removeClass("stop");
} } if (_Num > 100) {
clearTimeout(ts1); CanSlide = true; $(".step01").hide();
$(".step02").show(); return; }
console.log("CanSlide:" + CanSlide); $(".add_load_num span").html(_Num); if (60 > _Num && _Num > 50) {
speed = 150;
} else if (_Num > 60) {
speed = 50;
} Cmn.DebugLog("_num:" + _Num); ts1 = setTimeout(function () {
SetLoadingTime(speed);
}, speed); }
SetLoadingTime(50);
背景音乐播放各设备下处理(可以自动播放与不可以走动播放)
<div class="music_box Js_music_box "><a href="javascript:void(0)"></a><audio id="Js_audio" src="music/ongaku.mp3" autoplay="autoplay"></audio></div>
.music_box{position:absolute;top:18px;right:18px;width:50px;height:50px;z-index:;}
.music_box a{background:url(../images/png/sounds0001.png) no-repeat ;width:100%;height:100%;display:block;}
.music_box.select a{background:url(../images/soundoff.png) no-repeat;}
$(document).ready(function () { var _ts; var _Num = 1; $("#Js_audio").get(0).play();
_ts = setInterval(function () {
$(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
_Num++;
console.log(_Num);
if (_Num >= 8) { _Num = 1 }
}, 200); if (!!Js_audio.paused) {
clearInterval(_ts);
$(".music_box a").css("background", "url(images/soundoff.png) no-repeat");
} $("body").one("touchstart", function () { if (Cmn.Func.IsIOS()) { if ($("#Js_audio").get(0).paused) {
$(".Js_music_box").removeClass("select");
$("#Js_audio").get(0).play(); _ts = setInterval(function () {
$(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
_Num++;
Cmn.DebugLog(_Num);
Cmn.DebugLog($(".music_box a").css("background-image")); if (_Num >= 8) { _Num = 1 } }, 200); }
}
}); $(".Js_music_box").on("touchstart", function () {
// alert("d");
if (!!Js_audio.paused) { Audio(true);
$(".Js_music_box").removeClass("select"); //var _Num = 1;
_ts = setInterval(function () {
$(".music_box a").css("background", "url(images/png/sounds000" + _Num + ".png) no-repeat");
_Num++;
console.log(_Num);
Cmn.DebugLog($(".music_box a").css("background-image"));
if (_Num >= 8) { _Num =1}
}, 200); } else { Audio(false);
clearInterval(_ts); $(".music_box a").css("background", "url(images/soundoff.png) no-repeat");
Cmn.DebugLog($(".music_box a").css("background-image"));
} }); }); function Audio(bol)
{
if (bol) {
$("#Js_audio").get(0).play();
}
else {
$("#Js_audio").get(0).pause();
} }
常用jQuery代码02的更多相关文章
- 常用jQuery代码
返回元素的html包括它本身 <div class="test"><p>hello,你好!</p></div> <script ...
- 常用jQuery代码03
1.查看浏览器信息 navigator.userAgent 检索浏览器信息包括哪些字符 例如: if (navigator.userAgent.toLowerCase().indexOf(" ...
- 常用jQuery代码01
1.点击获得当前元素索引,实现切换相应的图片路径 $(".li").bind("click", function () { var _num = $(this) ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
- 最实用、最常用的jQuery代码片段
// chinacoder.cn JavaScript Document $(document).ready(function() { //.filter(":not(:has(.selec ...
- !!!常用JS代码块 (jquery)
jquery代码块 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> ...
随机推荐
- 模板模式(C++) 【转】
模板模式(template)在面向对象系统的设计和开发过程中,一定会有这样的情况:对于一些功能,在不同的对象身上展示不同的作用,但是功能的框架是一样的,这就是模板(template)模式的用武之地,我 ...
- css expression
概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作 ...
- Linux环境下实现生产者消费者问题
#include <stdio.h> #include <semaphore.h> #include <stdlib.h> #include <pthread ...
- java中实现链表(转)
分析: 上述节点具备如下特征: 1. 每个节点由两部分组成(存储信息的字段,存储指向下一个节点的指针) 2. 节点之间有着严格的先后顺序. 3. 单链表节点是一种非线性的结构,在内存中不连续分配空间. ...
- pajax
pjax网址:https://libraries.io/bower/yii2-pjax 1. 连接指定的div,实行pjax ,利用 linkSelector 方法<div id="c ...
- HDU 1016 Prime Ring Problem(经典DFS+回溯)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 【转】SQLServer内部原理
原文地址:http://twb.iteye.com/blog/182083 在讲SQLSERVER内部原理的之前,我觉得非常有必要向大家介绍一下SQLSERVER的历史. 让我们站在1999年,看看计 ...
- HRBUST 1326 循环找父节点神术
题意 给出一个图 给出a点到每个点的路径 最后经过的除这个点本身以外的点 现在把a点改为b点 让求出按上面那种方式 把除b之外的点对应的点列出 ...算了我描述题意得能力好差...这个锅还是给出题的吧 ...
- mapreduce运用
测试环境:192.168.1.55 mongo 192.168.1.55:30001show dbsuse gwgps 测试目标,求出两个班的总数,人数,平均分数等.可以根据不同的业务需求,定制map ...
- ThinkPHP 源码分析之常量 IS_AJAX
在控制器中判断请求是否是通过 AJAX 提交,ThinkPHP(3.2.2)中在 ThinkPHP/Library/Think/App.class.php (Line:49) 中定义了常量 IS_AJ ...