常用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> ...
随机推荐
- 【Linux程序设计】之Linux库函数的使用,多文件程序开发,静态与共享函数
这个系列的博客贴的都是我大二的时候学习Linux系统高级编程时的一些实验程序,都挺简单的.贴出来纯粹是聊胜于无. 实验题目:Linux基础程序设计综合实验 实验目的:熟悉并掌握Linux库函数的使用, ...
- xubuntu12.04配置
更改源:我用上海交通大学的 首先备份Ubuntu12.04源列表sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup #(备份下当前 ...
- 【BZOJ】1085: [SCOI2005]骑士精神(A*启发式搜索)
http://www.lydsy.com/JudgeOnline/problem.php?id=1085 囧啊囧,看了题解后写了个程序,但是样例总过不了T+T,调试了不下于1个小时,肉眼对拍看了根本看 ...
- hiho#1145 : 幻想乡的日常
描述 幻想乡一共有n处居所,编号从1到n.这些居所被n-1条边连起来,形成了一个树形的结构. 每处居所都居住着一个小精灵.每天小精灵们都会选出一个区间[l,r],居所编号在这个区间内的小精灵一起来完成 ...
- rbegin 和 end 区别
在使用C++的STL时,经常会用到迭代器,那么不得不搞清楚里面的一些指针 begin(), end(), rbegin(), rend()之间的区别与联系,以及它们分别都指向哪个元素.首先要明白的一点 ...
- 发生了COMException 异常来自 HRESULT:0x80040228
异常信息: 发生了COMException 异常来自 HRESULT:0x80040228 原因解决方法:窗体中忘记放LicenseControl控件.,加上LicenseControl即可
- Phaser.Game这个函数都有哪些参数
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- PHP有两个不同的版本:4.x系列版本和5.x系列版本
在为用户提供动态内容方面,PHP和MySQL是一个强大的组合.这些年来,这两项产品已经跨越了它们最初的应用舞台,现在,一些世界上最繁忙的网站也在应用它们.虽然它们当初都是开源软件,只能在UNIX/Li ...
- 连连看的设计与实现——四人小组项目(GUI)
项目GUI界面经过简单设计,整理如下:(图片截取致宠物连连看3.1) 点开游戏后界面显示: 点击菜单游戏—>初级 后显示 -------------------------- > 当游戏时 ...
- hdu 1116 并查集和欧拉路径
---恢复内容开始--- 把它看成是一个图 只是需要欧拉路径就可以了 首尾能连成一条线即可 如果要判断这个图是否连通 得用并查集 在hrbust oj里面看答案学到的方法 不用各种for循环套着判断能 ...