如何在网页上实现鼠标悬停使图片放大功能,好像java的class可以,不知道怎么实现的呢?
在新蛋京东中关村太平洋电脑网等网站上,查看产品时,可以鼠标移动到图片上就看到了放大的图片,好像是java的class来实现的,但是打开网页源代码,没有看懂,不知道大侠可以...
在 新蛋 京东 中关村 太平洋电脑网等网站上,查看产品时,可以鼠标移动到图片上就看到了放大的图片,
好像是java的class 来实现的 ,但是打开网页源代码,没有看懂,不知道大侠可以详细解释下不,最好能给我一个网站上直接能用的,我加到我的网站上 展开
好像是java的class 来实现的 ,但是打开网页源代码,没有看懂,不知道大侠可以详细解释下不,最好能给我一个网站上直接能用的,我加到我的网站上 展开
7个回答
展开全部
这有一个例子,你可以参考一下:
html显示原始图片
<a href="../images/4.jpg" class="preview" title="疯狂滑雪"><img src="../images/4s.jpg" /></a>
<a href="../images/photo_1.jpg" class="preview" title="奥运吉祥物"><img width="100" height="75" src="../images/photo_1_small.gif"/></a>
以下是jQuery实现图片预览的主要过程。
hover()事件
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
程序中首先找到预览图片,光标移动到某个图片上时,将此图片的预览图片添加到body中,将id命名为preview。preview开始是不可见的,.css()为图片指定了位置,.fadeIn()最终显示预览图片。当光标离开图片时,将添加的预览图片使用remove()方法移除。
使用mousemove()方法移动鼠标时移动预览
最后,当鼠标在图片上移动时,应该使用mousemove()方法将图片预览也进行移动。
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
jQuery实现图片预览的完整代码
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
html显示原始图片
<a href="../images/4.jpg" class="preview" title="疯狂滑雪"><img src="../images/4s.jpg" /></a>
<a href="../images/photo_1.jpg" class="preview" title="奥运吉祥物"><img width="100" height="75" src="../images/photo_1_small.gif"/></a>
以下是jQuery实现图片预览的主要过程。
hover()事件
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
程序中首先找到预览图片,光标移动到某个图片上时,将此图片的预览图片添加到body中,将id命名为preview。preview开始是不可见的,.css()为图片指定了位置,.fadeIn()最终显示预览图片。当光标离开图片时,将添加的预览图片使用remove()方法移除。
使用mousemove()方法移动鼠标时移动预览
最后,当鼠标在图片上移动时,应该使用mousemove()方法将图片预览也进行移动。
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
jQuery实现图片预览的完整代码
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
展开全部
是js实现的。。,在网上收收js的特效。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
源代码是JSP的还是JAVA的,如果是JSP的,应该是用的onmouseover事件触发,触发调用图片处理方法,显示图片,现在页面动态设计应该都不是用的JAVA
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
jqzoom网上搜搜 基于jquery的插件 很简单。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
jquery学习网,这个网址点进去,里面有很多jquery特效
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
jquery插件做的。网上搜一下jquery图片放大效果 就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |