HTML 图片鼠标悬停动态效果
生活随笔
收集整理的這篇文章主要介紹了
HTML 图片鼠标悬停动态效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
法一：
在head中添加：
<script> window.onload?=?function(){ ?var?img?=?document.getElementById("imgTest"); ?if?(document.addEventListener){ ??img.addEventListener("mouseover",doMouseover,false); ??img.addEventListener("mouseout",doMouseout,false); ?} ?else?if(document.attachEvent){ ??img.attachEvent("mouseover",doMouseover); ??img.attachEvent("mouseout",doMouseout); ?} ?else{ ??img.onmouseover?=?doMouseover; ??img.onmouseout?=?doMouseout; ?} } function?doMouseover(){ ?this.width?=?this.width?*?1.5; ?this.height?=?this.height?*?1.5; } function?doMouseout(){ ?this.width?=?this.width?/?1.5; ?this.height?=?this.height?/?1.5; } </script> 注意doMouseout函數中不可寫作絕對大小： this.width?=?50px; this.height?=?50px;
圖片標簽：
<img?id?=?"imgTest"?src?="imgs/icon.jpg"/>
法二： <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title></title>
<script?type="text/javascript"?src="js/jquery-1.11.1.min.js"></script>
<style?type="text/css"> body?{?background:?#000;?} .img?{?float:?left;?width:?200px;?height:?200px;?overflow:?hidden;?margin:?0?1px?1px?0;?} .img?.inner?{?position:?relative;?} .img?.inner?div?{?position:?absolute;?top:?0;?left:?0;?width:?200px;?height:?200px;?} .img?.inner?img?{?width:?100%;?height:?100%;?} .img?.inner?div:last-child?{?opacity:?0;?} </style>
</head> <body>
<div?style="width:620px;margin:40px?auto?0?auto;">
<div?class="img"> <div?class="inner"> <div><img?src="image/1-1.jpg"?/></div> <div><img?src="image/1-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/2-1.jpg"?/></div> <div><img?src="image/2-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/3-1.jpg"?/></div> <div><img?src="image/3-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/4-1.jpg"?/></div> <div><img?src="image/4-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/1-1.jpg"?/></div> <div><img?src="image/1-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/2-1.jpg"?/></div> <div><img?src="image/2-2.jpg"?/></div> </div> </div>
</div>
<script?type="text/javascript"> $(".img").mouseenter(function?()?{ var?$this?=?$(this); var?$div?=?$this.find(".inner?div"); $div.eq(1).stop(); $div.eq(1).css({?"top":?"0px",?"left":?"0px",?"width":?"200px",?"height":?"200px"?}); $div.eq(0).stop().animate({?"top":?"-25px",?"left":?"-25px",?"width":?"250px",?"height":?"250px",?"opacity":?"0"?},?500); $div.eq(1).stop().animate({?"top":?"-25px",?"left":?"-25px",?"width":?"250px",?"height":?"250px",?"opacity":?"1"?},?500); }).mouseleave(function?()?{ var?$this?=?$(this); var?$div?=?$this.find(".inner?div"); $div.eq(0).stop().animate({?"top":?"0",?"left":?"0",?"width":?"200px",?"height":?"200px",?"opacity":?"1"?},?500); $div.eq(1).stop().animate({?"top":?"0",?"left":?"0",?"width":?"200px",?"height":?"200px",?"opacity":?"0"?},?500); });???? </script>
</body> </html>
法二： <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title></title>
<script?type="text/javascript"?src="js/jquery-1.11.1.min.js"></script>
<style?type="text/css"> body?{?background:?#000;?} .img?{?float:?left;?width:?200px;?height:?200px;?overflow:?hidden;?margin:?0?1px?1px?0;?} .img?.inner?{?position:?relative;?} .img?.inner?div?{?position:?absolute;?top:?0;?left:?0;?width:?200px;?height:?200px;?} .img?.inner?img?{?width:?100%;?height:?100%;?} .img?.inner?div:last-child?{?opacity:?0;?} </style>
</head> <body>
<div?style="width:620px;margin:40px?auto?0?auto;">
<div?class="img"> <div?class="inner"> <div><img?src="image/1-1.jpg"?/></div> <div><img?src="image/1-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/2-1.jpg"?/></div> <div><img?src="image/2-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/3-1.jpg"?/></div> <div><img?src="image/3-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/4-1.jpg"?/></div> <div><img?src="image/4-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/1-1.jpg"?/></div> <div><img?src="image/1-2.jpg"?/></div> </div> </div> <div?class="img"> <div?class="inner"> <div><img?src="image/2-1.jpg"?/></div> <div><img?src="image/2-2.jpg"?/></div> </div> </div>
</div>
<script?type="text/javascript"> $(".img").mouseenter(function?()?{ var?$this?=?$(this); var?$div?=?$this.find(".inner?div"); $div.eq(1).stop(); $div.eq(1).css({?"top":?"0px",?"left":?"0px",?"width":?"200px",?"height":?"200px"?}); $div.eq(0).stop().animate({?"top":?"-25px",?"left":?"-25px",?"width":?"250px",?"height":?"250px",?"opacity":?"0"?},?500); $div.eq(1).stop().animate({?"top":?"-25px",?"left":?"-25px",?"width":?"250px",?"height":?"250px",?"opacity":?"1"?},?500); }).mouseleave(function?()?{ var?$this?=?$(this); var?$div?=?$this.find(".inner?div"); $div.eq(0).stop().animate({?"top":?"0",?"left":?"0",?"width":?"200px",?"height":?"200px",?"opacity":?"1"?},?500); $div.eq(1).stop().animate({?"top":?"0",?"left":?"0",?"width":?"200px",?"height":?"200px",?"opacity":?"0"?},?500); });???? </script>
</body> </html>
總結
以上是生活随笔為你收集整理的HTML 图片鼠标悬停动态效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP中输出采购订单GR/IR标识清单
- 下一篇： HTML Label标签使用