HTML,HTML开发教程,HTML问题

前端网站html生成腾讯地图和卫星地图教程

2021-03-15

前端html生成网站地图，除了使用百度地图外还可以使用腾讯地图来生成。使用百度地图案例，参考：网站如何创建百度地图显示地理位置以下是前端网站html生成腾讯地图和卫星地图教程，供新手参考：1、首先打开腾讯地图坐标拾取器：https://lbs.qq.com/tool/getpoint/index.html 2、复制坐标：23.124825,113.372164，如下图3、显示地图代码：腾讯地图-地图参数使用示例 /*#mapspan,#mapa,.smnoprint{display:none!important;}*/ #map{width:100%;min-height:600px;} functioninit(){ //腾讯坐标拾取器或得中心点 varcenter=newqq.maps.LatLng(23.124825,113.372164); varmap=newqq.maps.Map(document.getElementById('map'),{ center:center, zoom:16, //绽放控件 zoomControl:false, //平移控件 panControl:false, }); //创建一个Marker varmarker=newqq.maps.Marker({ //设置Marker的位置坐标 position:newqq.maps.LatLng(23.124825,113.372164), //设置显示Marker的地图 map:map }); ////设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置 varanchor=newqq.maps.Point(15,10), size=newqq.maps.Size(32,32), origin=newqq.maps.Point(0,0), icon=newqq.maps.MarkerImage( "/images/map.svg", size, origin, anchor ); marker.setIcon(icon); //添加信息窗口 vardetail=''+ '天河软件园电话：020-0000-0000地址：广东省广州市天河区科韵路200号'; varinfo=newqq.maps.InfoWindow({ map:map }); //获取标记的可拖动属性 info.open(); info.setContent(detail); info.setPosition(marker.getPosition()); //标记Marker点击事件 qq.maps.event.addListener(marker,'click',function(){ info.open(); info.setContent(detail); info.setPosition(marker.getPosition()); }); } 4、显示地图：如下，地图上显示的电话，地址，都可以根据自己的实际设置文字

网站如何创建百度地图显示地理位置

2020-11-20

299 0

在做企业网站的时候，我们会放置一个地理位置，我们可以引用百度地图，来显示我们的店铺所在位置效果演示：操作步骤1、打开百度地图https://map.baidu.com/，搜索输入地址2、点击地址3、会出现如下视图4、点击分享5、复制我们想要的地址6、复制https://j.map.baidu.com/b8/S ，粘贴到我们的iframe框架代码中7、完整demo代码地图演示

html页面加载好再进入网站功能实现

2019-10-08

737 0

css代码：#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000} #loadingDivdiv{position:absolute;width:auto;height:105px;padding-left:215px;background:#fffurl(../images/loading.gif)no-repeatcentercenter/50px50px}js代码：var_PageHeight=document.documentElement.clientHeight, _PageWidth=document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var_LoadingTop=_PageHeight>61?(_PageHeight-61)/2:0, _LoadingLeft=_PageWidth>215?(_PageWidth-215)/2:0; //在页面未加载完毕之前显示的loadingHtml自定义内容 var_LoadingHtml=''; //呈现loading效果 document.write(_LoadingHtml); //监听加载状态改变 document.onreadystatechange=completeLoading; //加载状态为complete时移除loading效果 functioncompleteLoading(){ if(document.readyState=="complete"){ varloadingMask=document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }就是如此简单，赶快试试吧！

使用clipboard.js 实现复制隐藏文本的内容

2019-09-18

1846 0

