继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

英明神武的牛
关注TA
已关注
手记 317
粉丝 30
获赞 175

         

<!DOCTYPE html><html lang="en"><head><meta  charset=utf-8" /><title>文字提示</title> <!--   引入jQuery --> <script src="scripts/jquery1.7.js" type="text/javascript"></script><style type="text/css">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;}</style><script type="text/javascript"> //鼠标滑动上去显示放大图片效果修改版$(function(){	var x = 10;	var y = 20;	$(".tooltip img").mouseover(function(e){		this.myTitle = this.alt;		this.title = "";			var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";		var tooltip = "<div id='tooltip'><img src='"+ this.src+"' alt='"+imgTitle+"'/>"+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"			});	});})</script></head><body><h3>有效果:</h3>	<ul class="tooltip">		<li><a href="#"  title="苹果 iPod"><img src="images/apple_1_bigger.jpg" alt="苹果 iPod" /></a></li>		<li><a href="#"  title="苹果 iPod nano"><img src="images/apple_2_bigger.jpg" alt="苹果 iPod nano" /></a></li>		<li><a href="#" title="苹果 iPhone"><img src="images/apple_3_bigger.jpg" alt="苹果 iPhone" /></a></li>		<li><a href="#" class="tooltip" title="苹果 Mac"><img src="images/apple_4_bigger.jpg" alt="苹果 Mac"  /></a></li>	</ul></body></html>


注意:

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

wKioL1dbkqKSCBo6AAAWdDXng9M502.jpg-wh_50

var tooltip = "<div id='tooltip'><img src='"+ this.src+"' alt='"+imgTitle+"'/>"+imgTitle+"<\/div>"; //创建 div 元素

源代码是


wKiom1dbkZWwTJo0AAAZyNB0GFk687.jpg-wh_50


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP