在淡入淡出之前,如何让柔性盒不成为页面的一部分？我曾经用'display:0;'做到这一点 然后使用jquery .fadeIn().但是现在如果我将显示设置为0,当我淡入时,我当然会失去盒子的柔韧性.如果我使用jquery将display设置为flex,那么它只会出现,而不会淡入.
<div class="" id="popupContainer">
<div class="flex-item-popup" id="popup">
<div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
<h2></h2>
<div class='text'></div>
<div class="videos"></div>
<div class="flex-container images"></div>
</div>
#popupContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
z-index: 15;
}
jQuery的:
$(document).ready(function() {
//???
});
我正在使用d3.我从json文件创建一个国家地球.地球有svg路径,每条路径都有一个id.我想选择具有特定ID的路径.请问我该怎么做？
handleGlobe();
$('#panel div').click(function(){
if (this.className == 'represented') {
thisID = $(this).attr('id');
focusedCountry = d3.select('path') //??? not sure how to say this
p = d3.geo.centroid(focusedCountry);
}
...
handleGlobe() {
var feature;
var projection = d3.geo.azimuthal()
.scale(380)
.origin([-71.03,42.37])
.mode("orthographic")
.translate([380, 400]);
var circle = d3.geo.greatCircle()
.origin(projection.origin());
// TODO fix d3.geo.azimuthal to be consistent with scale
var scale = {
orthographic: 380,
stereographic: 380,
gnomonic: 380,
equidistant: 380 / Math.PI * 2,
equalarea: 380 / Math.SQRT2
};
var path = d3.geo.path()
.projection(projection); …我没有看到这个确切的问题......如果有的话,请指出我.
我正在使用jquery的ui工具提示.我有一个链接,当你鼠标悬停它时,我想显示一个图像.到目前为止,对我来说没有任何作用.
标题中的ui代码:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
HTML:
(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)
码:
$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });
请告诉我我做错了什么.
我有一些svg路径:
<path class="country" id="BLR" title="Belarus" alt="Belarus" d="M948.0142678672362,369.7256153651123L956.0315144997886,372.7549948212553L955.6251153181965,376.68106491420883L956.6993702966163,377.46634055469417L958.4144244330968,381.52092337306806L959.8614899624631,381.6111705103533L961.4358247718692,383.8516898475525L959.6328069741484,385.0654037682009L957.3752698953709,384.53552051711677L958.4665656000917,390.0076939606045L955.9148066459876,390.24630230981074L954.0730841220384,394.2297858860991L953.163550030379,393.0762648682822L950.333965883297,393.353478804788L943.9500919704785,392.13801133565164L939.2092506948762,390.2052953894462L934.5569856401167,390.2170281135237L931.9231336584982,391.7484512915885L932.3814647774813,388.98495674038986L931.0289993180527,387.81385807072303L933.4265401596901,386.10558265025156L933.7995387046943,384.91739193713676L933.1171566924312,379.6478010722885L935.6115604269471,380.1186619031289L939.5640872868389,378.3386011842294L940.8357423463007,375.41130363641486L942.8397126276869,373.56246283729985L943.307715755223,371.87935555833474L946.3215777553021,371.35369709054953Z"></path>
每个路径都有title和alt.当我将鼠标移到Firefox中的路径上时,我会得到带有国家/地区名称的小工具提示.但是当我在IE或Chrome中这样做时,没有任何反应.有谁知道为什么,拜托？
我正在和D3.js一起工作 我正在创建一个基于json文件的世界地球仪.我想将json文件中的"id"属性添加到路径标记中.但到目前为止,我还没弄清楚如何.
json文件采用以下格式:
{"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631,37.661164],[66.217385,37.39379],[66.518607,37.362784],[67.075782,37.356144],[67.83,37.144994],[68.135562,37.023115],[68.859446,37.344336],[69.196273,37.151144],[69.518785,37.608997],[70.116578,37.588223],[70.270574,37.735165],[70.376304,38.138396],[70.806821,38.486282],[71.348131,38.258905],[71.239404,37.953265],[71.541918,37.905774],[71.448693,37.065645],[71.844638,36.738171],[72.193041,36.948288],[72.63689,37.047558],[73.260056,37.495257],[73.948696,37.421566],[74.980002,37.41999],[75.158028,37.133031],[74.575893,37.020841],[74.067552,36.836176],[72.920025,36.720007],[71.846292,36.509942],[71.262348,36.074388],[71.498768,35.650563],[71.613076,35.153203],[71.115019,34.733126],[71.156773,34.348911],[70.881803,33.988856],[69.930543,34.02012],[70.323594,33.358533],[69.687147,33.105499],[69.262522,32.501944],[69.317764,31.901412],[68.926677,31.620189],[68.556932,31.71331],[67.792689,31.58293],[67.683394,31.303154],[66.938891,31.304911],[66.381458,30.738899],[66.346473,29.887943],[65.046862,29.472181],[64.350419,29.560031],[64.148002,29.340819],[63.550261,29.468331],[62.549857,29.318572],[60.874248,29.829239],[61.781222,30.73585],[61.699314,31.379506],[60.941945,31.548075],[60.863655,32.18292],[60.536078,32.981269],[60.9637,33.528832],[60.52843,33.676446],[60.803193,34.404102],[61.210817,35.650072]]]},"id":"AFG"},
{"type":"Feature","properties":{"name":"Angola"},"geometry":{"type":"MultiPolygon","coordinates":[[[[16.326528,-5.87747],[16.57318,-6.622645],[16.860191,-7.222298],[17.089996,-7.545689],[17.47297,-8.068551],[18.134222,-7.987678],[18.464176,-7.847014],[19.016752,-7.988246],[19.166613,-7.738184],[19.417502,-7.155429],[20.037723,-7.116361],[20.091622,-6.94309],[20.601823,-6.939318],[20.514748,-7.299606],[21.728111,-7.290872],[21.746456,-7.920085],[21.949131,-8.305901],[21.801801,-8.908707],[21.875182,-9.523708],[22.208753,-9.894796],[22.155268,-11.084801],[22.402798,-10.993075],[22.837345,-11.017622],[23.456791,-10.867863],[23.912215,-10.926826],[24.017894,-11.237298],[23.904154,-11.722282],[24.079905,-12.191297],[23.930922,-12.565848],[24.016137,-12.911046],[21.933886,-12.898437],[21.887843,-16.08031],[22.562478,-16.898451],[23.215048,-17.523116],[21.377176,-17.930636],[18.956187,-17.789095],[18.263309,-17.309951],[14.209707,-17.353101],[14.058501,-17.423381],[13.462362,-16.971212],[12.814081,-16.941343],[12.215461,-17.111668],[11.734199,-17.301889],[11.640096,-16.673142],[11.778537,-15.793816],[12.123581,-14.878316],[12.175619,-14.449144],[12.500095,-13.5477],[12.738479,-13.137906],[13.312914,-12.48363],[13.633721,-12.038645],[13.738728,-11.297863],[13.686379,-10.731076],[13.387328,-10.373578],[13.120988,-9.766897],[12.87537,-9.166934],[12.929061,-8.959091],[13.236433,-8.562629],[12.93304,-7.596539],[12.728298,-6.927122],[12.227347,-6.294448],[12.322432,-6.100092],[12.735171,-5.965682],[13.024869,-5.984389],[13.375597,-5.864241],[16.326528,-5.87747]]],[[[12.436688,-5.684304],[12.182337,-5.789931],[11.914963,-5.037987],[12.318608,-4.60623],[12.62076,-4.438023],[12.995517,-4.781103],[12.631612,-4.991271],[12.468004,-5.248362],[12.436688,-5.684304]]]]},"id":"AGO"},
...
]}
我的代码是这样的:
var feature;
var projection = d3.geo.azimuthal()
.scale(380)
.origin([-71.03,42.37])
.mode("orthographic")
.translate([380, 400]);
var circle = d3.geo.greatCircle()
.origin(projection.origin());
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#globe").append("svg:svg")
.attr("width", 800)
.attr("height", 800)
.on("mousedown", mousedown);
d3.json("world-countries.json", function(collection) {
feature = svg.selectAll("path")
.data(collection.features)
.enter().append("svg:path")
.attr("d", clip)
.on("click", click);
feature.append("svg:title")
.text(function(d) { return d.properties.name; });
});
如何在"path"标记中添加ID,并从json文件中为每个ID提供ID值？
我正在尝试使用 Bootstrap 的模式来发送推文。我将modal.js和bootstrap.min.js下载到我的 JavaScript 文件中，但出现错误：
未捕获的 ReferenceError: BootstrapDialog 未定义。
有谁知道我做错了什么？
HTML：
<script src="js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="js/scripts.js"></script> <!-- my jquery file -->
JavaScript：
setTimeout(function() {
BootstrapDialog.alert('I want banana!');
}, 1000);
我正在使用slick.js创建幻灯片.一切都很好,除了点.他们出现了,但他们出现了这个奇怪的字符串(http://newsinteractive.post-gazette.com/40for10/img/slideshow/weird_chars.png).
我的代码似乎没错.怎么了？
jQuery的:
$('#slideshow2').slick({
arrows: true,
prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>",
accessibility: true,
adaptiveHeight: true,
dots: true
});
CSS:
.slick-dots
{
position: absolute;
bottom: 0px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
background-color: white;
}
我有一个json文件,我正试图从中获取值.一个对象嵌套在此文件中的另一个对象中.我可以隔离顶级值,但不能隔离嵌套值.它必须是语法问题.这就是我正在使用的.
这是json:
{
"total": [
[
{
"votes": "79,060"
},
{
"percent": "11%"
},
{
"winner": "0"
}
],
[
{
"votes": "167,800"
},
{
"percent": "22%"
},
{
"winner": "0"
}
],
[
{
"votes": "51,519"
},
{
"percent": "7%"
},
{
"winner": "0"
}
],
[
{
"votes": "297,060"
},
{
"percent": "39%"
},
{
"winner": "1"
}
],
[
{
"votes": "156,787"
},
{
"percent": "21%"
},
{
"winner": "0"
}
]
],
"useWinnerColors": 1,
"timestamp": "3:00 …我试图一直显示chartjs的工具提示.我直接从https://github.com/chartjs/Chart.js/issues/1861复制了这段代码,但它仍然没有用.我收到错误消息"Chart.Tooltip.positioners [opts.position]不是函数".
有人可以帮忙吗？这可能是一件小事......
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// …我有一个带有标记的KML文件,每个标记都有多边形坐标.我想动态更改多边形的填充颜色,具体取决于我从json文件中读取的值.我的理解是Google会缓存kml文件,因此您无法轻易更改多边形的填充颜色.
所以我试图将我的kml多边形转换为svg路径,以便我可以使用Raphael将我的多边形放在我的Google地图上.然后我可以用javascript更改填充颜色.
但是如何将多边形坐标转换为svg路径,有人知道吗？
一组样本坐标将是:
<Polygon><outerBoundaryIs><LinearRing><coordinates>-80.098181,40.42127 -80.096479,40.421262 -80.096464,40.421409 -80.096448,40.421551 -80.096444,40.421583 -80.096434,40.421666 -80.096406,40.421931 -80.096389,40.422087 -80.096353,40.422423 -80.09583,40.426101 -80.095525,40.428234 -80.095315,40.429714 -80.095276,40.429989 -80.092585,40.428593 -80.092273,40.428431 -80.09069,40.430519 -80.090384,40.430924 -80.08989,40.430618 -80.089699,40.4305 -80.089499,40.430359 -80.088738,40.429886 -80.088418,40.429688 -80.088254,40.429585 -80.087931,40.429384 -80.087086,40.428859 -80.086867,40.428722 -80.086658,40.428592 -80.086493,40.42849 -80.08617,40.428282 -80.086177,40.428265 -80.08621,40.428188 -80.0864,40.427742 -80.086397,40.42749 -80.086394,40.427125 -80.08631,40.426427 -80.086335,40.425887 -80.086235,40.425409 -80.085776,40.425327 -80.085442,40.42527 -80.084993,40.424585 -80.085076,40.42448 -80.085542,40.423842 -80.085679,40.423125 -80.085659,40.423011 -80.085626,40.422827 -80.085191,40.421758 -80.08467,40.420859 -80.084258,40.420336 -80.083828,40.4201 -80.083078,40.420005 -80.082504,40.420072 -80.081444,40.420196 -80.080888,40.420181 -80.080775,40.420178 -80.080604,40.420173 -80.080122,40.420161 -80.079753,40.420151 -80.07947,40.420144 -80.079287,40.420139 -80.078239,40.420296 -80.077661,40.420418 -80.076213,40.420726 -80.075673,40.420766 -80.075298,40.420719 -80.075127,40.420625 -80.074909,40.420307 -80.075028,40.419779 -80.07539,40.419028 -80.07583,40.41836 -80.076065,40.418108 -80.076528,40.417616 -80.077217,40.417124 -80.077503,40.417002 -80.077725,40.416907 -80.078391,40.416622 -80.078614,40.416528 …这是一个新手.
我正在尝试使用LESS mixin水平居中,但它不起作用.这是我的语法吗？其他LESS设置正在运行.
减:
@mixin centerH {
position: absolute;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
#homepage_boxes {
width: 25%;
@include centerH;
top: 0;
}
.parent {
position: relative;
}
#screen1 {
.parent;
}
HTML:
<div class="screen" id="screen1">
<div id="homepage_boxes" class="section group">
<div class="col span_1_of_3 clickable">
<div class="part_head part1">Part 1</div>
</div>
<div class="col span_1_of_3 clickable">
<div class="part_head part2">Part 2</div>
</div>
<div class="col span_1_of_3 clickable part_selected">
<div class="part_head part3">Part 3</div>
</div>
</div>
我有传单地图。我使用圆圈作为标记，因为我内置了一些缩放功能，并且我希望圆圈的半径在缩放过程中设置动画。不过，我也希望圆圈在被点击时“跳动”。我在网上看到了很多关于脉冲传单标记的文档，但没有关于脉冲圈的文档。这里有一个简单的解决方案吗？
查询：
var map = L.map('map').setView([40.449620, -79.939990], 13);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', {
maxZoom: 19,
ext: 'png',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'//,
}).addTo(map);
map.on('click', function(e) {
var currentZoom = map.getZoom();
if (currentZoom == 13) {
map.flyTo(e.latlng, 15, { //zoom in on click
animate: true,
duration: 1,
easeLinearity: 1
});
}
});
$.post('php/get-buildings.php', function(output){
var obj = jQuery.parseJSON( output );
var color;
customCircle = L.Circle.extend({
options: {
//some more options here
} …