css样式:
.img1 { width:100px; height:100px;}
img{border:none;}
#p1{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
javascript代码:
xOffset = 10;
yOffset = 30;
//当鼠标移动到a元素之上时触发事件
$("a.a1").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "")?"<br />" + this.t:"";
$("body").append("<p id = 'p1'><img src='"+this.href+"' alt='image' />"+c+"</p>");
$("#p1")
.css("top",(e.pageY - xOffset)+"px")
.css("left",(e.pageX - yOffset)+"px")
.fadeIn("fast");
},function(){
//鼠标离开元素时触发事件
this.title = this.t;
$("#p1").remove();
});
//鼠标移动时的事件
$("a.a1").mousemove(function(e){
$("#p1")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
html代码:
<a href="images/Hydrangeas.jpg" class="a1" title="八仙花">
<img src="images/Hydrangeas.jpg" class="img1" title="八仙花"></a>
<a href="images/Penguins.jpg" class="a1" title="企鹅">
<img src="images/Penguins.jpg" class="img1" title="企鹅"></a>
分享到:
相关推荐
使用 jQuery插件实现简单的图片预览功能
jquery 实现图片预览 jquery 插件
jquery做的立即图片预览功能
一个非常好用的图片预览DEMO,有缩略图,支持左右键点击事件,AJAX,修改源码可进行分页查询
基于Jquery实现的图片预览插件,支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览,下载后即可快速使用。
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
Jquery实现的图片预览插件完整实例 Jquery-1.3.2 + imgpreview.0.22.js
超炫jQuery实现的图片预览效果, 超炫jQuery实现的图片预览效果
jquery实现鼠标悬停图片预览功能的效果下载
jquery实现选择图片预览功能,能兼容各大主流浏览器.如谷歌 IE 360 火狐等
NULL 博文链接:https://deng19891006.iteye.com/blog/933486
jq 实现图片预览,简单粗暴。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
jQuery实现的图片放大并预览效果,可以进行一组图片的预览和单张图片的预览
jQuery实现图片上传预览 支持ie69.zip
jsp调用imgpreview.full.0.22.jquery.js,即可实现的图片预览,使用简单方便!
一般我们在上传图片后会在网页中出现预览而不保存到数据库,该部分代码就是实现上传的图片在网页中的显示,让用户确定后在上传。
p+jquery(jcrop)实现的图片上传前先进行剪切预览,导入即用。
jQuery图文排版图片预览特效是一款基于jQuery CSS3实现的鼠标点击图片弹出画廊切换特效。
java实现jQuery带删除功能多图片上传预览插件 另带一个使用junit编写的测试类 使用eclipse创建maven项目