功能实现（零散）

最新推荐文章于 2024-07-31 23:28:29 发布

Do_It_Better

最新推荐文章于 2024-07-31 23:28:29 发布

阅读量490

点赞数

CC 4.0 BY-SA版权

分类专栏：功能实现

本文链接：https://blog.youkuaiyun.com/chose_DoIt/article/details/71700250

功能实现专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一系列前端开发实用技巧，包括绝对定位实现页面居中、底部弹框效果、创建覆盖层和弹窗、select选项跳转链接、选项卡切换、加载更多功能实现、iframe带参数跳转及图片上传预览等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*****绝对定位的页面居中*****

postion:abouslat left:50%;margin-left=负的div宽度的一半

******在页面底部跑上来一个弹框******

把弹出框fixd定位top100%定位在最下面,并

$(".gamedown").click(function(){
var download = $("#download");
if(!download.hasClass("active"))
{
$("#download").addClass("active");
}

$("#download b").click(function(){
$("#download").removeClass("active");//必须是REMOVE掉CLASS而不是隐藏;

}

****弹出灰黑色覆盖层和弹框*******

父元素div要写如下：background-color: rgba(0,0,0,0.5)!important;background-color: #000;filter:Alpha(opacity=50);
子元素div加个定位position:absolute/relative即可。

*****给select的option加跳转链接********

<select class="language" onchange="self.location.href=options[selectedIndex].value">
					  <option value="javascript:zh_tran('s')">简体</option>
					  <option value="javascript:zh_tran('t')">繁体</option>
给slect加链接。VALUE为链接地址

********连续点击切换********

*************选项卡**************

$(".gameTab a").click(function(){
$(".rpg").hide().eq($(this).index()).show("slow");

});

****************加载更多（用分页做）*************************

	//more+更多游戏
		$("#moregame").click(function(){
				var _this = $(this);
				var page = _this.attr('data-page');   //获取初始页数
				$.ajax({
					url:"/Home/Index/moregame",
					datatype:"json",
					data:{page:page},
					type:"post",
					success:function(res){
						if(res.status==1){
							var more = res.moregame;
							var morebox = " ";
						
							if(more && more.length > 0){
								for(i in more){
									morebox += "<li class='MMORPG mix_all' style='display: block;  opacity: 1;'> <a href='"+more[i].hosturl+"' target='_blank'> <img src='"+more[i].iconurl+"'> <div class='label'> <span>"+more[i].gamename+"</span> <span class='text-category'>"+more[i].sign+"</span> </div></a></li>" 
								}	
								$("#all_more").append(morebox);
								$("#moregame").attr('data-page', parseInt(res.page));//遍历完后data-page页数变为下一页
							}
							else{
								$("#moregame").hide();
							}
						}
						
					},
					error:function(){
						alert("网络繁忙");
					}
			})	
		})

********iframe带参数跳转***********

 $("#moliframe", parent.document.body).attr("src", 'about:blank');//初始化页面,避免重复输入
            if(amount != undefined && customerId != undefined && currencyCode != undefined && playerRoleId != undefined && playerServerId != undefined){
                $("#mol_hidden").show(200);
                $("#moliframe", parent.document.body).attr("src", '/Home/Pay/molCreateOrder/amount/' + amount + '/customerId/' + customerId + '/currencyCode/' + currencyCode + '/payMode/' + payMode + '/playerRoleId/' + playerRoleId + '/playerServerId/' + playerServerId + '/gameID/' + gameID);
            }

********记录COOKIE，输出COOKIES******************

var gameid = $("#game_id").val();  
var gamename = $("#h_description").text();       
 $.cookie('gamename',gamename,{ expires: 7, path: '/' });       
 $.cookie('gameid',gameid,{ expires: 7, path: '/' });

$(function(){
		var gamename = $.cookie('gamename');
		var gameid = $.cookie('gameid');
		var gameurl = "/Home/Pay/payway/gameid/"+gameid;
		if(gamename)
		{
			$(".paygame_title").append("<p>选择您要充值的游戏</p><a href='" + gameurl + "'>最近游戏：" + gamename + "<strong>点击进入充值</strong></a>");
		}
		else
		{
			$(".paygame_title").append("<p>选择您要充值的游戏</p>");
		}
	})

***************图片上传并预览*********************

<div class="file">
    <img src="" alt="" class="tu">
    <input type="file" class="file">
</div>

<script src="jquery-1.9.1.js"></script>
<script>
    $(function(){
        $(".file").change(function() {
            var file = $(this).val();
            var windowURL = window.URL || window.webkitURL;
            if (file) {
                var dataURL = windowURL.createObjectURL($(this)[0].files[0]);
                $(this).parent().find('img.tu').attr('src', dataURL);
            }
        });
    })
</script>