<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
<!-- 引入jQuery -->
<script src="demo/static/js/jquery.min.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;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
</style>
<style type="text/css" media="screen">
.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top: 0;
180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
left:180px;
-moz-transition:2s;
-o-transition:2s;
-webkit-transition:2s;
transition:2s;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function() {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + 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>
<li>
<a href="img/1.jpg" class="tooltip" title="苹果 iPod"><img src="img/1.jpg" alt="苹果 iPod" /></a>
</li>
<li>
<a href="img/2.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/2.jpg" alt="苹果 iPod nano" /></a>
</li>
<li>
<a href="img/3.jpg" class="tooltip" title="苹果 iPhone"><img src="img/3.jpg" alt="苹果 iPhone" /></a>
</li>
</ul>
<p class="overimg">
<a><img src="img/2.jpg"></a>
<i class="light"></i>
</p>
</body>
</html>
以后装13用，呵呵