最近开始弄一些前端的东西,边学习边记录吧;
项目要求制作一个引导收藏的按钮
需求:1.不同系统显示不同的引导收藏内容
2.打开页面定时展示信息,几秒钟后关闭信息
3.可主动关闭信息
动手:
一、先设置一个固定位置显示的提示框:
<style>
.footer{
height: 40px;
width: 100%;
position: fixed;
bottom: 0;
}
#ts{
position:absolute;
left:28%;
}
#ts img{
width:150px;
height: 30px;
z-index: 9999999999999;
}
</style>
<div class="footer">
<div id="ts" class="toolbarframe bigad_close" style="display:none;">
<img id="pic" src=""/>
</div>
</div>
二、jq判断系统更换图片地址以达成不同系统显示不同的图片
$(function () {
var u = navigator.userAgent,app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var div = document.getElementById("ts");
if (isAndroid) {
document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/az.png";
}else if (isIOS) {
document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/ts.png";
}else {
document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/pc.png";
div.style.setProperty('left','50%');
}
});
ps: 因为定位的问题 所以在pc端和移动端还有一点区别就是关于div img 的水平居中问题 因为进度问题 我没有搞 这里直接用js控制magin- left 了 (后面要好好学一下 关于css定位这里);
三、控制图片展示和消失的时间和 主动关闭图片
$(function(){
setTimeout('$(".toolbarframe").show("slow")',1000);
setTimeout('$(".toolbarframe").hide("slow")',15000);
$(".bigad_close").click(function(){
$(".toolbarframe").hide("slow");
})
});