a标签添加click函数


a标签添加鼠标滑入,滑出函数,点击函数!!

 <a  id="DataSour"  href='javascript:;' οnclick='myClick(this.id)'   οnmοuseοver="show(this.id)" οnmοuseοut="hide(this.id)" ></a>


   function show(btnId){  
        /*显示提示文字*/
        document.getElementById("h"+btnId).style.display="block";
        /*修改指向函数*/
        document.getElementById("h"+btnId).href="javascript:hide()";
    }


  function myClick(btnId){
        /*弹出框*/
        document.getElementById(btnId+"Content").style.display="block";
        console.log("click");
    }

好的,可以使用以下代码实现: HTML代码: ```html <a href="path/to/image.jpg" class="preview-link">点击预览图片</a> ``` JavaScript代码: ```javascript // 获取所有的预览链接 const previewLinks = document.querySelectorAll('.preview-link'); // 给每个预览链接绑定点击事件 previewLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的链接跳转行为 const imgSrc = this.getAttribute('href'); // 获取图片路径 // 创建图片元素 const img = document.createElement('img'); img.src = imgSrc; img.style.maxWidth = '90%'; img.style.maxHeight = '90%'; img.style.display = 'block'; img.style.margin = 'auto'; // 创建遮罩层 const mask = document.createElement('div'); mask.style.position = 'fixed'; mask.style.top = 0; mask.style.left = 0; mask.style.width = '100%'; mask.style.height = '100%'; mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; mask.style.display = 'flex'; mask.style.justifyContent = 'center'; mask.style.alignItems = 'center'; // 将图片元素添加到遮罩层中 mask.appendChild(img); // 将遮罩层添加到文档中 document.body.appendChild(mask); // 点击遮罩层关闭预览 mask.addEventListener('click', function() { document.body.removeChild(mask); }); }); }); ``` 这段代码会找到所有带有 `preview-link` 类名的链接元素,并且给它们绑定点击事件。当用户点击链接时,会创建一个遮罩层和一个图片元素,将图片添加到遮罩层中,并且将遮罩层添加到文档中。用户点击遮罩层时,遮罩层会被移除,预览结束。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值