简单的鼠标滑动上去图片放大Jquery特效代码





文字提示
 
 

body{
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #AAAAAA;
}
li a img{width:100px; height:75px;}
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}




 //鼠标滑动上去显示放大图片效果修改版
$(function(){
	var x = 10;
	var y = 20;
	$(".tooltip img").mouseover(function(e){
		this.myTitle = this.alt;
		this.title = "";	
		var imgTitle = this.myTitle? "
" + this.myTitle : ""; var tooltip = ""+imgTitle+"<\/div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中   $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left":  (e.pageX+x)  + "px" }).show("fast");   //设置x坐标和y坐标,并且显示     }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove();  //移除      }).mousemove(function(e){ $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left":  (e.pageX+x)  + "px" }); }); })

有效果:

  • 10年积累的网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有隆德免费网站建设让你可以放心的选择与我们合作。

    注意:

    该博客有些代码会转掉,如这篇博客50行处代码:

    简单的鼠标滑动上去图片放大Jquery特效代码

    var tooltip = ""+imgTitle+"<\/div>"; //创建 div 元素

    源代码是

    简单的鼠标滑动上去图片放大Jquery特效代码

    浏览器效果:

    简单的鼠标滑动上去图片放大Jquery特效代码


    当前文章:简单的鼠标滑动上去图片放大Jquery特效代码
    本文地址:http://myzitong.com/article/pigegd.html