JQ-第一次点击改变图片，再次点击恢复原本图片//下载图片到本地(移动端下载是ZIP)
1 <!-- 点赞、下载 -->
<div style="background-color: #fff;width: 100%;height: 26px;margin: 5px 0;"> 2 3 <p style="width: 50%;float: left;border-right: 1px solid #eee; margin:0;height: 26px;"> 4 <a href="javascript:;" style='display: block;width: 53px;margin-left: 32%; 5 position: relative;' onclick="zan(this,{$item['id']})"> 6 <img src="../images/F_zan_03.png" data="{$item['id']}" alt="" style="width: 26px; 7 position: absolute;left: 0;top: -2px;" id="imgZan{$item['id']}"> 8 <!-- <img src="../images/F_zan_03_2.png" alt="" style="width: 26px;display: none; 9 position: absolute;left: 0;top: -2px;"" class="afterZan"> --> 10 <span style="color:#000;line-height: 26px;font-size: 16px;margin-left: 26px;">20</span> 11 </a> 12 13 </p> 14 15 16 <a href="{php echo $this->createMobileUrl('find', array('op' => 'down' , 'id' => $item['id']))}" style="display: block; 17 width: 50%; 18 float: right; 19 height: 26px;" onclick="downloadIamge('.saveImg','')"> 20 <img src="../images/F_load_03.png" alt="" style="width: 22px; margin-left: 30%;margin-top: -5px;"> 21 <span style="color:#000;line-height: 26px;font-size: 15px;">下载</span> 22 </a> 23 </div>
1 <script> 2 3 // 切换点赞图片 4 function zan(obj,id){ 5 6 if($(obj).children().attr("src") == "../images/F_zan_03.png"){ 7 $(obj).children().attr("src","../images/F_zan_03_2.png"); 8 }else{ 9 $(obj).children().attr("src","../images/F_zan_03.png"); 10 } 11 12 } 13 14 15 16 // 下载图片 17 (function(){ 18 $(".tjImg p img").attr("class","saveImg") 19 })() 20 function downloadIamge(selector, name) { 21 // 通过选择器获取img元素， 22 var img = document.querySelector(".saveImg") 23 // 将图片的src属性作为URL地址 24 var url = img.src 25 var a = document.createElement('a') 26 var event = new MouseEvent('click') 27 28 a.download = name || '下载图片名称' 29 a.href = url 30 31 a.dispatchEvent(event) 32 console.log("src:",url,"selector:") 33 } 34 35 </script>
