jQuery学习笔记——DOM练习图片提示效果
2017-08-15 10:23
351 查看
<!-- 作者:1377378268@qq.com 时间:2017-08-12 描述:图片提示。当鼠标移动到图片上时,自动显示大图 --> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片提示</title> <!-- 引入jQuery --> <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></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{ list-style:none; float:left; display:inline; margin-right:10px; border:1px solid #AAAAAA; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff; } </style> <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).show("fast"); //设置x坐标和y坐标,并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e){ $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) //]]> </script> </head> <body> <h3>有效果:</h3> <ul> <li> <a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPad"> <img src="images/apple_1.jpg" alt="苹果 iPod" /> </a> </li> <li> <a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"> <img src="images/apple_2.jpg" alt="苹果 iPod nano"/> </a> </li> <li> <a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"> <img src="images/apple_3.jpg" alt="苹果 iPhone"/> </a> </li> <li> <a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"> <img src="images/apple_4.jpg" alt="苹果 Mac"/> </a> </li> </ul> <br/><br/><br/><br/> <br/><br/><br/><br/> <h3>无效果:</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>
效果:(由于截图原因没有显示鼠标)
相关文章推荐
- Jquery中的DOM操作 (十一.图片放大提示效果)
- js日常小练习:实现图片的轮播效果
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- 图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果
- JS实现的车标图片提示效果代码
- dom例子五(鼠标移动提示-div放大-图片轮换)
- 鼠标滑过图片出现大图片提示层效果js代码
- 3D图片展示效果练习
- jquery鼠标悬停时的放大图片的图片提示效果
- dom例子六(鼠标飞图片-显示层-提示)
- 鼠标滑过图片出现大图片提示层效果js代码
- 内联方式—flexdemo演示提示框和图片缩放效果例子_内联方式组合mxml和ActionScript代码
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
- jquery图片提示效果
- cocos2d-JS 实现 横 竖 屏 显示提示图片(rotate.png)效果 !!!!!
- 鼠标滑过图片出现大图片提示层效果js代码
- ajax+js+dom+json+php+mysql实现仿百度、google的分页隔行变色效果(加图片)
- jquery-纯jQuery制作网站超链接和图片提示效果
- 3.3: 案例研究---某网站的超链接和图片提示效果
- JS 窗口间图片轮行效果练习