常用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> ...
随机推荐
- HDU3501 Calculation 2(欧拉函数)
题目求小于n不与n互质的正整数的和. 一个结论是小于n与n互质的正整数和=φ(n)*n/2. 因为如果a与n互质,那么n-a也与n互质,即若gcd(a,n)=1则gcd(n-a,n)=1,反证法即可证 ...
- BZOJ3823 : 定情信物
n维超立方体有$2^{n-i}C_n^i$个i维元素,于是$O(n)$预处理出1到n的逆元,再$O(n)$计算即可. 注意Trick:P可能小于n,所以要将数字表示成$a\times P^b$的形式. ...
- cocos2d 中判断CGPoint或者CGSize是否相等
cocos2d 中判断CGPoint是否相等 调用CGPointEqualToPoint(point1, point2) 判断CGSize是否相等 调用CGSizeEqualToSize(size1, ...
- JavaScript基础知识总结
正则表达式: 是一种专门用于操作字符串规则. 正则表达式: 通过一些符号来表达,简化对字符串的复杂操作. 弊端:阅读性较差 常见操作: 1.匹配 String matches(regex) 2.获取( ...
- 【BZOJ】1098: [POI2007]办公楼biu(补图+bfs+链表)
http://www.lydsy.com/JudgeOnline/problem.php?id=1098 显然答案是补图连通块..... 想到用并查集...可是连补图的边都已经...n^2了...怎么 ...
- 【BZOJ】1146: [CTSC2008]网络管理Network(树链剖分+线段树套平衡树+二分 / dfs序+树状数组+主席树)
http://www.lydsy.com/JudgeOnline/problem.php?id=1146 第一种做法(时间太感人): 第二种做法(rank5,好开心) ================ ...
- 通过console口连接交换机
最近发现有人不会通过console口连接交换机. 想想当初我还是小白的时候也是如此啊,如是写下教程. 虽然略简单... 1.连线: console线:(Console---usb) 2.安装驱动 (可 ...
- Area Under roc Curve(AUC)
AUC是一种用来度量分类模型好坏的一个标准. ROC分析是从医疗分析领域引入了一种新的分类模型performance评判方法. ROC的全名叫做Receiver Operating Character ...
- 文件上传\">将在3秒钟后返回前页
conn.php: <?php $id=mysql_connect('localhost','root','root'); mysql_select_db("db_database12 ...
- Redis 笔记与总结8 PHP + Redis 信息管理系统(分页+好友关注)
分页 要对列表页进行分页,需要知道: ①用户总数 $count ② 页大小 $pageSize:用户自定义 ③ 当前页:$page:GET 方式获取 ④ 总页数:$pageCount = ceil($ ...