Jony's Blog

使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。

比如：<a href=”javascript:void(0)” tips=”这个是提示内容！” />测试提示</a>

想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。

比如：<a href=”javascript:void(0)” tips=”<h3>提示标题</h3><div class=’content’>这个是提示内容！</div>” />测试提示</a>

<script type=”text/javascript”>
    $().ready(function(){
        $(‘body’).append(‘<div id=”tip”></div>’);
        $(‘#tip’).css({display:’none’,left:’0′,top:’0′,position:’absolute’});
        $(‘a[tips]’).hover(
            function(e){
                var mouse = $.mousePos(e);
                
                if(mouse.x > $(‘body’).width() – $(‘#tip’).width()){
                    $(‘#tip’).css(‘left’, $(‘body’).width() + $(document).scrollLeft() – $(‘#tip’).width() – 10 + ‘px’);
                }else{
                    $(‘#tip’).css(‘left’, mouse.x + 10 + ‘px’);
                }
            
                $(‘#tip’).css(‘top’, mouse.y + 10 + ‘px’);
                $(‘#tip’).html($(this).attr(‘tips’));
                $(‘#tip’).show();
            },
            
            function(){
                $(‘#tip’).hide();
            }
        );
    });

    $.extend({
        mousePos:function(e){
            var x,y;
            var e = e||window.event;
            return{
                x:e.clientX + $(‘body’).scrollLeft() + $(document).scrollLeft(),
                y:e.clientY + $(‘body’).scrollTop() + $(document).scrollTop()
            };
        }
    });
</script>

在做一个刷淘宝信用的网站时，需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用，便自己动手写一个。因为程序是用 PHPCMS，其自带了 JQuery，自然也用 JQuery 来实现了。暂时写了个简单的，以后有时间再完善吧。

html 部分：

<div id=”marqee”>
    <div id=”leftButton”></div>
    <div id=”marqeeArea”>
        <ul>
            <li><img src=”1.gif” /></li>
            <li><img src=”2.gif” /></li>
            <li><img src=”3.gif” /></li>
        </ul>
    </div>
    <div id=”rightButton”></div>
</div>

CSS 部分：

#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}

阅读全文…