点击选择-图片添加对号（单选）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现商品选择</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
padding:0;
margin:0;
}
li {
position:relative;
list-style:none;
float:left;
margin-right:20px;
}
img {
width:120px;
height:80px;
cursor:pointer;
}
a.on {
display:inline-block;
width:10px;
height:5px;
background:red;
line-height:0;
font-size:0;
vertical-align:middle;
-webkit-transform:rotate(45deg);
position:absolute;
right:13px;
bottom:5px;
}
a.on:after {
content:'/';
display:block;
width:20px;
height:5px;
background:red;
-webkit-transform:rotate(-90deg) translateY(-50%) translateX(50%);
position:absolute;
}
</style>
</head>
<body>
<p>请选择</p>
<ul id="products">
<li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt="">
<a href="javascript:;" class="on"></a>
</li>
<li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt="">
<a href="javascript:;"></a>
</li>
<li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt="">
<a href="javascript:;"></a>
</li>
<li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt="">
<a href="javascript:;"></a>
</li>
<li><img src="https://file.ipandatcm.com/data/attachment/online/2018/03/17/11/9e6fada41dd744bda0570cfd8789a8c3.png?imageView2/2/w/339" alt="">
<a href="javascript:;"></a>
</li>
</ul>

$("#products li").on('click', function() {
$(this).find("a").addClass('on').parents('li').siblings('li').find("a").removeClass("on");

$("img").eq($(this).index()).css({
border: "1px solid red",
}).parents("li").siblings().find("img").css({
border: "none",

});
})
</script>
</body>

</html>

点击选择-图片添加对号（单选）相关推荐

php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,快速实现PHP图片上传和预览
用户点击选择文件选好图片后,自动进行一次提交.完成图片的上传.但不修改原引用图片的地址.后续第二次提交是修改result文件中引用图片的地址(PS:为了简便这里使用了result文件),完成整个上传 ...
php 点击选择图片上传,php上传多张图片时，选择图片后即可预览的问题
这几天一直在解决一个问题,上传图片时选择成功后就能预览. 需求:在点击上传图标的时候会在前面的input框中显示出文件名,然后点击后面的查看按钮就可以预览选择的这张图片了,要求不能刷新页面 1.一开始 ...
微信浏览器点击选择图片报错 WeiXinJSbridge is not defined
最近做一个h5界面,在个人中心需要有个用户头像修改的功能,然后就用了<input type="file">, 在手机浏览器运行很正常,但是在微信浏览器就出现了异常,用w ...
php 点击选择图片上传,简易的图片点击上传功能
这次给大家带来简易的图片点击上传功能, 做出简易的图片点击上传功能注意事项有哪些,下面就是实战案例,一起来看一下. 简易图片点击上传预览示例.chrome,火狐等浏览器下可支持拖拽预览 //--从 ...
php 点击选择图片上传,php做图片上传功能
无标题文档文件上传 /> //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, ...
仿淘宝中的评价晒单中选择图片可以预览，添加，删除
前一篇文章写了如何把input="file"的默认样式改为自己想要的样式所以这篇是在这个的基础上写的,也就是说改变成了自己想要的样式之后,点击选择图片,可以放在一个div中预览,同 ...
微信小程序实现点击按钮选择图片后显示图片并且可以预览该图片
wxml: js: data里要写图片这个变量. 点击选择图片预览图片给 image加事件,利用e.target.dataset.src 获取当前图片地址,赋值给wx.previewImage的 ...
微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
MFC——选择图片显示到Picture Control
出处:http://www.cnblogs.com/Forever-Road/p/6800838.html?utm_source=itdadao&utm_medium=referral MFC ...

点击选择-图片添加对号（单选）

点击选择-图片添加对号（单选）相关推荐

最新文章

热门文章