图片选中效果_html/css_WEB-ITnose

CSS

求QQ中上传照片,选中照片特效效果,如图所示

最好有整个相片框的示例代码。

回复讨论(解决方案)

这个用js做更简单吧

js点击后给容器增加一个样式,这个样式显示那个钩钩背景就行,再次点击取消这个样式

nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

上传图片

*{margin:0;padding:0;}
body{font-size:12px;}
ul{list-style:none;}

#imgbox{width:450px;margin:100px auto; overflow:hidden;zoom:1;}
#imgbox ul li{width:120px; height:100px; float:left; margin-right:10px; margin-bottom:10px; border:1px solid #fff; padding:30px 2px; cursor:pointer;}
#imgbox ul li img{width:120px; height:100px;}
#imgbox ul li.current{border:1px solid #5d90ab; background:url(images/ok.jpg) 0 0 no-repeat;}

window.onload=function(){
var oDiv = document.getElementById(‘imgbox’);
var oUl = oDiv.getElementsByTagName(‘ul’)[0];
var oLi = oUl.getElementsByTagName(‘li’);
for(var i = 0; i<oLi.length; i++){
oLi[i].onclick=function(){
/* for(var i = 0; i<oLi.length; i++){
oLi[i].className=”;
}*/
this.className=’current’;
}
}
}

   
   
         图片选中效果_html/css_WEB-ITnose
            图片选中效果_html/css_WEB-ITnose
            图片选中效果_html/css_WEB-ITnose
            图片选中效果_html/css_WEB-ITnose
            图片选中效果_html/css_WEB-ITnose
            图片选中效果_html/css_WEB-ITnose
        
   

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    关于子类不想继承父类的问题_html/css_WEB-ITnose

    2025-3-28 11:07:28

    编程技术

    大家下看看ab蓝学网新改版的首页与原来的首页哪个更好?_html/css_WEB-ITnose

    2025-3-28 11:07:39

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索