1. 要求：对一个a标签元素，当鼠标操作，移入时，显示a标签title属性的信息，鼠标移出时，隐藏a标签属性的title属性信息

a 标签本身的title 属性具有自我显示的特性，但是这个特性比较慢，如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <div>

         <p><a href="javascript:;" class="tool" title="这是超链接1">链接122222222222</a></p>

         <p><a href="javascript:;" class="tool" title="这是超链接2">链接2313574754778</a></p>

         <p><a href="javascript:;" tilte="自带提示1">提示1</a></p>

         <p><a href="javascript:;" tilte="自带提示2">提示2</a></p>

     </div>

 </body>

 </html>

运行效果：

改写显示title属性如下：

加入js代码：

 <script>

     $(function() {

         var atool = $(".tool");

         atool.mouseover(function(e) {

             var show_div = "<div id='show_d' style='display:none;'>" + $(this).attr("title") + "</div>";

             $("body").append(show_div);

             $("#show_d").css({

                 "top": (e.pageY + 30) + 'px',

                 "left": (e.pageX + 20) + "px",

                 "position": "absolute"

             }).show();

         }).mouseout(function() {

             $("#show_d").remove();

         });

     });

 </script>

运行效果：发现显示重复了，新增的div和本身a标签的属性都显示了，需要去掉一个

更改后：在显示的时候，把title属性去掉，这样就只会显示一个了，相当于改写了a标签的title显示属性

 <script>

     $(function() {

         var atool = $(".tool");

         atool.mouseover(function(e) {

             $(this).attr("mytitle", $(this).attr("title"));

             var show_div = "<div id='show_d' style='display:none;'>" + $(this).attr("mytitle") + "</div>";

             $("body").append(show_div);

             $(this).removeAttr("title");

             $("#show_d").css({

                 "top": (e.pageY + 30) + 'px',

                 "left": (e.pageX + 20) + "px",

                 "position": "absolute"

             }).show();

         }).mouseout(function() {

             $(this).attr('title', $(this).attr("mytitle"));

             $("#show_d").remove();

         });

     });

 </script>

运行结果：

2. 做一个鼠标跟随显示大图的效果，这种效果在商城中经常会用到

html代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         li {

             display: inline-block;

             list-style-type: none;

             float: left;

             width: 100px;

             height: 60px;

             overflow: hidden;

             margin: 6px;

         }

         li a {

             display: inline-block;

             width: 100%;

             height: 100%;

         }

         li a img {

             display: inline-block;

             width: 100%;

             height: 100%;

         }

         p {

             background: #c01;

             text-align: center;

         }

         div {

             display: none;

         }

         div img {

             float: left;

         }

     </style>

 </head>

 <body>

     <ul>

         <li><a href="./img/1.jpg" class="tool" title="锦衣卫"><img src="./img/1.jpg" alt="锦衣卫"></a></li>

         <li><a href="./img/2.jpg" class="tool" title="君子堂"><img src="./img/2.jpg" alt="君子堂"></a></li>

         <li><a href="./img/3.jpg" class="tool" title="少林"><img src="./img/3.jpg" alt="少林"></a></li>

         <li><a href="./img/4.jpg" class="tool" title="唐门"><img src="./img/4.jpg" alt="唐门"></a></li>

         <li><a href="./img/5.jpg" class="tool" title="武当"><img src="./img/5.jpg" alt="武当"></a></li>

     </ul>

 </body>

 </html>

JS代码如下（备注：这里的this 是JS的写法，上面一个是jquery的写法，JS的写法可以使用 element.attribute 的方式操作属性，而jquery不可以，jquery要使用$(this).attr(),或者$(this).prop() 来操作属性）：

 <script>

         $(function() {

             var atool = $(".tool");

             var x = 20;

             var y = 20;

             atool.mouseover(function(e) {

                 // 设置自定义属性mytitle,将属性title的值赋值给此自定义属性

                 this.mytitle = this.title;

                 // 清空属性title的值，这样a标签的title属性就不会显示了

                 this.title = "";

                 // 设置要添加图片的alt属性

                 var imgTitle = this.mytitle ? this.mytitle : "";

                 //创建要添加的图片元素div，其中包含img元素

                 var to_body = "<div id='to_body'><img src='" + this.href + "'  alt='产品预览图:" + imgTitle + "'>" + "<p>产品预览：" + imgTitle + "</p>" + "</div>";

                 // 将创建的元素添加到body中

                 $("body").append(to_body);

                 // 设置图片的top和left值

                 $("#to_body").css({

                     "top": (e.pageY + y) + "px",

                     "left": (e.pageX + x) + "px",

                     'position': 'absolute'

                 }).show();

                 // 鼠标移出后，删除添加的div元素，即可使用img消失

             }).mouseout(function() {

                 this.title = this.mytitle;

                 $("#to_body").remove();

                 // 鼠标在图片上移动时，添加的节点位置跟随鼠标变化而变化

             }).mousemove(function(e) {

                 $("#to_body").css({

                     "top": (e.pageY + y) + "px",

                     "left": (e.pageX + x) + "px"

                 });

             });

         })

 </script>

运行结果：

jquery接触初级-----juqery DOM操作实例，动态图片显示的更多相关文章

  1. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

  2. jquery接触初级-----juqery DOM操作 之一

    1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...

  3. jquery接触初级-----juqery选择器实例

    jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...

  4. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  5. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  6. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  7. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  8. jQuery基础知识点（DOM操作）

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  9. jQuery（3）——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

随机推荐

  1. 廖雪峰Java1-3流程控制-4switch多重选择

    switch语句 根据switch(表达式)跳转到匹配的case结果,继续执行case结果: 的后续语句,遇到break结束执行,没有匹配条件,执行default语句. int i = 3 switc ...

  2. mysql root情况

          180829 11:15:20 [ERROR] Fatal error: Please read "Security" section of the manual to ...

  3. MySQL binlog 企业案例升级版

    需求:1.创建一个数据库 oldboy2.在oldboy下创建一张表t13.插入5行任意数据4.全备5.插入两行数据,任意修改3行数据,删除1行数据6.删除所有数据7.再t1中又插入5行新数据,修改3 ...

  4. IDEA非sbt下spark开发

    创建非sbt的scala项目 引入spark的jar包 File->Project Structure->Libararies引用spark-assembly-1.5.2-hadoop2. ...

  5. (转)C# WebApi 跨域问题解决方案：CORS

    原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2. ...

  6. (转)C# 控制蜂鸣器发声

    原文地址:http://blog.csdn.net/tsinfeng/article/details/6201918 在C#中可以通过以下四种方式来实现蜂鸣或者报警,播放声音之类的功能.XP下对蜂鸣有 ...

  7. MicroMsg.SDK.WXApiImplV10: register app failed for wechat app signature check failed

    支付时: IWXAPI wxapi = WXAPIFactory.createWXAPI(this,WXAPPID,true); 替换为 IWXAPI wxapi = WXAPIFactory.cre ...

  8. 银行手机APP安全评估报告【转载】

    猫头鹰工作室 我不相信命运,但尊敬命运 主页 大数据 Kafka Spark Hbase Redis Flume ActiveMQ 渗透测试 方法论 Kali测试 APP安全 OWASP 脑图 Too ...

  9. MongoDB Shell 常用操作命令

    MonoDB   shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用javascript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help ...

  10. 零基础学习python_异常处理（32-33课）

    我们写完python执行的时候是不是经常会遇到报错,而且报错都是大片红字,这样给别人的感受就是你写的程序怎么老是出问题啊,这样我们还咋么混下去呢?于是乎,就有了异常处理的东东. python的try语 ...