jQuery实现了用鼠标预览大图片的效果

JQuery:是客户端技术，它诞生的原因是：少写多做(少写代码，多做事)。因此，我们可以使用jquery来实现一些很酷的效果，这些效果和javaScript一样，只是代码简单。jQuery中的核心知识点是选择器的使用。我将在未来的博客中总结选择器的内容。希望大家都能看懂，学会如何选择自己的设备，相当于完全掌握了jQuery。这篇博文讲的是如何通过购物网站常见的jQuery实现：鼠标经过图片数量时，图片会放大预览大图。接下来，我粘贴主代码：首先，复制$(function(){})中的代码。代码如下： var x=5；var y=15$ ('table tr tdimg ')。mousemove(函数(e) {$ ('# imagetip '))。attr ('src '，this . src)//设置提示图片的路径。CSS ({'top' : (e. pagey)' px '，' left '。//显示图片})；$(“表tr td img”)。mouse out(function(){ $(' # imageTip '))。hide()；//隐藏图片})；页面布局代码下一步：复制代码如下：表格边框='1px' tr第th选项/第th海报/第th名称/第th/tr tr tr id=' 0 ' TD input type=' checkbox ' id=' checkbox 1 ' value=' 0 '/Tdimg src=' http : images/xiao01 . jpg ' alt=' '/TD杨米/TD/tr tr tr id=' 1 ' TD input type=' checkbox ' id=' checkbox 2 ' value=' 1 '/Tdheight : 20px ' span input type=' checkbox ' id=' checkall ' select all/span span input id=' btndel ' type=' button ' value=' delete '/span/TD/tr/Table img alt=' src=' http : images/Xiao 01 . jpg ' class=' cls MIG ' id=' image tip '在这里，大家只需要注意左、后一行代码的书写即可。只是上面表格的布局。以下是css:复制代码： body { font-size : 12px；}表tr TD img { border : sodid 1px # 666；宽度： 240 px；高度： 240 px；padding: 3pxcursor:手；} .clsImg { position:绝对值；border: 1px #ccc固体；宽度： 400 px；高度： 400 px；display:无；}