html里这种箭头标签外框的样式是怎么做的?

html里这种箭头标签外框的样式是怎么做的?,第1张

这种效果可以用CSS来实现。方法是做一个这样的背景,右边是尖头。然后在CSS中添加到标签的背景中去:background:url(picjpg) right;
要点是尽可以长一些,填充背景时应该是右对齐以便右侧永远会显示尖头。
望有用。

function pre{
if(index!=0)
index--;
else
index=4;
img1src=arr[index];
}
function next(){
if(index!=4)
index++;
else
index=0;
img1src=arr[index];}

纯js不好实现,但是配合html,css就有了近似的办法下面提供一个解决方案,已知两个点的坐标,为它们画一条带箭头的弧线

<html>

<head>

<meta >

<title>箭头弧线</title>

<style type = "text/css">

span { position: absolute; width: 5px; height: 5px; background-color: #0000ff; display: block; border-radius: 50%; }

</style>

<script language = "javascript">

function locateO () {

var x0 = parseInt (spnAstyleleft, 10), y0 = parseInt (spnAstyletop, 10), x1 = parseInt (spnBstyleleft, 10), y1 = parseInt (spnBstyletop, 10), horizontalDistance = Mathabs (x1 - x0), verticalDistance = Mathabs (y1 - y0), x = Mathmin (x0, x1) + horizontalDistance / 2, y = Mathmin (y0, y1) + verticalDistance / 2, distance = Mathsqrt (Mathpow (horizontalDistance, 2) + Mathpow (verticalDistance, 2)), array = new Array (x0, y0, x1, y1, distance);

spnOstyleleft = x;

spnOstyletop = y;

return array;

}

function getRadian (x0, y0, x1, y1) {

var horizontalDistance = Mathabs (x1 - x0), verticalDistance = Mathabs (y1 - y0), rate = horizontalDistance == 0 0 : verticalDistance / horizontalDistance, radian;

if (y1 < y0) {

if (x1 > x0) {

radian = - Mathatan (rate);

} else if (x1 == x0) {

radian = - MathPI / 2;

} else {

radian = - (MathPI - Mathatan (rate));

}

} else if (y1 == y0) {

radian = x1 > left 0 : - MathPI;

} else if (x1 < x0) {

radian = - (MathPI + Mathatan (rate));

} else if (x1 == x0) {

radian = - MathPI 3 / 2;

} else {

radian = - 2 MathPI + Mathatan (rate);

}

return radian;

}

function getAngle (radian) {

var angle = - radian 180 / MathPI;

return angle;

}

function slantArc (x0, y0, x1, y1) {

var radian = getRadian (x0, y0, x1, y1), angle = 360 - getAngle (radian);

cnvArcstyletransform = "rotate(" + angle + "deg)";

}

function drawArc (x0, y0, width) {

var context = cnvArcgetContext ("2d"), radius = width / 2, height = radius / 2;

cnvArcwidth = width + 10;

cnvArcheight = height;

cnvArcstyleleft = x0;

cnvArcstyletop = y0 - height;

contextellipse (radius + 5, height, radius, height / 2, 0, 0, MathPI 2);

contextstrokeStyle = "#00ff00";

contextstroke ();

}

function hex (figure) {

return figuretoString (16);

}

function zeroize (cluster) {

if (clusterlength < 2) {

cluster = 0 + cluster;

}

return cluster;

}

function getColour (red, green, blue) {

return "#" + zeroize (hex (red)) + zeroize (hex (green)) + zeroize (hex (blue));

}

function printArc () {

var width = cnvArcwidth, height = cnvArcheight, context = cnvArcgetContext ("2d"), imageData = contextgetImageData (0, 0, width, height), data = imageDatadata, coordinates = new Array (), cluster = "", i, red, green, blue, colour, index, x, y;

for (i = 0; i < datalength; i += 4) {

red = data [i];

green = data [i + 1];

blue = data [i + 2];

colour = getColour (red, green, blue);

index = i / 4;

y = parseInt (index / width, 10);

x = index % width;

if (x == 0) {

//consolelog (y + "\n" + cluster);

cluster = "";

}

cluster += x + ":" + colour + " ";

if (colour == "#00ff00") {

coordinatespush (new Array (x, y));

}

}

return coordinates;

}

function sortCoordinates (coordinates, direction) {

var i = 0, flag, j, coordinate;

do {

flag = false;

for (j = 0; j < coordinateslength - 1 - i; j ++) {

if (direction && (coordinates [j] [0] > coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] && coordinates [j] [1] > coordinates [j + 1] [1]) || ! direction && (coordinates [j] [0] < coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] && coordinates [j] [1] > coordinates [j + 1] [1])) {

coordinate = coordinates [j];

coordinates [j] = coordinates [j + 1];

coordinates [j + 1] = coordinate;

flag = true;

}

}

i ++;

} while (flag);

}

function drawArrow (x0, y0, x1, y1) {

var context = cnvArcgetContext ("2d"), colour = "#00ff00", angle = (x1 - x0) / (y1 - y0);

contextstrokeStyle = colour;

contextfillStyle = colour;

contextsetLineDash ([3, 3]);

contextbeginPath ();

contextarc (x0, y0, 1, 0, 2 MathPI);

contexttranslate (0, 0, 0);

contextmoveTo (x0, y0);

contextlineTo (x1, y1);

contextfill ();

contextstroke ();

contextsave ();

contexttranslate (x1, y1);

angle = Mathatan (angle);

contextrotate ((y1 >= y0 0 : MathPI) - angle);

contextlineTo (- 3, - 9);

contextlineTo (0, - 3);

contextlineTo (3, - 9);

contextlineTo (0, 0);

contextfill ();

contextrestore ();

contextclosePath ();

}

function initialize () {

var array = locateO (), x0 = array [0], y0 = array [1], x1 = array [2], y1 = array [3], width = array [4], direction = x1 > x0, coordinates, length, coordinate0, coordinate1, x2, y2, x3, y3;

drawArc (x0, y0, width);

coordinates = printArc ();

length = coordinateslength;

sortCoordinates (coordinates, direction);

coordinate0 = coordinates [length - 2];

x2 = coordinate0 [0];

y2 = coordinate0 [1];

coordinate1 = coordinates [length - 1];

x3 = coordinate1 [0];

y3 = coordinate1 [1];

drawArrow (x2, y2, x3, y3);

slantArc (x0, y0, x1, y1);

}

</script>

</head>

<body style = "margin: 0;" onload = "initialize ()">

<span id = "spnA" style = "left: 50px; top: 150px;"></span>

<span id = "spnB" style = "left: 850px; top: 350px;"></span>

<span id = "spnO"></span>

<canvas id = "cnvArc" style = "position: absolute; background-color: rgb(255, 255, 0, 001); z-index: 1; transform-origin: 0 100%;"></canvas>

</body>

</html>

复制进来的代码都不带缩进的吗

该代码纯手写,不从第三方处盗用仅供参考


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/10380015.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-08
下一篇 2023-05-08

发表评论

登录后才能评论

评论列表(0条)

保存