效果演示图
需求分析
需求
- 写一组有效果和没效果的对比分析
- 当鼠标移进图片时变大进入预览图片
- 当鼠标持续移动的时候预览图也要跟进
注意
- 复制的代码图片路径肯定不对
- 路径务必更换成你自己的路径
- JS代码比较复杂 都有注释慢慢看
没有JQ代码块 可以使用外链的方式引入
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
书写代码
HTML代码块
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片显示</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> body{ margin: 0; padding: 40px; background: #fff; font: 80% Arial,Helvetica,sans-serif; color: #555; line-height: 180%; } img{ border: none; } ul,li{ margin: 0; padding: 0; } li{ width: 140px; height: 140px; list-style: none; float: left; display: inline; margin-right: 10px; margin-top: 10px; border: 1px solid #AAAAAA; } #tooltip{ position: absolute; border: 1px solid #ccc; background-color: #333; padding: 2px; display: none; color: #fff; } .toolbox{ width: 100%; height: 300px; } .toolbox img{ width: 140px; height: 140px; } .nobox img{ width: 140px; height: 140px; } .nobox{ width: 100%; height: 300px; } </style> </head> <body> <div class="toolbox"> <h3>有效果</h3> <ul> <li> <a href="img/lufei.jpg" class="tooltip" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" class="tooltip" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" class="tooltip" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" class="tooltip" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" class="tooltip" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" class="tooltip" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" class="tooltip" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" class="tooltip" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" class="tooltip" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" class="tooltip" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> <div class="nobox"> <h3>无效果</h3> <ul> <li> <a href="img/lufei.jpg" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> </body> </html>JavaScript代码块
$(function(){ var x = 10; var y = 20; //鼠标移入图片的事件绑定 $("a.tooltip").mouseover(function(e){ //鼠标进入元素 //获取标签的title属性 this.myTitle = this.title; //设为空 this.title = ""; //拼接图片标题，一会放于底部 var imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; //创建div元素 包含img标签 var tooltip = `<div id = 'tooltip'> <img src='`+this.href+`' alt='产品预览图'/>`+imgTitle+`<\/div>`; //把拼接好的字符串追加到文档中 $("body").append(tooltip); //设置x坐标和y坐标并且显示 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }).show("fast"); }).mouseout(function(){ //鼠标离开元素 //鼠标离开的时候把a标签的title属性设置回来 this.title = this.myTitle; //移除样式 $("#tooltip").remove(); }).mousemove(function(e){ //鼠标在元素上持续移动的事件 持续触发 //持续修改，设置div坐标 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }); }); });寄语
小孩子一出生就会哭，
可见忧伤是人类的本能，笑只是一种能力！
祝您在代码的路上坚持下去！
评论 (0)