技术泡妹子一 : SVG识别妹子身体各个部位

最新推荐文章于 2024-09-05 23:07:52 发布
五只鸭子
最新推荐文章于 2024-09-05 23:07:52 发布
阅读量7.2k
点赞数 3
分类专栏：用技术泡妹子 web前端文章标签： html5 svg path 泡妹子表白
本文链接：https://blog.csdn.net/tuposky/article/details/40677843
版权
web前端同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
用技术泡妹子
2 篇文章 0 订阅
订阅专栏
最近总想着如何用技术来泡妹子，看到空间一妹子发了张自拍照片，甚是可爱。
随及想到用SVG来实现识别妹子的各个身体部位，再当鼠标移动到不同的部位的时候展示相应的话语
演示地址：http://www.tianox.com/demo/svgpath1/index.html
废话不多说，进入主题：
1、首先要有妹子图片一张，哈哈
稍微调调色，让妹子看起来更加美丽些，你懂的。
2、用工具勾勒出妹子的各个部位的path，我用的是inkscape 工具
放大图片可以勾勒的更准确
勾勒好之后的样子应该是酱紫的
为了能够让鼠标移动到区域，必须将path填充颜色，不然的话，就只有移动到path的线上的时候才会有反应，
怕填充了颜色后盖住了图片，要把透明度设置为0即可
成品就应该只是看的到图片，看不到path痕迹了
保存文件后，打开文件，可以看到很多 <path> 标签
我们需要的就是他，然后就可以自由发挥了。
如我的html完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG</title>
</head>  
<body background="1.jpg" >     

<div>
  <div style="width: 450px;height:703px;float:left;display:inline">
    <svg id="svg_ydx"