一、起初是使用浏览器提供了 copy 命令。document.execCommand("copy")如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板。但是 select() 方法只对和有效，对于就不好用了 functioncopyUrl(){ $("#copyinput").select();//选择对象 document.execCommand("Copy");//执行浏览器复制命令 alert("已复制到剪贴板！"); } 但是#copyinput不能隐藏（display:none or visibility:hidden or type="hidden"），我想要的是点击一个按钮就能复制隐藏控件的值。所以找到了clipboard.js 优秀！二、clipboard.js拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁这就是创造clipboard.js的原因和目的复制 varclipboard=newClipboard('.copybng',{ text:function(){ return$("#cardmal").val(); } }); clipboard.on('success',function(e){ alert('已复制到剪贴板') }) 附件下载：链接：https://pan.baidu.com/s/1LNNmA5KAwI3S1K31oLDo7Q提取码：iigd

html选项卡封装案例及调用

2019-08-27

868 0

选项卡在网页中经常会用到，以下是一个简单的案例封装。1、代码封装functiontabSwtich(m,c,a){ varchange=function(i){ m.each(function(index){ index==i?$(this).addClass(a):$(this).removeClass(a); }) c.each(function(index){ index==i?$(this).show():$(this).hide(); }); }; m.each(function(i){ $(this).mouseenter(function(){ change(i); }); }) }2、调用方法：$(function(){ tabSwtich($('.tab_btnspan'),$('.tab_contentli'),'ac'); })3、html代码：选项1 选项2 选项3 内容1 内容2 内容3 .tab_btn.ac{background:red}

自定义radio单选按钮样式

2019-06-06

1184 0

思路：1. 可以为元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；2. 然后把真正的单选按钮隐藏起来；3. 最后把生成内容美化一下。性别：男女 .tm2{width:94%;float:left;margin-left:3%;height:2.4rem;margin-bottom:0.8rem;} .tm2span{font-size:0.96rem;color:#333333;display:block;width:4.12rem;height:2.4rem;line-height:2.4rem;float:left;text-align:center;} .tm2label{font-size:0.9rem;display:inline-block;margin-top:0.5rem;color:#333;position:relative;} .tm2labelb{width:0.4rem;height:0.4rem;border:0.24remsolid#fe4971;background:#fff;border-radius:50%;position:absolute;left:-0.1rem;top:0.2rem;} input[type=radio]:checked+b{background:red}

图片延时加载jquery-lazyload.js的使用

2019-01-25

1458 0

细心的游客可能会发现，本网站加了图片延时加载，使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。jquery-lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，以下是使用详解：附件：jquery-lazyload.js.txtimg标签：js代码：$(function(){ $("img").lazyload({effect:"fadeIn",placeholder:"/images/4e8b6995-5555-498c-b6ae-2e2388e04df3.svg" });解析：data-original="图片地址"effect: "fadeIn", //动画placeholder: "延时加载显示gif图片"

prettify实现html页面黑色高亮代码

2017-06-18

921 0

头部引入prettify样式和js：给body加onload="prettyPrint()"方法底部script代码： window.onload=function() { prettyPrint(); } $(function(){ prettyPrint(); $('pre').addClass("prettyprintlinenums"); }) 效果：varcurrentTime=Math.floor(parseInt(audio.currentTime)/60)+":"+(parseInt(audio.currentTime)%60/100).toFixed(2).slice(-2); console.log(Math.floor(parseInt(currentTime)/60)+":"+(parseInt(currentTime)%60/100).toFixed(2).slice(-2)); $("#current").html(currentTime); }pre标签代码换行样式：/*新版*/ pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;margin-bottom:1.5rem} pre.prettyprint{display:block;background-color:#333;padding:10px10px;font-weight:normal;font-size:14px} pre.nocode{background-color:none;color:#000} pre.str{color:#ffa0a0}/*string-pink*/ pre.kwd{color:#f0e68c;font-weight:bold} pre.com{color:#87ceeb}/*comment-skyblue*/ pre.typ{color:#98fb98}/*type-lightgreen*/ pre.lit{color:#cd5c5c}/*literal-darkred*/ pre.pun{color:#fff}/*punctuation*/ pre.pln{color:#fff}/*plaintext*/ pre.tag{color:#f0e68c;font-weight:bold}/*html/xmltag-lightyellow*/ pre.atn{color:#bdb76b;font-weight:bold}/*attributename-khaki*/ pre.atv{color:#ffa0a0}/*attributevalue-pink*/ pre.dec{color:#98fb98}/*decimal-lightgreen*/ /*Specifyclass=linenumsonapretogetlinenumbering*/ preol.linenums{margin-top:5px;margin-bottom:5px;padding-left:20px;color:#AEAEAE}/*IEindentsviamargin-left*/ preli.L0,preli.L1,preli.L2,preli.L3,preli.L4,preli.L5,preli.L6,preli.L7,preli.L8,preli.L9{list-style-type:decimal;} /*Alternateshadingforlines*/ preli.L1,preli.L3,preli.L5,preli.L7,preli.L9{} @mediaprint{ pre.prettyprint{background-color:none} pre.str,code.str{color:#060} pre.kwd,code.kwd{color:#006;font-weight:bold} pre.com,code.com{color:#600;font-style:italic} pre.typ,code.typ{color:#404;font-weight:bold} pre.lit,code.lit{color:#044} pre.pun,code.pun{color:#440} pre.pln,code.pln{color:#000} pre.tag,code.tag{color:#006;font-weight:bold} pre.atn,code.atn{color:#404} pre.atv,code.atv{color:#060} } .prettyprint.linenumsolli,pre.prettyprint.linenumsolli{ padding-left:20px; color:#bebec5; font-size:14px; font-family:"MicrosoftYaHei",Arial,Helvetica,sans-serif; line-height:1.6rem; margin-left:0; } .prettyprint.linenums,pre.prettyprint.linenums{ -webkit-box-shadow:inset40px00#3D4C53,inset41px00#464741; -moz-box-shadow:inset40px00#3D4C53,inset41px00#464741; box-shadow:inset40px00#3D4C53,inset41px00#464741; } prep>code{ margin:03px; background:#ddd; border:1pxsolid#ccc; border-radius:2px; color:rgba(0,0,0,0.6); font-family:Menlo,Monaco,"AndaleMono","lucidaconsole","CourierNew",monospace; } prea>code{ margin:03px; background:#ddd; border:1pxsolid#ccc; border-radius:2px; color:#2a7ae2; } preli.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type:decimal;} /*新版*/附件demo下载：https://qiniu.tpxhm.top/prettify.zip注：样式可以根据自己需要调整边距，字体等。

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

2017-12-20

1611 0

当页面滚动到距顶部一定高度时某DIV自动隐藏和显示 $(function(){ varheight=$(".subMenu1").offset().top;//指定位置class $(window).scroll(function(){ if($(window).scrollTop()>height){ $("#back").show(); } else{ $("#back").hide(); } }) })

HTML5 video标签视频比例拉伸

2017-08-26

1440 0

HTML5 video标签视频比例拉伸项目中有碰到视频比例拉伸的需求，可以通过以下方法来实现视频的拉伸。 video{ object-fit:fill; width:800px; height:320px;}测试视频比例拉伸：

手机端自适应字体大小和元素宽度自适应

2017-12-05

863 0

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。字体、宽高都用rem来定义，此方法略爽！@media(min-width:0px){ html{font-size:12px;}} @media(min-width:320px){ html{font-size:12px;}} @media(min-width:340px){ html{font-size:13px;}} @media(min-width:360px){ html{font-size:14px;}} @media(min-width:380px){ html{font-size:15px;}} @media(min-width:400px){ html{font-size:15px;}} @media(min-width:420px){ html{font-size:16px;}}现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就看设计稿的px比如是24px，那么写样式就是1.5rem这个时候牵扯算法1rem = 16px functionfontSize(){ vardeviceWidth=document.documentElement.clientWidth>640?640:document.documentElement.clientWidth; document.documentElement.style.fontSize=(deviceWidth/25)+"px"; } fontSize(); window.onresize=fontSize;