在网页上的图片 比较小。当我们用鼠标悬浮上去的时候 想要显示出 大图的预览效果。我找了一个使用 jquery 制作的效果。
jquery 代码如下
$(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 imgUrl = $(this).children().attr("src");
var tooltip = "<div id='tooltip'><img src='"+ imgUrl +"' 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"
});
});
})
对应的html 代码如下:
<a href="#" class="tooltip"><img src="/uploads/allimg/090929/8-0Z9291R5000-L.gif" width="172" height="162"/></a>
<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
当A 标记 class 属性为 tooltip 里面的 img 标记将会被 jquery 注册。鼠标悬浮上去后就会显示出跟随预览效果。
分享到:
相关推荐
jquery实现PDF在线预览 jquery实现在线预览PDF文档
JQuery 鼠标悬浮,图片遮罩效果 JQuery 鼠标悬浮,图片遮罩效果
使用 jQuery插件实现简单的图片预览功能
jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片 jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片
jquery实现鼠标悬停图片预览功能的效果下载
仿淘宝的一种鼠标悬浮商品之后图片被放大。采用jquery实现,非常简单,思路清晰。
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
基于Jquery实现的图片预览插件,支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览,下载后即可快速使用。
jquery制作鼠标悬浮图片显示遮罩标题效果
jQuery仿京东鼠标悬浮购物车效果
jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框
jquery鼠标悬浮动画菜单 jquery鼠标悬浮动画菜单 jquery鼠标悬浮动画菜单
jquery做的立即图片预览功能
代码简介:jQuery鼠标悬浮图片放大特效是一款鼠标移到图片上突出放大显示。
jquery鼠标经过图片显示悬浮按钮图片特效
jQuery实现的图片放大并预览效果,可以进行一组图片的预览和单张图片的预览
jquery 实现图片预览 jquery 插件
当鼠标悬浮时显示二级菜单,这种类似的效果,想必大家在浏览网页时经常会遇到吧,下面有个示例,大家可以看看
Jquery实现的图片预览插件完整实例 Jquery-1.3.2 + imgpreview.0.22.js
最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。jQuery+Ashx异步上传,有源代码。 每次可选择多张图片,可多次选择,可预览,上传前可删除已选择的任意图片。 任何时候仅...