xmlns="http://www.w3.org/2000/svg" version="1.1" width="450px" height="703px">

    <image
       sodipodi:absref="ydx_bj.png"
       xlink:href="ydx_bj.png"
       x="2.7254219"
       y="10.476072"
       id="image2993"
       height="703"
       width="450" />
    <path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 216.84915,292.50399 7.11001,-9.57739 6.97958,-2.82074 7.24051,-2.16475 9.71922,0 13.24161,0.72158 8.21894,2.49275 8.74077,5.96947 3.52239,3.87033 -1.17413,2.42714 -2.60918,1.37756 -5.87067,-0.52478 -5.02268,-1.77117 -3.0658,1.24639 -2.67441,3.41112 -5.41406,2.95194 -3.97899,1.90237 -6.06638,0.39358 -5.74021,-0.32799 -6.58819,-1.18078 -8.47986,-3.27994 -3.71808,-2.09914 -2.41351,-0.52479 -1.63073,-0.26239 -2.28305,-0.0656 0.91322,-1.57436 z"
   name="path_eye"
   inkscape:connector-curvature="0">
  <title
     id="title9">This is your right eye. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 220.63042,261.47636 11.11596,-6.35478 15.54389,0.23192 12.96095,-0.603 13.92955,1.99456 10.74696,2.41203 5.99617,1.80903 5.99617,0.18553 0.64574,3.01504 -8.11788,3.06143 -14.85205,1.71625 -17.61948,-0.69578 -12.68419,0.83494 -8.57913,-1.20602 -8.48687,1.43795 -7.47215,-1.66988 -4.01282,-1.34518 2.0756,-2.78309 z"
   id="path3000" name="path_brow"
   inkscape:connector-curvature="0">
  <title
     id="title12">This is your right brow. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 162.51377,241.29877 8.30239,2.78312 4.24342,4.26744 0.92249,3.80359 -0.1845,3.1542 -2.30622,1.94817 -7.01089,-0.83492 -5.07366,-3.15419 -3.68995,-2.41204 -3.68995,-1.20603 -5.53493,-0.0927 -11.25433,-0.74217 -5.25818,0.0928 19.64898,-6.03007 8.67136,-2.59758 z"
   id="path3002" name="path_brow"
   inkscape:connector-curvature="0">
  <title
     id="title15">This is your left brow. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 98.32687,269.54448 13.37209,-7.54384 10.24103,-1.24638 3.39195,-0.98397 10.30629,1.24638 10.69767,3.41111 7.2405,4.26392 5.2836,6.82226 2.15257,4.26391 0.84798,4.5919 0.32616,4.06711 -4.69653,-1.83677 -8.87124,0.65599 -17.02494,1.31198 -9.84968,-2.36154 -6.52298,-5.90388 -4.04422,-4.39511 -7.04482,0.19679 -6.39251,-0.52479 -5.47928,-1.04958 2.28303,-2.62394 3.58764,-2.09915 z"
   id="path3004"  name="path_eye"
   inkscape:connector-curvature="0">
  <title
     id="title18">This is your left eye. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 173.92803,298.34228 -3.91379,17.44923 -1.95687,9.315 -7.0448,9.18382 -7.43618,4.85428 -2.60919,6.16628 -2.47873,13.25093 4.1747,8.00301 4.04423,2.88636 -0.26091,-3.67354 1.43505,-1.04957 5.21838,0.26239 2.47873,1.31199 2.47872,2.88632 5.52625,6.81269 2.4907,0.83494 4.70468,0.83493 8.30238,0.37108 4.98143,-3.52527 5.7194,-4.08189 2.85973,-2.41205 2.21397,0 2.02946,1.66988 -0.18449,5.28791 3.50543,-5.10237 2.67521,-4.91683 0.738,-5.38069 -3.32094,-2.31927 0.27673,-13.35893 -1.01473,-6.03008 -1.01473,-12.43125 -1.19923,-12.80232 -1.47599,-9.36983 0.9225,-3.71081 2.95195,-8.25657 -37.45296,-1.85541 z"
   id="path3006"
   inkscape:connector-curvature="0">
  <title
     id="title21">This is your nose. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="M 253.11684,48.411543 234.06978,41.064504 216.3273,24.271253 194.93197,16.924203 167.79644,16.661808 149.27123,23.221671 110.91619,42.901262 80.1278,69.140702 47.252054,100.10326 41.250923,112.69819 19.855601,148.38384 3.417728,182.7575 l -1.043672,5.51031 0.521832,134.08356 24.004518,43.81989 17.742462,11.54535 6.001129,11.02057 4.957452,-0.52481 4.696534,2.36158 6.783887,11.28296 14.08961,17.31802 -3.65288,-8.39663 1.82644,-2.88633 3.39194,1.57437 7.30572,10.75818 2.8701,-0.26241 -33.13665,-53.52846 -7.044805,-31.48735 -4.174701,-48.01818 8.610319,-2.88634 24.526347,-13.11972 14.61143,-7.87184 29.74473,-12.07015 34.70218,-12.07013 19.30798,-5.5103 36.78952,-20.72916 23.74359,-12.07015 22.439,-17.58042 9.13215,-7.34706 19.30798,0.26241 15.91604,17.05564 5.74019,24.40269 -3.13102,35.42325 -5.74021,57.20198 -9.39306,26.50186 -34.44125,56.15241 0.78275,3.14874 14.35051,-9.97099 1.30461,10.49577 14.35052,-16.79325 11.74134,-20.46675 7.82756,0.26239 9.91491,-15.48128 10.69766,-10.75818 14.35052,-24.40268 4.1747,-13.11972 4.17469,-20.72917 7.04481,-11.02057 2.8701,-23.09071 -3.65286,-53.0037 -14.0896,-49.06776 -14.35054,-38.57197 -10.95857,-23.090722 -14.35052,-12.07014 -15.65513,-8.921411 -12.52409,-5.510288 -7.30571,-2.886336 z"
   id="path_hair"
   inkscape:connector-curvature="0">
  <title
     id="title24">This is your hair. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 215.54455,567.42781 -15.3942,-25.18987 -14.08959,-13.64452 -36.5286,-61.66269 -0.26093,-10.75818 3.13103,-7.34705 6.52296,-1.04957 7.82756,5.77268 70.44802,92.36284 -38.61596,-53.26607 -21.39532,-36.47283 -14.61144,-26.50185 1.56551,-3.41112 22.96084,-5.77268 6.52296,7.60946 16.17695,-0.26242 44.61709,42.24551 40.7033,38.30961 32.87575,32.79929 -3.39195,-16.26844 -0.78276,-10.2334 5.47929,-12.07013 10.43676,-6.82226 6.26204,0 2.60918,2.09916 0.78275,13.38212 0.52185,3.14873 3.65286,11.28296 7.82756,13.64452 2.34826,10.23337 6.78388,9.4462 4.1747,9.1838 0.78276,9.18382 1.56552,26.50185 1.04367,12.59494 1.56551,9.1838 9.65398,16.79323 1.82643,7.60944 -9.65398,7.60947 -84.27672,39.88395 -2.34826,0.78716 -12.52409,-19.15476 -27.65737,-22.04111 -26.09186,-24.14033 -10.9586,-11.54537 -12.78499,-19.94198 -51.14006,-49.33017 -17.74245,-21.51633 0.52183,-5.2479 -0.78275,-6.29747 2.34826,-3.14873 5.47929,-0.78718 2.60919,0.52479 2.87011,-1.31197 10.95858,7.08465 7.56664,8.9214 12.785,10.4958 11.48042,7.87184 13.56777,11.28294 8.08847,7.60946 z"
   name="path_hand"
   inkscape:connector-curvature="0">
  <title
     id="title27">This is your hand. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 74.39994,413.80975 16.97374,32.09859 15.49776,24.4914 -0.55347,16.14205 7.74889,3.89637 2.95194,6.12284 -0.36899,5.93732 18.26524,5.9373 30.62656,-11.13245 1.10698,-0.18553 -17.15827,-30.05764 -0.36897,-10.01921 -15.86676,-3.33972 -19.18773,-11.50356 -17.34276,-16.69867 -4.42792,-5.3807 -3.13647,0.37109 -8.11787,-11.318 -2.95196,1.66987 3.68995,9.09151 z"
   id="path3014"
   inkscape:connector-curvature="0">
  <title
     id="title30">This is your neck. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 219.59932,434.4048 9.96285,-7.60717 2.39847,8.34934 -1.10698,10.94691 z"
   id="path3016"
   inkscape:connector-curvature="0">
  <title
     id="title33">This is your neck. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 233.62111,435.51805 33.9475,19.66733 0.18451,3.52528 -13.46831,8.90597 -0.55349,0 -22.13968,-21.15167 1.47598,-12.43124 z"
   id="path3018"
   inkscape:connector-curvature="0">
  <title
     id="title36">This is your shoulders. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 73.66194,415.2941 -15.313277,17.81191 -10.700844,7.79272 -15.497774,9.0915 -11.254337,5.75178 -4.612434,3.71082 -2.76746,3.33973 -2.951956,8.90596 1.844973,6.86501 5.903915,2.2265 20.479201,3.33975 35.607993,2.78309 13.09931,-2.78309 11.25432,1.29877 6.82642,0.9277 0.92248,-16.69866 z"
   id="path3020"
   inkscape:connector-curvature="0">
  <title
     id="title39">This is your shoulders. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 392.44739,649.81968 4.04422,-3.14874 6.52297,0 5.21837,2.23034 2.2178,3.93589 0,2.49281 -0.91322,5.11666 -5.21836,7.3471 -4.1747,3.14872 -24.91773,14.43163 -53.87969,25.32108 -33.52804,0.26247 -3.39194,-6.4287 0.13045,-4.98544 2.73964,-3.80473 4.82701,1.57431 3.65286,2.09919 96.93126,-48.93667 z"
   id="path_bracelet"
   inkscape:connector-curvature="0">
  <title
     id="title42">This is your bracelet. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 404.46562,673.19591 19.92571,36.36602 -98.15257,2.22659 z"
   id="path3024" name="path_hand"
   inkscape:connector-curvature="0">
  <title
     id="title45">This is your hand. </title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 20.116519,652.96841 121.327151,10.23342 8.3494,36.47283 -2.87009,1.83671 -121.588089,-7.87187 z"
   id="path_badge"
   inkscape:connector-curvature="0">
  <title
     id="title48" >This is you Badge</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 31.412055,449.8047 -12.545817,1.85541 -17.342749,11.13245 1.844973,243.05857 23.246662,0 -6.641903,-52.6936 122.137229,10.01923 8.48688,38.22139 -3.32095,1.4843 -121.399244,-8.53484 0.737988,10.76143 258.296246,0.74209 -0.73799,-6.30833 2.21396,-4.82406 7.37989,2.59756 -12.54581,-17.81196 -63.83607,-56.77552 -13.65281,-19.66732 -67.895,-71.6188 -0.369,-14.84327 7.7489,-2.59757 4.42793,0.74216 2.95196,0 9.96285,5.9373 52.39723,44.9009 -14.02179,-24.1203 -15.12879,-12.61679 -17.71172,-29.31548 -28.41261,10.01921 -22.87766,-6.30838 0.369,-7.42163 -4.05893,-5.56625 -23.24667,-5.19513 -13.28381,4.0819 -60.884117,-8.16381 -5.53492,-6.67946 0.368995,-4.45299 9.224866,-13.73002 z"
   id="path3028"
   inkscape:connector-curvature="0">
  <title
     id="title51" >This is you sweater</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 256.12978,468.35878 13.28382,-9.27704 -1.47598,-6.67948 -14.39081,-7.05054 40.22042,12.61678 22.87769,-1.48433 19.1877,10.39029 24.72265,5.19516 8.48688,-1.48434 16.97375,6.67947 34.68548,17.81193 14.0218,18.92518 15.49779,32.6552 7.37988,19.29624 0,145.09301 -31.36453,-0.37112 -22.50868,-41.19 9.59386,-16.69878 -8.48689,-10.39025 -13.6528,7.05057 -11.06982,-26.34683 -4.05894,-54.54902 -11.06985,-20.4095 -11.06984,-26.7179 -3.68994,-21.89383 -4.05894,-7.05055 -12.54583,5.19515 -9.96285,14.47218 2.21397,24.86249 z"
   id="path3030"
   inkscape:connector-curvature="0">
  <title
     id="title54" >This is you sweater</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 121.63125,399.89418 14.57528,-2.96864 14.57529,-3.71082 8.67137,-2.04095 14.3908,5.9373 18.63422,-2.22648 11.25433,7.79272 13.83729,3.15418 -6.82638,4.82408 -8.1179,1.29878 -15.49777,9.0915 -23.98465,5.19515 -22.32417,-6.49393 -11.25433,-13.35895 -7.19539,-3.89634 z"
   id="path_mouth"
   inkscape:connector-curvature="0">
  <title
     id="title57" >This is you mouth, I want kiss it.</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 145.61838,516.52328 6.26203,9.70861 -2.08734,7.34704 -6.26205,0.26239 -6.78389,-7.87184 -1.04366,-8.39662 4.4356,-2.09915 z"
   id="path3034"
   inkscape:connector-curvature="0">
  <title
     id="title60" >This is you fingernail</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 149.53216,461.94524 9.13214,7.08465 7.04479,-0.78718 4.43563,-7.60945 -3.13102,-7.34705 -8.08848,-5.51028 -6.00112,0.78717 -4.17471,7.34705 z"
   id="path3036"
   inkscape:connector-curvature="0">
  <title
     id="title63" >This is you fingernail</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 164.66543,427.30916 7.56664,10.23338 7.56664,1.04958 5.47929,-8.13423 0.52184,-8.65901 z"
   id="path3038"
   inkscape:connector-curvature="0">
  <title
     id="title66" >This is you fingernail</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 193.36647,429.14591 9.13215,-0.26238 5.4793,6.82225 -1.30459,3.93592 -5.21838,1.31197 z"
   id="path3040"
   inkscape:connector-curvature="0">
  <title
     id="title69" >This is you fingernail</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 338.95905,496.8437 8.3494,0 2.34827,15.48129 -1.04368,1.31195 -6.52296,-5.51029 -2.87011,-4.98548 z"
   id="path3042"
   inkscape:connector-curvature="0">
  <title
     id="title72" >This is you fingernail</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 156.87024,369.46548 4.79692,1.48433 3.50545,-1.66986 -0.18449,-2.59758 -2.58298,-1.85543 -4.79693,0 -0.92247,3.89637 z"
   id="path3044"
   inkscape:connector-curvature="0">
  <title
     id="title75" >This is you left nostril</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 195.24566,374.84616 0.738,2.59759 5.90391,-0.37109 4.61244,-1.66987 -0.18449,-5.75177 -2.76746,-1.29877 z"
   id="path3046"
   inkscape:connector-curvature="0">
  <title
     id="title78" >This is you right nostril</title>
