تولتیپ جی کوئری با افکت های جذاب
آموزش استفاده
- کدهای جی کوئری
<script type="text/javascript" src="all.js"></script> <script type="text/javascript"> $('.hover:eq(0) span').tooltipsy(); $('.hover:eq(1) span').tooltipsy({ css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(2) span').tooltipsy({ offset: [0, 10], css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $(window).trigger('scroll'); $('.hover:eq(3) span').tooltipsy({ offset: [10, 0], css: { 'padding': '10px', 'max-width': '100px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(4) span').tooltipsy({ offset: [-10, 0], css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(5) span').tooltipsy({ offset: [-10, 0], show: function (e, $el) { $el.css({ 'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px', 'opacity': '0.0', 'display': 'block' }).animate({ 'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px', 'opacity': '1.0' }, 300); }, hide: function (e, $el) { $el.slideUp(100); }, css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(6) span').tooltipsy({ offset: [0, -1], show: function (e, $el) { var cur_top = parseInt($el[0].style.top.replace(/[a-z]/g, '')) + 'px'; $el.css({ 'top': (window.pageYOffset - $el.outerHeight()) + 'px', 'display': 'block' }).animate({ 'top': cur_top, 'opacity': '1.0' }, 500, 'easeOutBounce').css('top', cur_top); }, hide: function (e, $el) { $el.animate({ 'top': '+=200px', 'opacity': '0.0' }, 200); }, css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(7) span').tooltipsy({ alignTo: 'cursor', offset: [10, 10], css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); $('.hover:eq(8) span').tooltipsy({ content: function ($el, $tip) { $.get('api.php', function (data) { $tip.html(data); }); return 'متن آزمایشی'; }, css: { 'padding': '10px', 'max-width': '200px', 'color': '#303030', 'background-color': '#f5f5b5', 'border': '1px solid #deca7e', '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'box-shadow': '0 0 10px rgba(0, 0, 0, .5)', 'text-shadow': 'none' } }); </script>
بسیار عالی.
سپاسگزارم
مرسی patriot عزیز
عالیه سایتتون
استفاده کردم از مطالبتون
ممنون
مرسی