JQuery symmetric arrow and jquery arrow

JQuery symmetric arrow and jquery arrow

For details, refer to my article: jQuery pop-up layer + CSS arrow creation.

The usage is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Specific implementation code:


/*** Jquery arrow generation * @ author: xuzengqiang * @ since: 15:31:39 **/; (function ($) {jQuery. fn. extend ({/*** Description: generate the specified arrow style **/arrow: function (options) {var defaultOptions = {color: '# afaf', height: 20, width: 20, // direction: ['up', 'bottom ', 'left', 'right'] direction: 'top '}; var settings = jQuery. extend (defaultOptions, options | {}), current = $ (this); function loadStyle(){current.css ({"display": "block", "width": "0 ", "height": "0"}); if (settings. direction = "top" | settings. direction = "bottom") returns current.css ({"border-left-width": settings. width/2, "border-right-width": settings. width/2, "border-left-style": "solid", "border-right-style": "solid", "border-left-color": "transparent ", "border-right-color": "transparent"}); if (settings. direction = "top") Export current.css ({"border-bottom-width": settings. height, "border-bottom-style": "solid", "border-bottom-color": settings. color}) ;}else response current.css ({"border-top-width": settings. height, "border-top-style": "solid", "border-top-color": settings. color}) ;}} else if (settings. direction = "left" | settings. direction = "right") returns current.css ({"border-top-width": settings. height/2, "border-bottom-width": settings. height/2, "border-top-style": "solid", "border-bottom-style": "solid", "border-top-color": "transparent ", "border-bottom-color": "transparent"}); if (settings. direction = "left") returns current.css ({"border-right-width": settings. width, "border-right-style": "solid", "border-right-color": settings. color}) ;}else response current.css ({"border-left-width": settings. width, "border-left-style": "solid", "border-left-color": settings. color}) ;}} return this. each (function () {loadStyle () ;}}) ;}) (jQuery );