</path>

    <path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 53.920728,289.86844 19.556722,-9.27705 33.20952,4.45298 11.80782,11.13244 11.06984,5.56625 36.53048,-1.85541 -5.16593,23.37815 -14.0218,20.78059 0.369,24.49139 1.84497,18.55409 -26.93662,7.79272 -45.38634,-4.08191 -19.187716,-40.44791 -6.641903,-58.63092 z"
   id="path3048" name="path_cheek"
   inkscape:connector-curvature="0">
  <title
     id="title81" >This is you left cheek</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 215.90937,303.96955 -1.47597,50.09605 2.58295,10.39029 -12.91481,17.06975 -1.47599,15.58543 26.93662,7.42165 17.71175,-3.33974 3.32094,-0.37109 36.53046,-55.2912 15.4978,-35.99492 -37.26846,6.67947 -29.51958,2.22649 z"
   id="path3050"  name="path_cheek"
   inkscape:connector-curvature="0">
  <title
     id="title84" >This is you right cheek</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 178.64092,243.4832 130.25509,8.90596 2.58297,-35.62386 -6.27291,-24.49139 -13.65279,-17.44085 -19.55672,1.11326 -92.98665,60.85741 z"
   id="path3052"
   inkscape:connector-curvature="0">
  <title
     id="title87" >This is you forehead</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 183.06883,253.13133 32.10255,2.96865 -8.11788,31.54196 -29.88857,-1.48434 z"
   id="path3054"
   inkscape:connector-curvature="0">
  <title
     id="title90" >This is you ajina</title>
