HTML,当我鼠标移动到小图片上面的时候，鼠标后面就显示大图片？

JavaScript011

HTML,当我鼠标移动到小图片上面的时候，鼠标后面就显示大图片？,第1张

下载一下jquery插件，然后新建一个ToolTip.js文件，在该文件下写入以下代码：

$(function() {

var x = 10

var y = 10

$("a.tooltip").mouseover(function(e) {

this.myTitle = this.title

this.title = ""

var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图' width='250px' height='250px'/><\/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"

})

})

})

//]]>

在页面导入两个.js文件，

<script src="../javascripts/jquery-1.3.1.js" type="text/javascript"></script>

<script src="../javascripts/ToolTip.js" type="text/javascript"></script>

最后把图片绑定到a标记就可以了：

<a href="<%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %>" class="tooltip">//大图片提示

<asp:ImageButton ID="image1" runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"imageSmallUrl") %>' Width="50px" Height="50px" /></a>

页面上调用的方法：

var _BarIdName = "___tooltipbar"

function initToolTip()

{

initStyle()//CSS样式

initTipbar()//创建tooltip显示区域

?

var tagaArry = new Array()

var tag = null

tagaArry = document.getElementsByTagName("a")

for(var i=0i<tagaArry.lengthi++)