A-A+

js实现鼠标移上去显示图片或微信二维码

2016年01月11日 web前端设计 暂无评论 阅读 9 views 次

其实文章介绍的js实现鼠标移上去显示图片或微信二维码效果就是一个显示隐藏效果了,只是在图片或元素中绑定的事件了,具体我们多说无凭了,看例子。

例子:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function  showImg(){  
  5. document.getElementById("wxImg").style.display='block';  
  6. }  
  7. function hideImg(){  
  8. document.getElementById("wxImg").style.display='none';  
  9. }  
  10. </script>  
  11. </head>  
  12. <body>  
  13. <a href="javascript:void(0)" onMouseOut="hideImg()"  onmouseover="showImg()">测试</a>  
  14. <div id="wxImg" style="display:none;height:50px;back-ground:#f00;position:absolute;">这里是微信图片</div>  
  15. </body>  
  16. </html>  

例子,jquery显示隐藏

jQuery hide() 和 show()

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

  1. $("#hide").click(function(){  
  2.   $("p").hide();  
  3. });  
  4. $("#show").click(function(){  
  5.   $("p").show();  
  6. });  

使用jquery真的很方便,比如要控制div的显示与隐藏,一句话就搞定了,请看下面使用说明。

$("#id").show()表示display:block,
$("#id").hide()表示display:none;

$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

$("#id").css('display','none');

$("#id").css('display','block');

$("#id")[0].style.display = 'none';

给我留言