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. 廖雪峰Java4反射与泛型-2注解-1使用注解

    1.Annotation定义 注解是放在Java源码的类.方法.字段.参数前的一种标签.如下 package com.reflection; import org.apache.logging.log ...

  2. 多级字典表单的Python实现

    需求: 可依次选择进入各子菜单 可从任意一层往回退到上一层 可从任意一层退出程序 数据结构 menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'go ...

  3. DNS解析分析

    一.基本概念 域名系统: 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.DNS使 ...

  4. Jensen不等式

  5. js数组冒泡

    var arr 1= [1, 2, 3, 4, 5]; 最简单的 每组数字之间用逗号隔开 第一个数的索引值为0.数字为1 以此类推 中括号的内容是存var arr2 = Array(1, 2, 3); ...

  6. Google C++命令规范

    最近发现自己在开发程序的过程中,经常会将好几种命名规范进行混用,这样使得程序的可读性下降,于是乎依然决定学习并使用Google的命令规范,并且坚持使用. copy from https://www.c ...

  7. mysql中min和max查询优化

    mysql max() 函数的需扫描where条件过滤后的所有行: 在测试环境中重现: 测试版本:Server version:         5.1.58-log MySQL Community ...

  8. Solr使用in语法查询

    Solr可以用AND.||  布尔操作符 表示查询的并且, 用OR.&&  布尔操作符 表示或者 用NOT.!.-(排除操作符不能单独与项使用构成查询)表示非 如果要用在查询的时候使用 ...

  9. angularjs中阻止事件冒泡,以及指令的注意点

    appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...

  10. “javac”不是内部或外部命令的解决办法(JDK1.5 ~ JDK10)

    配置环境变量:计算机 -> 属性 -> 高级系统设置 -> 环境变量 JDK9以后版本(9-10): JAVA_HOME D:\Java\jdk-10 //jdk所在目录 JRE_H ...