1. c#鼠标悬停在图片上要图片自动放大
用onmouseover事件解决
2. html鼠标悬停左侧缩小图片放大到右边
html鼠标悬停左侧缩小图片放大到右边
首先这是一张图片在悬停时皮悄放大也就是改变大小(宽,高)实现的咐哗。
2,一张图片在放大的时候会根据燃简渣其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的,因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置,他的放大会是向一边的,因此我们必须考虑其放大后的位置。
3,放大的效果是要用动画实现的。
代码:html>
尝试
.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}
.pic{position:absolute;}
$(function(){
$w = $('.pic').width();
$h = $('.pic').height();
$w2 = $w + 20;
$h2 = $h + 20;
$('.pic').hover(function(){
$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
},function(){
$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
});
});
3. 跑马灯似的图片滚动代码,如何做鼠标onmouse的悬停放大代码怎么写非要js或者css么
首先是必须要有js跟CSS配合起来的,当然两者都不一定,例如js也可以实现动画效果,只是麻烦,要简单早谈点直接用JQ里面的animate()方法配合css控制动画,又或者直接一点使用CSS3实现动画,注意是css3,但就你的代码写的是走马灯这种早就没人用的写法,目测你是个初学者,所以我的回答你并不会采纳,因陆森碰为你看不懂,现在一般都用脚本写轮播图,没人用走马灯的了。
CSS3的悬停我可以写给你,JQ目测写出来对你也没多大用处,到时还得绑定什么的你一搞不出觉得我瞎说不采纳我那更悲剧
给img标签加上class或者给marquee加上class,否则怎么搞,我这里就以直接春桥给img加上class="animate"写给你了
.animate:hover{-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25);box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;-ms-transition:all .4s;transition:all .4s;}
里面的大小什么都是可以控制的,包括时间,这些就拜托您上W3C看看,我已经打了很多东西了,你要有良心就采纳,采纳后可以追问,否则别追问我问题了哈,我是web前端,语气有点叼,因为我被迫来问答里混,原谅我一个技术人员被叫来干这些鸟不拉屎的工作,所以带点脾气
4. 如何在firefox火狐浏览器中实现把鼠标停在图片上 图片自动放大
您好!很高兴为您答疑!
您可以使用油猴子greasemonkey脚本picViewer,这个脚本功能非常强大,可以在图上显示放大的按钮。
您可以在火狐社区了解更多内容。希望我的回答对昌宏您有所帮助,如有疑孝或问,欢迎继续在本平台巧迅伍咨询。
5. 鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片
代码有bug,修改后如下:
需要注意,拷贝下面这段代码,保存为 html后缀名的文件;需要自己在相液燃同的目录下,放置两张图片,小图片.jpg 大图片.jpg
效果如下图:当鼠标悬停在小图片上面的时候,会显示大图片;鼠标移出,隐藏大图片。
问题:定位需要读者自己去实现一下吧,偷懒了。感谢楼上分享!
<!doctypehtml>
<html>
<head>
<metacharset=utf-8>
</head>
<body>
你要显示特效的html
<imgsrc="小图片.jpg"width="200px"height="200px"id="littleimg"onmouseout="hoverHiddendiv()"onmouseenter="hoverShowDiv()"/>
<divstyle="width:200px;height:80px;border:1pxsolide#aaccff;display:none;"id="divHover">
大图片显示如下
<imgsrc="大图片.jpg"width="500px"height="300px"id="bigimg"/>
</div>
<scripttype="text/javascript">
letdivHover=document.getElementById("divHover");
functionhoverShowDiv(){
console.log("显示大图片");
divHover.style.display="block";
divHover.style.top=document.getElementById("littleimg").style.top+10;
divHover.style.left=document.getElementById("littleimg").style.left+10;
}
functionhoverHiddendiv(){
console.log("显示小图片");
闹配虚divHover.style.display="none";
卖核}
</script>
</body>
</html>
6. css代码完成鼠标悬停时,图片边框和大小的变化
变色:使css的动画animate可以实现。
放大:使用css的过渡缺坦效果translate就可键笑以了实现
如果你要同时实现,那就都用animate,样式代码写稿扮含在一起
7. PPT图片如何点击放大
PPT图片如何点击放大
在制作PPT的时候,通过一些简单的动画效果可以使内容更具有表现力,下面就介绍下PPT图片如何点击放大,希望对你有所链租帮助。
【方法1】超链接
其实这种方法与“把图片分别插到多张幻灯片上”没有实质性地差别,只不过是你在演讲的时候别人看不出来罢了,但是一旦你把PPT分享给别人了,你就原形毕露了!好了,不说废话了,来看教程。
下面是你的PPT页面,你要实现点击每一张图片都能实现放大的效果。
操作步骤:
1.插入一张空白幻灯片,然后插入你想要点击放大的图片,调整图片大小使其占满整个页面。
2.回到原来的页面,选中相应的小图片,单击鼠标右键,选择“超链接”——“本文档中的位置”,然后找到刚才已调整图片大小的幻灯片。
3.这个时候点击幻灯片中的小图,就可以实现放大的效果,但是这并没有完成。我们还需要再回到原来的画面上,所以我们要给“大图”也设置超链接,实现点击它回到原来页面的效果。具体方法同步骤2相同,我就不罗嗦了。
同理可以设置其它两张图片的效果!
【方法2】插入演示文稿
这里要将的方法就有点高级了,也是我最喜欢的一种方法。
再来看这张页面,我们需要实现点击每一张图片都能放大的'效果。
来看步骤吧!
1.先新建一张空白的幻灯片
2.依次选择“插入”——“对象”——“Microsoft powerpoint演示文稿”,这个时候我们看到原来的页面上又插入了一张新的空白幻灯片。
3.在步骤2的基础上,选择“插入”——“图片”,我们可以看到这张新空白幻灯片中就插入了一张图片。
4.调整图片的位置,使图片置于幻灯片的中央。(PS:借助“网格和参考线”)
5.放映幻灯片,查看效果
这租唤中种方法实际上是在幻灯片中插入了另一个演示文稿,这样既可以很方便地实现了图片放大的效果,又避免了使用多张幻灯片,并且这些彰显了你的PPT功底!
【方法3】触发器
纳尼?触发器是什么东东?完全没听过呀!不要紧张,触发器就像一个电源开关,打开它你的屋子里就充满了光亮,关上它就是一片漆黑,仅此而已!
来看教程
1.新建一张空白幻灯片,插入图片。在图片下面插入两个矩形框,调整矩形框的填充颜色,并分别输入“放大”和“缩小”。
2.选择要放大的图片。依次选择“动画”——“添加动画”——“强调”——“放大/缩小”。在动画“效果选项”中选择“较大”。然后选择“触发”,在“单击”菜单下选择“矩形1”
3.调整出来“动画窗格”,再次选择该图片,然后依次选择“添加动画”——“强调”——“放大/缩小”。在动画“效果选项”中选择“较小”。然后选择“触发”,在“单击”菜单下选择“矩形2”
4.放映幻灯片,依次单击“放大”、“缩小”查看效果。
拓展知识:ppt动画效果:鼠标悬停移开图片自动放大缩小
具体操作方法如下:
(1)打开PPT,在第一页中插入一张图片。然后按【Ctrl+Shift+D】组合键,复制一张幻灯片。
(2)选择第二张幻灯片中的图片,按住【Ctrl+Shift+Alt】键的同时,鼠标拖动图片,将图片等比例放大。
(3)选择第二张幻灯片,然后点击【切换】-【切换到此幻灯片】-【平滑】动画效果,为其添加平滑效果。
(4)选择第一张幻灯片,在【切换】-【计时】组中取消勾选“单击鼠标时”复选框。
(5)再次选择第一张幻灯片中的图片,点击【插入】-【链接】-【动作】按钮。
(6)打开“操作设置”对话框,选择“鼠标悬停”选项卡,选中“超链接到”单选按钮,在其下拉列表中选择“幻灯片...”选项。
(7)弹出“超链接到幻灯片”对话框,在“幻灯片标题”列表框中选择“幻灯片2”,然后单击“确定”按钮。
(8)选择第一张幻灯片,然后点击【切换】-【切换到此幻灯片】-【平滑】动画效果,为其添加平滑效果。
(9)选择第二张幻灯片,点击【插入】-【形状】按钮,选择“矩形”选弊山项,绘制一个与页面相同大小的无边框白色矩形,然后右键,选择“置于底层”命令,将矩形放于图片下方。
(10)保持矩形的选中状态,点击【插入】-【链接】-【动作】按钮。
(11)打开“操作设置”对话框,选择“鼠标悬停”选项卡,选中“超链接到”单选按钮,在其下拉列表中选择“幻灯片...”选项。
(12)弹出“超链接到幻灯片”对话框,在“幻灯片标题”列表框中选择“幻灯片1”,然后单击“确定”按钮。
;8. 如何在网页上实现鼠标悬停使图片放大功能,好像java的class可以,不知道怎么实现的呢
这有一个例子,你可以参考一下:
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");
});
};