Sharp jQuery Chapter 3 Chapter Summary Example_jquery
May 16, 2016 pm 06:31 PM
jquery
example
复制代码 代码如下:
<style>
li{ float:left; list-style:none; padding:3px;}
img{ border:#CCC 1px solid;}
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;}
.img1{ display:block;}
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微软雅黑;}
</style>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二个产品"><img src="images/apple_2.jpg" /></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三个产品"><img src="images/apple_3.jpg" /></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四个产品"><img src="images/apple_4.jpg" /></a></li>
</ul>
<script>
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
this.imgTitle = this.myTitle ? this.myTitle : "无title";
var tooltip = "<div id='tooltip'><img class='img1' src='" this.href "'/><div class='div1'>" this.imgTitle "</div></div>"
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY y) "px",
"left": (e.pageX x) "px"
}).show("fast");
}).mouseout(function () {
$("#tooltip").remove();
this.title = this.myTitle;
})
</script>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot tools Tags

Hot Article
Repo: How To Revive Teammates
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
3 weeks ago
By DDD
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed explanation of jQuery reference methods: Quick start guide

How to use PUT request method in jQuery?

How to remove the height attribute of an element with jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags

In-depth analysis: jQuery's advantages and disadvantages

Understand the role and application scenarios of eq in jQuery

How to tell if a jQuery element has a specific attribute?
