实现效果:

aaarticlea/png;base64,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" alt="" />

原来效果:

 aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAAyCAYAAACnIpuVAAAL+GlDQ1BJQ0MgUHJvZmlsZQAASImVVwdUU8kanntvGpCEklClhN4EQ29SQkeqdLARkkACIcQUFOxlcQXXLiJYVnQVRMEKyFoRxbYKWLAvqKio6+IqWFB5kwR13ztvzzvvz5nMd7/7//98M3dmzgwA1HS2WCxEtQAoEMkkiRHBjPSMTAbxd4AATUAGtgBlc6RiVkJCDPhHG74JvaFdc1Lk+me//2raXJ6UAwCSAHE2V8opgPgwAFgARyyRAYB7C3nLWTIxxHgDiOkSKBDi8Qqcq8JBCpytwslKn+TEEIj5AJDIbLYkFwAKjAeMIk4urCnrIWaKuAIRxO0QB3D4bC4AVBzE4wsKChWYCbFd9t/y5P5bzuxvOdns3G9Y1RelkUIFUrGQXfx/Dsf/tgKh/GsbFrCQ+ZLIREUNx602vzBagQmKMRRlx8WP8a0CrtJfHeJzfHlkCsRwLJFOjjQEjhmgQvyMyw6NHvMZluensFQ8CtgSZSwdYqpAFpX81V9SmDiWH7XgScOSIIazCHXm86JiVBrQAJEwToHtIA7NEYRHjfkLS/jJaWM+s4sEqXFjsfOl+UnRY+2uLOGHxI35bJbIE1PG+JocSbiij/D7oPsLpEptCr6Xw/6uQcZPjhzDr3jS9JivPJcXGvZVP0+UkjQW+0UsC078youFyrmu8hFGJKrGBCNLi5IUsToQ68ngBBvj7fLYkxJU/cJcxbKEb+MDMgEbSIEQFAJRa+3B811MkATyQR7gAQkoADHwbTEsEhALmVwlL4RFBP4AMjAAI2MVkUAAnwqhlyL2iSISR8d541i4QJwfzgPnQ3An2MJiDxiwDiX4EFwInoAFcoAANYTZ80AC/BfBHGyYXQjY+Af4PvwdEA+5bNhavrJFLmAonxQKuLBlDuCPqYwDj6FKGfwNVxYW+6byQSQQmJ6BMQzI8U0vgVCoUArESu15OQEKH5wxLgDnD1UGwzrob/3gATnMyoBt8JTxxTBOgQTwPUfpJYIeCsVi5chA5VQS1YnKojpQ6VQi1Zhq/bf24Phh27AW7DJ2HGsGwZBXqc+HmhXawyBS5mB2MHcwjzJ7mC+ZOwGQ8WYr1ioIKRQXSwS5fBmDBXctHiNKxHEez3BlungAoNgDVUvszS3l3obokb5z0+B6d98P96Y937mc0wBshStFv/s757oPbicPAGg6wJFLilScYosBeDhzNOGKMgSmwBKuDifgCjyBHwiCmifBb5MMMsB05VcogD2YBeaCRaAUlIPVYAOoAtvADlAL9oGDoBkcA6fBOXAJdIIb4C7oBf3gBRgEw2AEQRAiQkFoiCFihlgjjogr4o0EIGFIDJKIZCBZSC4iQuTIXGQJUo6sRaqQ7UgdcgA5ipxGLiBdyG2kDxlA/kI+ohhKRumoCWqDTkC9URYajSaj09BcdCZagi5FV6KVaA26F21CT6OX0BtoL/oCHcIApoHpYeaYE+aNhWDxWCaWg0mw+VgZVoHVYA1YK9aBXcN6sZfYBxwBR8MxcE5wNkfiUnAc3EzcfNwKXBWuFteEa8ddw/XhBnFf8BS8Md4R74uPwqfjc/Gz8KX4Cvwu/BH8WfwNfD9+mEAg6MH570WIJGQQ8ghzCCsIWwiNhFOELsIjwhCRSDQkOhL9ifFENlFGLCVuIu4lniR2E/uJ70kaJDOSKymclEkSkRaTKkh7SCdI3aSnpBE1LTVrNV+1eDWuWrHaKrWdaq1qV9X61UbUtdVt1f3Vk9Xz1BepV6o3qJ9Vv6f+RkNDw0LDR2OyhkBjoUalxn6N8xp9Gh/IOmQHcgh5KllOXkneTT5Fvk1+Q6FQbChBlEyKjLKSUkc5Q3lAeU+lUZ2pUVQudQG1mtpE7aa+0lTTtNZkaU7XLNGs0DykeVXzpZaalo1WiBZba75WtdZRrR6tIW2atot2vHaB9grtPdoXtJ/pEHVsdMJ0uDpLdXbonNF5RMNolrQQGoe2hLaTdpbWTyfQbelR9Dx6OX0f/Qp9UFdH1103VXe2brXucd1ePUzPRi9KT6i3Su+g3k29j/om+ix9nv5y/Qb9bv13BuMMggx4BmUGjQY3DD4aMgzDDPMN1xg2G943whk5GE02mmW01eis0ctx9HF+4zjjysYdHHfHGDV2ME40nmO8w/iy8ZCJqUmEidhkk8kZk5emeqZBpnmm601PmA6Y0cwCzARm681Omj1n6DJYDCGjktHOGDQ3No80l5tvN79iPmJha5Fisdii0eK+pbqlt2WO5XrLNstBKzOrWKu5VvVWd6zVrL2t+dYbrTus39nY2qTZLLNptnlma2AbZVtiW297z45iF2g3067G7ro9wd7bPt9+i32nA+rg4cB3qHa46og6ejoKHLc4do3Hj/cZLxpfM77HiezEcipyqnfqc9ZzjnFe7Nzs/GqC1YTMCWsmdEz4wvRgCpk7mXdddFwmuSx2aXX5y9XBleNa7XrdjeIW7rbArcXttbujO899q/stD5pHrMcyjzaPz55enhLPBs8BLyuvLK/NXj3edO8E7xXe533wPsE+C3yO+Xzw9fSV+R70/dPPyS/fb4/fs4m2E3kTd0585G/hz/bf7t8bwAjICvg5oDfQPJAdWBP4MMgyiBu0K+gpy56Vx9rLehXMDJYEHwl+F+IbMi/kVCgWGhFaFnolTCcsJawq7EG4RXhueH34YIRHxJyIU5H4yOjINZE9USZRnKi6qMFJXpPmTWqPJkcnRVdFP4xxiJHEtMaisZNi18Xei7OOE8U1x4P4qPh18fcTbBNmJvw6mTA5YXL15CeJLolzEzuSaEkzkvYkDScHJ69KvptilyJPaUvVTJ2aWpf6Li00bW1ab/qE9HnplzKMMgQZLZnEzNTMXZlDU8KmbJjSP9VjaunUm9Nsp82edmG60XTh9OMzNGewZxzKwmelZe3J+sSOZ9ewh7KjsjdnD3JCOBs5L7hB3PXcAZ4/by3vaY5/ztqcZ7n+uetyB/iB/Ar+S0GIoErwOi8yb1veu/z4/N35o8I0YWMBqSCr4KhIR5Qvai80LZxd2CV2FJeKe2f6ztwwc1ASLdklRaTTpC0yOjxsXpbbyX+Q9xUFFFUXvZ+VOuvQbO3ZotmXix2Klxc/LQkv+WUObg5nTttc87mL5vbNY83bPh+Znz2/bYHlgqUL+hdGLKxdpL4of9Fvi5mL1y5+uyRtSetSk6ULlz76IeKH+lJqqaS0Z5nfsm0/4n4U/HhludvyTcu/lHHLLpYzyyvKP63grLj4k8tPlT+NrsxZeWWV56qtqwmrRatvrglcU7tWe23J2kfrYtc1rWesL1v/dsOMDRcq3Cu2bVTfKN/YWxlT2bLJatPqTZ+q+FU3qoOrGzcbb16++d0W7pburUFbG7aZbCvf9vFnwc+3tkdsb6qxqanYQdhRtOPJztSdHb94/1K3y2hX+a7Pu0W7e2sTa9vrvOrq9hjvWVWP1svrB/ZO3du5L3RfS4NTw/ZGvcby/WC/fP/zA1kHbh6MPth2yPtQw2Hrw5uP0I6UNSFNxU2Dzfzm3paMlq6jk462tfq1HvnV+dfdx8yPVR/XPb7qhPqJpSdGT5acHDolPvXydO7pR20z2u6eST9zvX1y+5Wz0WfPnws/d6aD1XHyvP/5Yxd8Lxy96H2x+ZLnpabLHpeP/Obx25Ernlearnpdben06Wztmth1ojuw+/S10Gvnrkddv3Qj7kbXzZSbt3qm9vTe4t56dlt4+/Wdojsjdxfew98ru691v+KB8YOa3+1/b+z17D3eF9p3+WHSw7uPOI9ePJY+/tS/9AnlScVTs6d1z1yfHRsIH+h8PuV5/wvxi5GXpX9o/7H5ld2rw38G/Xl5MH2w/7Xk9ehfK94Yvtn91v1t21DC0IPhguGRd2XvDd/XfvD+0PEx7ePTkVmfiJ8qP9t/bv0S/eXeaMHoqJgtYSuPAhgsaE4OAH/thveHDABonfBISVXdUZSGqO5VSgT+CavuMUrzBKD6FAAZQQAojtcrYe0IiyXECbBODgKom9u3MmbSHDdXVS6NZng0qRgdfQODifYAfO4ZHR1pHh39vAuKvQPAqWHV3UhhlAbFNUuBLs57DP7T/gWAA1DURl/EmgAAAdVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4xPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPjI8L3RpZmY6UGhvdG9tZXRyaWNJbnRlcnByZXRhdGlvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjl0tmoAABnJSURBVHgB7Z15kFzFfcd/ewtppdXBSixIQgLdFxKSJSQuiUtI4jRxbCiSGJPY5aSolFNJhRxVdlwxVJFKKlWp+B+bSuLEGAqnQAJ0ECQjcQqBAAlpOQQI0H1fSOyd/vTwW/W+fTPzZubNaGanu3b2vdf96193/16/b//617/Xr+Krr77qMkFyDfDQX2dnp9TU1EhHR4f9VVZWSlVVlS2COOgqKirssbq62sYT197eLlxrmtJCQH7i3UAeAvwJlEseAvQazzW8udY4ruHHT+OgSxcoA3q3LtSD+GQhSJ+MLhjvlhFM89deAl4CXgKpJJBA1lQUGaQBcACSC9hBkOUaOn6cawCUuVZAUz4KnHpUeveo4Ewezl2+Lp17rnV046KchwE15UYpMwp/T+Ml4CXgJRCHBCri0tzDKqOadVhaoeO0Ljp45FJ+HDyilF+ocqLUxdN4CXgJlJYEYtXci7npHiiL+e74unkJeAnELQFrrAb48gF++eAZtwA8Py8BLwEvgb4ogcRKZF9smW+Tl4CXgJdAGUvAg3sZ33zfdC8BL4G+K4GSBfcNn1XK2k9Ktvp9t0f5lnkJeAkUhQR6Lqga27sNX/uPx1JDeMbJz1Tq0c1V8qPVtdJp3NwfvrFNHpjbHktV0zJR+aQlzJGgUOXkWE2fPT8S2Ldvn3z44Yeyd+9eOXXqlC2kvr5eLrjgApk4caI95qdkzxWX7ObmZiv/Y8eOWdfqhoYGGTdunEyZMqWkXJ6tK6Te0u5XmWIEY8szJn6w+cmLNfJPr1TLkvEd0s8MTU81V8kPv9EujxiQr8q3Iv816PZ8lUqlF+OxUOUEqvz555/LwYMHA7HZXTY2Nsro0aOzy1ymuc6cOSMbNmyQzz77TGpra+Wiiy6SQYMGWWmcOHFC9uzZIy0tLXLxxRfLNddcI+edd16ZSio/zf7yyy9l9erVcvjwYRk+fLg0NTXZghhkDxw4IEOHDpUlS5bIgAED8lOBmLn2AHflrT7heh3XMRe+rebF0x8+Wyu/2Volfzy7Xf5lcZtUGpT9+3U18q+vVcuyCR3yn3e2yoCauGrbm0+hvH8KVU6whY8++mj3G77BtEyveanr/vvvzzRb2dKjoT/zzDMCwM+ePVumTp3a/TKgCoW3qrdt2yZvvfWWBfZbbrlFBg4cqMn+mIME0NifeuopO1O6/vrrZdSoUT24ffHFF7J27VphBnXnnXeWhAbf0yzToznFc3H8K5Hv/LZOsLP/w6I2+asrz5phHrq+TcYO7pS/WFMri39VJ//77VYZUd89BymeRpRATejgAAuayaWXXmq3kMik2m1tbcJDcPToUQtAmeQtZ1rkjsaIVn7rrbcKs56wwFvVl112mdXon332WVmzZk3JAE1Ye4opbvv27XLkyBFZunSpjBw5slfVAPsbbrhBVq5cKdBOnz69F02xReTbkJFze3edqJAbDGi/9kWlPHp7aw9gV+Z/MrtDnvz9FvnwcKVc+x910nwwHsMJGrT70/L6+vH48eMCeKBFRg1MadE8sRf7kJkEtmzZYoHluuuuSwrsLsfzzz9foAWM3n33XTfJn2cpgR07dlhTTBiwK0vSMNdAWwqhqMF9y/4KWWjAGoBffk+LfGdaYlOwMMHePK5Tnv/DFmkzJNf9V528uLOomxbWhKKJmzdvnlxyySWyYsUKwdabLmCnf/rpp+2i04IFC9KR+3RHAuyxtHXrVhkzZkxGaxSsZ5DnvffeS7lpnVOUP00hAWabamNPQWZpoC2FUFAEVC04imBwc7zRaOwskq79oxa59uLkuy4qv5kXdMqL32uRkYO65I7f1Mn/bDm7MZnS+GM0CTD9nzVrltXGDx06lDTTJ598Yk0KV199tcyYMSMpnU8Il8D+/fvF7O9kvWDCKZLH4jlDXnj4kLsEclkTzL30+DkUFNyjVh9Q/uYTdXKypUJ+990WmdIY3YY+ygA7gwELsD9YUSv/uKFaoueOWsPyoJswYYL1ysAevHv37l6N3rx5s2zcuFGWLVuWkdbZi1EZR2BaITDdzzRoHuWRaX5Pf1YCQ4YMiTRIYnaEthRC6IKqemtEGcmi0KQThMvjn1+tkR//rkb6Ga8XTCxN9Z0Zu8kPrE2UOKx/lzy0oUZ2G7POz5e1pqtGd3om7e/OlMOJlqcsXHloXKGOlO2Wj53xxhtvlBdeeEHmz58vY8eOtR41uOxhsrntttukf//+PfJofj0Wqu6lWA6LqARcHzOVF3kI8Mg0r83o/3VLAAeC119/3ToEJLO779q1yw4AV1xxRUnIOxTcu1sc4SQITBGy9BKMy2PNx1Xy3Vnt0jigSx55uSanDc1+MKddao1lZtVHZ/eJj1I/pXHrpXGFOJ6rcmkbZQfLHzFihNXOV61aZQEdP2xc8PDsCNvHXvPrsRAyK9Uy6urqbNVbW1sz9lsnDwGQ97K2osj6H66nvDiGuyNeMUGAB9hJw9cd2lKQd9GZZf7PLIr++7I2qYmpZrhNrjOmHR9yk8DgwYOtlr5z507rA4y3Rhiw51ZK+eUGLAi8JJNp0DzDhg3LNKunD0iAvnzzzTfbN1Jxd/zoo4+6KVBmiAPQFy9eXDL9PiYI7ZaDP+nDEsD//Y477pDLL7+8D7eysE1jVtSvXz/54IMPMi6YPOSFhw+5SYC3UAFwFqgxM+qbwXBFxrwNjPmL9adSWcCuTmWrS5WWjSgz4me3LOhp/6XMf9tYbRZae5Y+0MxsH5h39sWmRKpZRg3Yj3vmSn8VrG8pTMXStyo5Be3VX3Kq9CnKIyi/9DmLh6JQ95rPNk6bNk3efPNNYfuHqFs2QMssas6cOVbbLB7JlV5NeOv31VdftYDO+hIupu79Z/C89957rbzfeOMN6yKMd9ikSZOKurEpbe7awLge0jj4PfhCjfzd1W09hEpcb3DvQZLVhdY3q8wZZCpUORlUKSVp1PpGpUtZ2DlMLFT9cTvFpXTdunV2HYOXlFIFXFOhxaRD3kLVM1WdSjUNO/srr7xiAR1TY01N+P4lyJh3P3hTFdnjUMBaBwuxxRpK0izzt9e0i/srVuH6epW2BOJSatJJgW0FsPeyuLp8+XL71in7yAQDcbyRCg205PHAHpRS9OuTJ0/KSy+9JBdeeKH1CEsG7C5HaNDuyQPA82Z2sYaUmnuxVtrXy0ugUBIIAny+wBTvIzakWr9+vXXJe/vtty2AsN0sgS0h3F0hr732Wrs1Lfuc4LWkdIWSS18ohw3YCAsXLszItIUpbdGiRfLEE08I9+mqq64qSnFEA3czJbHB2sFjaIfyU1Zx8VV+uR6D9cuVXzB/vvkHy8v1utTqm2t7U+QPgn0y0mwGARbt0MZ5UYbFUhb5sK0T2I1wjLEFY+dlX3cCZgK2H2BPHw/wViSR/+FG+vHHHwsv6mWzsyb3g7yYdfB7Z/ZVbCFSjb6G9tje9FR+KoxM3iDFbz0YwuKCNJlcB+uXSd4otPnmH6UOYTS4g6HNqEYTRhM1rtzdJBkEsgF45At4K4CnkjfuqYA6m7yxDxDnxPmQXgIMnJi5GCCzDeRl5oT3DHvvF1uIBO7nstIPme0D3HDv9Hbz1mn6ODePP48mAWyJcX2sQ1+Nj1ayp8pWArwKz77uADwa/O23397DjS9bvn09n37hii2qAfpsgq6LYLsvxtATJdPUUDWRqFPTNOy6k5Vvd4Q5GW0UkDpTu4fMW6qZWm2wIpB39ODUc4Kwct06xHVeqHKi1jdZffjCDz8f4pFALtp7JjUA4NHa8cHGk8b10c6ETznRIjP819luOVs84zmCR7HOlirMnt2pETDkjmcrjBBWKaPyXU4ykEtZqSwSC1VO1KoVW32i1rsv0fl70JfuZnG2JeVLTOmqnG/wTVd+rumlXv9k7U8HHH213cnkkU18Ohlmw9PNwz3Idxluef68/CRQED/3cwEmuqlS8JZSl2RpQVp/Xb4SoJ+ci35bvhL3LY9bAhnZ3IOFo3mEPQAKoOzFgJuR7jetvrip3IZYpOCbkhpc7UbL4shLHG6a0nNkfwg2VeJNP/aJcMPp06ftNz55pTjKSwtu3qjnyeoVNX86unzzT1d+OaVrnwu2OY57AO84+ATr5q+9BJBATuCuIqSTHj582H7uC2BGMwbAAU9e0cXpn04M2AP0eFLoVqfKQ4+AL/uE4/ObLJDOwl/Yg0FdWFTCFY/y+OkDysIH5VM3VriJ5zNn1Jk6Uc90gVV26IKDBvngRf0ZoCifjbbK3SUwnTxLNV37VFgfzKRNyieYJ1e+QX7+uvwkkDO40wn5sWoMuAFmuNO5fp98aJlOrGDHSxq6G16YyAHfZNuYwufYsWOhwA4vyiY/LxkA8gA6Awn58EcFlPmh2Wsa9Y7yMAHa8GQ2Ag83D4MILlWUQ3kMcNDSTtodR3DLi4Of55G7BLjfYSHXewXfXHmE1cvHlY8EcgZ3FRWAR4dECwYsg0HjGARSbYwED7Rf/E+TBeUVTGfQAGTZ3EdnC4A9Wj5gDm8dNBobG+1sA9p0AW0dsOYVcAAePsEAfwY2BjXKhoZP0zGg5PKiRLAcf10aEtA+4gG6NO5XX6ylBXftiNk2EJOMgim8AHiAUAM2cDcOGkAYjT7oIwpwY8pxNX/lw5G8bKQPHWW6AVMOgwcaMw8V6WjYfK0c4EWjV/s/fNCwGUhSmYCgA7g1cM2PoEfaBh/eKqRcjadsNhZqa2uzZSuPTI8KEMo30/yePjMJqLwzyxVOrfcsG57kzSZfeE18bLlJoCc6Ztl6gFZ/AB2dEg1Xf6QBcHrNUemCRULLYMAmSWu2HpVVWxMbJnH9q42nZN32o7YsfWg6nEkCL2/oJ8cA9k6DwVVVickJdnr4auChAXjTec5Ax3dD9QdfLVt5cQTYg+YXBi/yl5LdHTkFA3tYE7hvwcB9ZC/yvhS4v8Ffru0L6zMuT302iGNfGZ4XFAath0ur5+RRvvr8aZo/5i4B8IKZN+tzyLfUgkU+AMgN2mHcuFTnmDg00CnR5NX8QfxJY9ZAY9ZPiiEwyggzz+BRU18/0ICiyCLD9qfr+8mcMQPk6GmR5uN18u1ZBqC7Bpj0SgHYf7S6Rob0M/Z8863gTbsrZHRDtZx/Xn/5qr1SjrVUyI8XtssQ4zCDaQXwVY8d6gW4p2prUC7kCXuIAG99K5D20xngzY9vMYbxgVeykCl9Mj7ZxDPL2bx5s90UiTWE2bNn2wEQIHn++eeF3Qh1ENu0aVP3gM1WtMiStl955ZW9ZlXZ1KWY8rj9JNv7A49keTHhMbDyfc6d5iMcmBLZjnbevHl2dktePiiBMoKCwTO3Y8cOu3MkcuK+TZ48ude3P4tJhqVQF/q+Pr8obDiFgBnEL1iwIG8edvmQTaSXmNyOna4S0KLN8VMPGkwvrY7XCguigJ7yRcNl9zs6LZ3/1T0DZP3u/lJf0yG1lcfl7scHyYRBp6RfVZf85dNmsGirlkUjD8kVF5ySB8abjj5ynFSawWDb/hr52fVtsm3be0Zlr5U6Q7//M2NWMTwBJ26aLnrSDoAak4zWQ9umD2AwnnSdcYSlkY65iXbrQ8jor2BIeljQ8jQtGW9Nz+eRLwExMGNS4j7pYjhfq5k/f76N1/phehs/fnyP6gBStEdpeiSWyEXwfgSrHWxbOvpg/uA1/PhOJ58vZIbKIjyB3QZZM0J5YE2LQROTJPcGsyX9DECnX6M48fz4kJsEZs6caZUy5Mz9eP/99+3zyzl9e8yYMbkVUMDcsS2oap0BNbRXtsJkxKPTYdsG9ABTtFk6Kx1UA3ZyvmjCQ0IH5eMmd7VVyH+/WyU1FR2y6WCrzJ94vjWznDGWge/PZjpabwEEnjf9ulZ+b3KHfOOiTvnlW1XmAWmU7S2j5GED9JMaE/ZxHh60a/aUyCVQXvDhdvkB5OPGjbM0DCR8NZ3RXzV7l7bYzgEJTCyzZs2ymiAyA9y5XwxqL7/8sv1QAfeToFqN2w5Nc+NK7Tzs/qYCcJc+FR1yUFqXjj6FOZEtaPkiEyZA/aYq9CgmbPXLWhL3iGcMsCdwzkxYr22k/5eVBHhe6fPIHEvDO++8YwdQBliea5W7a5XIqqACZYoE7toRtWMG6wZwo+WpNwnp7HXsahKAOdNOOiIeKsoTWs6hhT+/Tz/9VAYMaZIPDw+UBxe0yUT5SCaPm2Iou+TPV9XJ9y5rtwMFQALwjG3okj+b1yGrd1TK/hOd8q2xe+W3+wYbgDotB7oSn+QDpAgMPARtC0cGF2YXbp0sUci/MHCHJzfe1dDh1dTUZDUv5OKCe5RyQorOexQAwdST6T6aIZ3Y/U4k9xh5a+C+o824gcG7LwbtL7Qt1f1TulQ08HDpkClaOn0IjVHzat/Ue0AfZiZIH4SWdM77woCKTM514HnlxwDKfZg4caIFeQZXlFQG31IBdmQZySwTFLp2TOI5R0ung6nvenNzs+2gLh3gBmhjKwTo3TSXPwMAC0nDmuqk+WCF/HprjezbO1ReOHDc5vnk4CBbHvmxT9o6GNDnur2jSwbWmBvRMFTadyUWdHkg0Hj0hSoeBg08RAAvcYB7sjopPUc1Obm08KBtfM+SctzgmnHch9alKaZzNEg6uJqxGIw1IEu33dDqIjVtI42BEnm6A7vmL8Wj3rNUdU9Gkyw+jBe07KMPiGBqQX5okYC48kEpQt48P6xXcY8YTHleuBdcK21YGT4umgTAIFyxeXYZWFF2MIExIy8l+UbS3FOJhMbSGVWjozO6AKp56YRouK4Gq2nukakR+fk1mNn/mAbzgtHxFrn0kovsx0LeOlYlU6agxfcO7+ytlG9Nq5ZRw0bJoJ3VpsO3y9Fje+RSc1OYWqmZSHNSd+qFi2TUQL1cgCOfDlbU3f16PS6UbeaBG2BeqCqlgGlmpjHNABYAhwauTe+2lwxm2CFpMzMWBgHMOciZKW3YYrnyKaWje6+TPdhKE0xPFh/WfhakUTBQWPBOmj59ujXpsYAdDNwTtMiFCxfKa6+9Zu8R98KH3CTA88pn8xhgeY5VpgA798Z1xsitpMLkjo5qTn20E2vnVWBXEkY8DZwDBAADIx+dctq0aRYgsUdjX1R+aNjQoaF8YBYyGmqnyZTGDqk4dFKmDk/YzgcZwFd6LeNCY37csr9SPj9RIbvN75GXKmVE9RE52W+fzJg+wS6aHvhaAyUvGiigjlkBMMrkwxK0Jzh4sSjLB3NZFEaLB+x4APHQgfcw01mKKQTl59YNsGYGVmtmIExBMa9psO8PmAsGabRKABxZQkNfQKtk5gJQ8WCkG8iVb6kctb9T3zAZkp5JvLZ748aNto+iJMEDGfIR7KVLl3bzo8/hPUM6IINDAi/toeGjXFAufVrPlbc/RpcA/f2mm26yzy1mGQJeSPRr0sALsC4TZTB66fFTZmWW0Wq4nZ2pDFo7R+LpjGhzTG8YCQEAOiCAxwb52HdVK4SefAr8dNCLx9bKe6+fkV+sP2amR0Nka+tpK9idRyqsTQz+nZ1d8sGRamnvbJBfvlkpfz3zCzl6YLf8wfBOWXN8pmxtnySL6hKaNqDMj7K4QdiKMSFQL8DYbYu2L+yo/uxBesCdNtEZkAPbHzBI8SAGacP4FkMcoI1745IlS6yMAQ7tyNxL2kbgnjJAk4a2w30jMLjtNG58aJto731hkS8MrGmre09dGo1341z6YDxpc+bMscCBWYYBFCUIrw2umUUB5Gjyc+fOtYMAYIOGSVl4MLHQjekAQFq8eHH3gABvH6JLAFygn7OozfOLjMErBlncUJEvZppS+aBNhVk8SKjE0WXQi5JOBjjzYKPFovnxYCMkwC04RUdbxuVrjHEr0qkO3yJkdFQ3sJMtIht3VcrcxsRCLRoioPnGoaEyqyFhB27vqpTle8bKN2c3yOVNiToAQAAt2s+GnZUyq6lTBhptnwGFepCW7xD2AOe7TJd/LuUjZ+4hAMKP6SgBsEb+DG5uYPEJOvoAYI+2rgOCS9cXzlPJNSwtLA45hMWjeDBrYiGbdKUhnnsC2GhAg2QQAPQJXDNj5Jnj3vmQvQR0Ro9XHeeu3MEt952e7EspTM6KJ598sovRPo6gWks2vMirHTqb/OnyMEtgZM6HZ0E+6x3WrkKXF1aHcokLk3VYnMojLC1qnPLgGJbHTY9KE8zjr8tDAitXrpSqudPm/uTjI4dk6njjXB5zyAXsY66K1eQB9zhClAcvjnKCPM5VucF69MXrKLINowmLQz7B+OB1GE1QrmF5sqEJ5vHXfVsCzz33nJ1BV5ipXdff/PwX0tR+xk7vmOJhe8Wn+bHHHrPTcmxOZGBqftddd9lFm4TNO2HP5hwg12PwnOvgD/FqnJ6HHd04zoMBHj54CeRTAnGBbBQ+bjsypXfzFvM5JlJ2SsXkgS2bdyuCR2zdmHVnzJiRsims/7C2FQxvNidi5kwWcc+DdO51kA75B+OU3r03nG/ablLMca5x5Nu03XiUmb95U8+a16DRH7Z8tvXQa9a2gudr1661i7uk6Y8PoC9btkxWrVplP4hOPAorvxUrVsg999xj1xExzWGhqIbpw3/6U/n+zx6UOY0N1lsFOx+LNNj/7r77bpv5vvvuk8cff9y+josZR4HcBXkFa01zrxGKXutRBcW1pgfjgvFh15pHj8pPr/3RSyAfEuDZSRfioklXDulRyorCJ980rK2xNsMaGM4MeJQFjwAXdOk82VjzCaOp353AlOHDK8Q9T9Y2ZDdwTyLPiBFn76vmHTGi59YOrqw5d+nqdyVMzJqHdPfH2ghri24c7XWvkYfSKLhrnB41niNOKKyPAfSseRH3/zeBrfUZL/VPAAAAAElFTkSuQmCC" alt="" />