</path>
<path
   style="fill:green;stroke:#000000;stroke-width:0.73263538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0;opacity:0"
   d="m 122.55373,407.13029 -10.33185,17.06975 4.05893,18.92519 19.55673,11.13244 13.28381,2.59757 5.16593,-10.76136 9.22484,1.85541 8.4869,8.1638 2.95195,-1.11324 -12.17682,-26.7179 1.47596,-1.48432 23.24668,-5.56623 7.0109,6.67947 16.60475,-0.37109 7.01091,5.93731 8.85585,-5.93731 -13.65279,-15.58543 -22.87767,11.13245 -26.19863,3.33975 -25.8296,-5.93732 z"
   id="path3056"
   inkscape:connector-curvature="0">
  <title
     id="title93" >This is you jaw</title>
</path>

</svg>
  </div>
  <div style="width:400px;float: left; display: inline; padding-top: 100px; margin-left:200px;">
  <font id="font_content" style="font-family: 华文行楷; font-size:22px;color:#890335">
  	短发，轻轻荡漾<br><br>在你的肩上<br><br>在我的心上<br><br>从梦中走来<br><br>在眼前盛开<br><br>一朵欢乐的雪莲<br><br>和一曲青春的悠扬<br><br>彷徨<br><br>因为我心爱的姑娘<br><br>和那一身洁白的衣裳<br><br>在阳光下<br><br>随着你的短发<br><br>和年华飞扬
  </font>
  </div>  
