<!--HTML代码-->
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.0.0.min.js"></script><script src="js/demo.js"></script></head>
<body>
<div class="img">
<ul>
<li><a href="img/a_big.png" class="big" title="Mac Book"><img src="img/a.png" alt="Mac Book" /></a></li>
<li><a href="img/b_big.png" class="big" title="Apple Nano"><img src="img/b.png" alt="Apple Nano" /></a></li>
<li><a href="img/c_big.png" class="big" title="Apple ipad"><img src="img/c.png" alt="Apple ipad" /></a></li>
<li><a href="img/d_big.png" class="big" title="Apple ipod"><img src="img/d.png" alt="Apple ipod" /></a></li>
<li><a href="img/e_big.png" class="big" title="苹果电脑"><img src="img/e.png" alt="苹果电脑" /></a></li>
</ul>
</div>
</body>
</html>
<!--CSS部分代码-->
.img{ margin: 0 auto; width: 750px; position: absolute; top: 300px; left: 0; right: 0;
}
.img li{ border: 1px solid #ccc; width: 125px; height: 94px; margin-left: 15px; display: inline-block;
}
#big{ position:absolute; border:1px solid #ccc; background:#4c4b4b; padding:2px; display:none; color:#ccc; text-align: center;
}
<!--JS代码-->
放大效果(第三章)
var x=10;
var y=20;
$("a.big").mouseover(function(e){
this.myTilte=this.title; //将原本的title赋值给 myTitle
this.title="";//清空原本的title
var imgTitle=this.myTilte?"<br/>
"+this.myTilte:""; //三元运算
//是先判断this.myTItle是否存在，存在的话就把this.myTilte赋值给imgTitlt,不存在的话就为空。
//也可以用 var imgTitle;if(this.myTitle){imgTitle="<br/>
"+this.myTitle;}else{imgTitle="";}
var big="
<div id='big'><img src='"+this.href+"' alt='产品预览'/>"+imgTitle+"</div>
";
//创建 div 元素
$("body").append(big);
$("#big")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTilte;
$("#big").remove(); //移除
}).mousemove(function(e){
$("#big")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。