实现对应的思路有:

1.首先你要拥有这样的一个控件CSTabBar,继承自tabbar,这样才能做到重构(废话)

2.你要在使用CSTabBar使用kvc来实现    [self setValue:newTab forKey:@"tabBar"];  newTab是自己设定的对应的tabbar

3.就可以开始构造自己的Tabbar了,构造的第一步当然是设置中间按钮的size。

4.改变对应的tabbar 里面item的大小,和对应点击事件发生的时候你要响应什么东西。

//
// CSTabBar.m
// diary
//
// Created by asheng123 on 15/4/11.
// Copyright (c) 2015年 asheng123. All rights reserved.
// #import "CSTabBar.h"
@interface CSTabBar()
@property(nonatomic,weak)UIButton *plusButton;
@end
@implementation CSTabBar -(instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setPlusButton];
}
return self;
}
-(void)setPlusButton
{
UIButton * plusButton=[[UIButton alloc]init];
[plusButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
[plusButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
[plusButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
[plusButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
[self addSubview:plusButton];
self.plusButton = plusButton;
}
-(void)layoutSubviews
{
[super layoutSubviews]; [self setupPlusButtonFrame];
[self setupallTabBarFrame];
}
-(void)setupPlusButtonFrame
{
self.plusButton.size = self.plusButton.currentBackgroundImage.size;
self.plusButton.center = CGPointMake(self.width*0.5, self.height*0.5);
}
-(void)setupallTabBarFrame
{
int index= ;
for (UIView *tabBarButton in self.subviews) {
// [tabBarButton isKindOfClassL: NSClassFromString(@"UITabBarButton")];
BOOL isTabBar =[tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")];
if (!isTabBar) {
continue;
}
[self setTabBarButtonFrame:tabBarButton withIndex:index];
[self setTabBarButtonTextColor:tabBarButton withIndex:index]; index++;
} }
//设置每一个tabbar对应的frame
//传进来的tabbar 也就是当前的一个按钮,那么要给他设定对应的值
-(void)setTabBarButtonFrame:(UIView *)tabBar withIndex:(int)index
{
//首先取大小
CGFloat tabWidth= self.width/(self.items.count +);
CGFloat tabHeight = self.height; //然后就是给对应控件赋值了
if (index>=) {
tabBar.frame = CGRectMake(tabWidth*(index +), , tabWidth, tabHeight);
}else
{
tabBar.frame = CGRectMake(tabWidth *index, , tabWidth, tabHeight);
} }
//设置每一个tabbar对应的背景color
-(void)setTabBarButtonTextColor:(UIView *)tabBar withIndex:(int)index
{
//要给每一个选中的tabbar对应一个background
//比较重要的就是判断对应的index和当前选中的项目是不是相同
int currentSelect= (int)[self.items indexOfObject:self.selectedItem];
//判断对应的是不是选中的项
for (UILabel *label in tabBar.subviews) {
if (![label isKindOfClass:NSClassFromString(@"UILabel")]) {
continue;
}
if (currentSelect == index) {
label.textColor = [UIColor orangeColor];
}else
{
label.textColor = [UIColor blackColor];
}
}
}
@end

其中index这个设计的比较巧妙。通过遍历来找到对应的index,判断是否是相同的一个属性,isKindOfClass可以判断,因为这个事对应的子类中的方法,可以判断出是什么调用了这个方法。之间存在着继承关系

封装实现一个自己的tabbar的更多相关文章

  1. 自己封装的一个LoadRes组件

    这两周一直太忙,没有好好处理上上上周遇到的一个让我加班到凌晨的问题,这个问题是判断flash的加载. 之前的思路是让flash的人在制作flash的时候,加入了一个回调方法,该方法再会回调我页面的方法 ...

  2. 自己封装的一个JS分享组件

    因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. ...

  3. 使用原生JS实现一个风箱式的demo,并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

  4. 使用 ViewPager 和 RadioGroup 封装的一个导航控件

    import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.dra ...

  5. 在jsp提交表单的参数封装到一个方法里

    建议去看一下孤傲苍狼写的Servlet+JSP+JavaBean开发模式(http://www.cnblogs.com/xdp-gacl/p/3902537.html), 最好把他JavaWeb学习总 ...

  6. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  7. 基于Dapper二次封装了一个易用的ORM工具类:SqlDapperUtil

    基于Dapper二次封装了一个易用的ORM工具类:SqlDapperUtil,把日常能用到的各种CRUD都进行了简化封装,让普通程序员只需关注业务即可,因为非常简单,故直接贴源代码,大家若需使用可以直 ...

  8. Timber(对Log类封装的一个工具)

    Timber(对Log类封装的一个工具) https://blog.csdn.net/hzl9966/article/details/51314137 https://www.jianshu.com/ ...

  9. SpringMVC 中,当前台传入多个参数时,可将参数封装成一个bean类

    在实际业务场景中,当前台通过 url 向后台传送多个参数时,可以将参数封装成一个bean类,在bean类中对各个参数进行非空,默认值等的设置. 前台 url ,想后台传送两个参数,userName 和 ...

随机推荐

  1. hdu 1032

    题目的意思是把输入的i,j 从i到j的每一个数 做循环,输出循环次数最大的值 易错的地方:做循环是容易直接用i进行计算 i=i/2:或i=i*3+1: 这样i的值改变就不能在做下面数的循环 #incl ...

  2. iOS开发UI篇—常见的项目文件介绍

    iOS开发UI篇—常见的项目文件介绍 一.项目文件结构示意图 二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要 ...

  3. html基本标签结构

    简单的html5的基本架构 HTML全称为HyperText Markup Language,一款写给浏览器的语言. HyperText:超文本(文本,图片,视频,音频,链接) Markup Lanu ...

  4. JavaScript 语句

    JavaScript 语句 JavaScript 语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. JavaScript 语句 JavaScript 语句是发给浏览器的命令. 这些命令的作用是 ...

  5. hdu 1053 (huffman coding, greedy algorithm, std::partition, std::priority_queue ) 分类: hdoj 2015-06-18 19:11 22人阅读 评论(0) 收藏

    huffman coding, greedy algorithm. std::priority_queue, std::partition, when i use the three commente ...

  6. OC 解决NSArray、NSDictionary直接打印中文出现乱码的问题

    在iOS开发中,经常需要查看数组中得元素是否是自己想要的,但是苹果并没有对直接打印数组中得中文作处理,直接打印就会出现一堆很讨厌的东西,解决其实很简单,就是需要通过为NSArray添加分类,重写 - ...

  7. [转]概率基础和R语言

    概率基础和R语言 R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒.直到大数据的爆发,R语 ...

  8. Android 学习第11课,android 实现拨打电话的功能

    1. 先布局界面,界面采用线性垂直方式来布局 在layout 界面文件中 activity_main.xml 中 <LinearLayout xmlns:android="http:/ ...

  9. 诺基亚XL中Intent.ACTION_VIEW无效的问题

    今天测试播放视频的时候,发现在诺基亚XL机型里不能弹出视频应用列表. 我的代码是: Intent intent = new Intent(Intent.ACTION_VIEW); intent.set ...

  10. 关于在win7内集成usb3.0驱动。

    mac air 装了win7但是折腾良久还是无法升级,只能是重新安装. 很蛋疼.bootcamp 老是找不到驱动.只能是手动分区后U盘引导安装. 驱动的下载,直接在Os x 下用bootcamp 下载 ...