jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果

1.html默认的title提示效果很差，速度很慢，jquery可以做出更好的效果：

<script src="./jquery/jquery-1.8.2.min.js"></script>
<style>
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px;
    color:#333;
    display:none;
}
</style>
<script>
$(function(){
    var x = 10;
    var y = 20;
    var mytitle;
    $("a.tooltip").mouseover(function(e){
        mytitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'>"+ mytitle +"</div>";  //创建 div DOM元素
        $("body").append(tooltip);    //把它追加到文档中
       
        $("#tooltip").css({
            "top": (e.pageY+y) + "px",
            "left": (e.pageX+x) + "px"   //设置x坐标和y坐标，并且显示
        }).show(200);   
    }).mouseout(function(){
        this.title = mytitle;
        $("#tooltip").remove();  //移除
    }).mousemove(function(e){
        $("#tooltip").css({
            "top": (e.pageY+y) + "px",
            "left": (e.pageX+x) + "px"
        });
    });
})
</script>
<div class="scrollNews" >
    <ul>
        <li><a href="http://www.phpddt.com" class="tooltip" title="www.phpdt.com">
             php教程</a>
       </li>
        <li><a href="#" class="tooltip" title="www.phpddt.com">
             jquery教程</a>
       </li>
        <li><a href="#" class="tooltip" title="www.phpddt.com">
             j2ee教程</a>
        </li>
    </ul>
</div>

效果图如下：


2.jquery实现图片放大提示效果，这只是个粗略的效果，大家可以来改进：

<script src="./jquery/jquery-1.8.2.min.js"></script>
<style>
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px;
    color:#333;
    display:none;
}
</style>
<script>
$(function(){
    var x = 10;
    var y = 20;
    var mytitle;
	$("a.tooltip img").mouseover(function(e){
        mytitle = this.title;
        this.title = "";
		var imgTitle = mytitle ? "<br/>"+mytitle : "";
		//alert(this.href);
        var tooltip = "<div id='tooltip'><img src='"+ this.src +"' alt='图片展示' />"+imgTitle+"</div>";  //创建 div DOM元素
        $("body").append(tooltip);    //把它追加到文档中
       
        $("#tooltip").css({
            "top": (e.pageY+y) + "px",
            "left": (e.pageX+x) + "px"   //设置x坐标和y坐标，并且显示
        }).show(200);   
    }).mouseout(function(){
        this.title = mytitle;
        $("#tooltip").remove();  //移除
    }).mousemove(function(e){
        $("#tooltip").css({
            "top": (e.pageY+y) + "px",
            "left": (e.pageX+x) + "px"
        });
    });
})
</script>
<div class="scrollNews" >
    <ul>
        <li><a href="http://www.phpddt.com" class="tooltip" title="www.phpdt.com">
             <img src="http://www.phpddt.com/usr/uploads/2012/12/2851791595.jpg" width=150 height=120 title="php点点通www.phpddt.com的jquery演示"/></a>
       </li>
    </ul>
</div>

效果图如下：


3.jquery实现内容显示隐藏效果：

<script src="./jquery/jquery-1.8.2.min.js"></script>
<style>
*{margin:0;padding:0;}
.content{width:150px;border:1px solid gray;}
.title{width:150px;padding:2px;background:gray;}
.body{width:150px;}
</style>
<script>
$(function(){
	/*
	$(".content .title").click(function(){
		if($(this).next().is(":visible")){
			$(this).next().hide("fast");
		}else{
			$(this).next().show(1000);
		}
	});*/
	$(".content .title").hover(function(){
			$(this).next().show("1000");
		},function(){
			$(this).next().hide("fast");
		});
});



</script>
<div class="content">
	<span class="title">php点点通演示教程</span>
	<div class="body">本站提供大量的PHP教程、java教程，包括web前端知识，数据库教程，二次开发教程以及web开发资料下载！</div>
</div>

效果图片如下：