码迷,mamicode.com
首页 > 其他好文 > 详细

图片选中出现边框效果

时间:2015-12-17 16:01:14      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

图片选中出现边框效果:
当点击选中图片时,图片能够出现红色的边框效果。
代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>图片选中出现边框效果</title>
<style type="text/css"> 
#mainboard img
{ 
  border:1px solid #cccccc; 
   width:88px; 
   height:31px; 
   cursor:pointer; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){ 
   $("#mainboard img").bind("click",function(){ 
       $(this).css("border","1px solid red").siblings().css("border","1px solid #cccccc"); 
   }) 
}) 
</script> 
</head> 
<body> 
<div id="mainboard"> 
  <img src="1.gif" class="b" /> 
  <img src="2.gif" /> 
  <img src="3.gif" /> 
  <img src="4.gif" /> 
</div> 
</body> 
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7861

更多内容可以参阅:http://www.softwhy.com/jquery/

 

图片选中出现边框效果

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/5054096.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!