| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3219 人关注过本帖
标题:如何实现表单中的图片,当鼠标经过出现放大的效果!
只看楼主 加入收藏
hgswwh
Rank: 1
等 级:新手上路
帖 子:16
专家分:0
注 册:2016-10-20
结帖率:50%
收藏
已结贴  问题点数:20 回复次数:13 
如何实现表单中的图片,当鼠标经过出现放大的效果!
如何实现表单中的图片,当鼠标经过出现放大的效果,就象淘宝网中的图片效果!

哪位大侠能写段代码,先谢了!!!
搜索更多相关主题的帖子: 淘宝网 图片 如何 
2016-10-22 22:42
星光悠蓝
Rank: 9Rank: 9Rank: 9
来 自:山水甲天下
等 级:贵宾
威 望:52
帖 子:508
专家分:1248
注 册:2010-1-11
收藏
得分:0 
神级效果!
2016-10-22 22:47
sdta
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:江苏省连云港市
等 级:版主
威 望:335
帖 子:9798
专家分:26886
注 册:2012-2-5
收藏
得分:0 
VFP9中可以实现
图片附件: 游客没有浏览图片的权限,请 登录注册

表单1中的事件
[
图片附件: 游客没有浏览图片的权限,请 登录注册

图片附件: 游客没有浏览图片的权限,请 登录注册


[此贴子已经被作者于2016-10-23 00:09编辑过]


坚守VFP最后的阵地
2016-10-22 23:53
tlliqi
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:204
帖 子:15453
专家分:65956
注 册:2006-4-27
收藏
得分:0 
3楼厉害
2016-10-23 00:25
星光悠蓝
Rank: 9Rank: 9Rank: 9
来 自:山水甲天下
等 级:贵宾
威 望:52
帖 子:508
专家分:1248
注 册:2010-1-11
收藏
得分:0 
思路可以,还没达到淘宝网的效果,继续玩!
2016-10-23 08:11
accent
Rank: 2
等 级:论坛游民
帖 子:11
专家分:19
注 册:2016-10-23
收藏
得分:0 
  $(function(){
    var ffsetX=20-$("#imgtest").offset().left;
    var ffsetY=20-$("#imgtest").offset().top;
    var size=1.2*$('#imgtest ul li img').width();
    $("#imgtest ul li").mouseover(function(event) {
    var $target=$(event.target);
    if($target.is('img'))
    {
    $("点击查看大图").css({
    "height":size,
    "width":size,
    "top":event.pageX+offsetX,
    "left":event.pageY+offsetY,
    }).appendTo($("#imgtest"));
    }
    }).mouseout(function() {
    $("#tip").remove();
    }).mousemove(function(event) {
    $("#tip").css(
    {
    "left":event.pageX+offsetX,
    "top":event.pageY+offsetY
    });
    });
    })
   
   
    img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;}
    #imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; }
    #imgtest ul{ position:relative;width:840px; height:auto; background:#00F;}
    #imgtest ul li{ position:relative; height:276px; width:410px; list-style.:none; float:left; margin:3px; border:1px solid #999;}
   
2016-10-23 09:20
星光悠蓝
Rank: 9Rank: 9Rank: 9
来 自:山水甲天下
等 级:贵宾
威 望:52
帖 子:508
专家分:1248
注 册:2010-1-11
收藏
得分:20 
尝试一下!
图片附件: 游客没有浏览图片的权限,请 登录注册


tu.rar (2.49 KB)
2016-10-23 09:58
sdta
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:江苏省连云港市
等 级:版主
威 望:335
帖 子:9798
专家分:26886
注 册:2012-2-5
收藏
得分:0 
回复 7楼 星光悠蓝
能放大100倍?

坚守VFP最后的阵地
2016-10-23 10:04
星光悠蓝
Rank: 9Rank: 9Rank: 9
来 自:山水甲天下
等 级:贵宾
威 望:52
帖 子:508
专家分:1248
注 册:2010-1-11
收藏
得分:0 
设定了10倍,您试试看。
2016-10-23 10:06
hgswwh
Rank: 1
等 级:新手上路
帖 子:16
专家分:0
注 册:2016-10-20
收藏
得分:0 
大侠就是大侠,真厉害,谢了!
2016-10-23 10:56
快速回复:如何实现表单中的图片,当鼠标经过出现放大的效果!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.016413 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved