因此,我们可以借助jquery来实现一些很酷炫的效果,相比于javascript来说,同样的效果,但是很简单的代码。jquery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jquery。
这篇博文是实现怎么通过jquery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图。接下来我就粘贴主要代码了哈:首先是$(function(){})中的代码
复制代码 代码如下:
var x = 5;
var y = 15;
$(table tr td img).mousemove(function(e) {
$(#imagetip).attr(src, this.src)//设置提示图片的路径
.css({
top : (e.pagey + y) + px,
left : (e.pagex + x) + px
}).show(3000);//显示图片
});
$(table tr td img).mouseout(function(){
$(#imagetip).hide();//隐藏图片
});
接下来页面布局代码:
复制代码 代码如下:
选项
海报
名称
杨幂
林萧
宫洺
type=checkbox id=checkall>全选 id=btndel type=button value=删除>
这里大家只要注意左后一行代码的写法。上面只是表格的布局。
接下来是css:
复制代码 代码如下:
body {
font-size: 12px;
}
table tr td img {
border: soild 1px #666;
width: 240px;
height: 240px;
padding: 3px;
cursor: hand;
}
.clsimg {
position: absolute;
border: 1px #ccc solid;
width: 400px;
height: 400px;
display: none;
}