</div>
<div style="text-align:center ;z-index:50;right:40%; position:fixed;bottom: 20px;">
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">      <a style="text-decoration: none;color:#E0E0E0; font-size: 14px;" href="http://www.tianox</span><span style="font-family: Arial, Helvetica, sans-serif;">.com" target="_blank"><span style="background-color: rgb(255, 244, 151);">天牛表白网</span></span><span style="font-family: Arial, Helvetica, sans-serif;"> www.</span><span class="KSFIND_CLASS" id="2KSFindDIV" style="font-family: Arial, Helvetica, sans-serif;">2tianox</span><span style="font-family: Arial, Helvetica, sans-serif;">.com</a></span></div>    </div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script>
		$(function(){

			$("path[name='path_eye']").mouseover(function(){
				var content = "你的双眸如秋天湛蓝的海水，<br><br>清澈纯净，<br><br>没有一丝杂质。<br><br>回眸一笑百媚生，六宫粉黛无颜色。";
        		$("#font_content").html(content);
			});
			$("#path_hair").mouseover(function(){
				var content = "短发，轻轻荡漾<br><br>在你的肩上<br><br>在我的心上<br><br>从梦中走来<br><br>在眼前盛开<br><br>一朵欢乐的雪莲<br><br>和一曲青春的悠扬<br><br>彷徨<br><br>因为我心爱的姑娘<br><br>和那一身洁白的衣裳<br><br>在阳光下<br><br>随着你的短发<br><br>和年华飞扬";
        		$("#font_content").html(content);
			});

      $("path[name='path_brow']").mouseover(function(){
        var content = "柳叶弯眉，<br><br>如天鹅的翅膀。";
            $("#font_content").html(content);
      });

      $("#path_mouth").mouseover(function(){
        var content = "薄薄的嘴唇，<br><br>诱惑人心";
            $("#font_content").html(content);
      });

      $("#path_badge").mouseover(function(){
        var content = "希望，有一天，<br><br>你胸前挂的是一朵红花，<br><br>上面写着：新娘，<br><br>而我站在你的旁边，<br><br>我是你的新郎";
            $("#font_content").html(content);
      });
      
      $("path[name='path_hand']").mouseover(function(){
        var content = "就这样，<br><br>牵著你的手 <br><br>手心传递我的温柔，<br><br>不放开";
            $("#font_content").html(content);
      });
      
      $("#path_bracelet").mouseover(function(){
        var content = "送你一个智能手环吧，<br><br>愿健康永远伴随。";
          $("#font_content").html(content);
      });

      
      $("path[name='path_cheek']").mouseover(function(){
        var content = "俏丽若三春之桃，<br><br>清素若九秋之菊。";
        $("#font_content").html(content);
      });

      
		});

	</script>

</body>
</html>