In-depth introduction to JQuery-image Preview

Source: Internet
Author: User

1. each time we learn the same content, we will have different understandings, just as we feel different from each other. JQuery is only one of the JavaScript frameworks, as we stand out from each other, let's take a look at the trend chart using the JQuery framework. 2. We can see that there are more and more people using JQuery, because it is easy and powerful. For a framework, we should not only learn how to use it, but also how to write the framework. People who can make the framework are better than those who only use the framework. Therefore, we should learn to write the framework. 3. similarly, technology cannot be separated from life. When you solve problems in a way of thinking, it is generally a process of solving problems in your life and learning to integrate technology into your life, the combination of technology and life may better apply technology. It can be said that the innovation of life thoughts is superior to technology. For example: people who don't know about AJAX will realize that this is a new technology. In fact, this is not the case. It is just a new way of thinking, if no one has come up with such an idea, how can this technology be popularized and applied, and learn to live. 4. the following provides a bubble prompt function, which is not the "Title" attribute of an element label. The prompt is slow and cannot adapt to each situation. The prompt changes with the mouse moving, A slight change will become the effect that many shopping websites will automatically zoom in with the mouse over the image. Www.2cto.com first look at the implementation code CSS code (performance) [css] <span style = "font-size: 18px; ">/* CSS Document * // * set the style of the prompt DIV */# tooltip {/* absolute position */position: absolute; border: 1px solid balck; background: #333; color: # fff;} p {/* No project symbol */list-style: none; float: left; display: inline; border: 1px solid # AAAAAA ;} </span> JQuery code (behavior) [javascript] <span style = "font-size: 18px;"> // JavaScript Document $ (function () {// Save the coordinates of the mouse position var x = 10; Var y = 20; // register the mouse movement event of the image $ ('a. tooltip '). mouseover (function (e) {// Save the image title attribute value this. myTitle = this. title; this. title = "" // After the image is enlarged, the prompt information var imgTitle = this. myTitle? "<Br/>" + this. myTitle: ""; // create a DIV var tooltip = "<div id = 'tooltip '> "; // Add the created div to the form $ ('body '). append (tooltip); // sets the position of the displayed image $ ('# tooltip '). css ({"top" :( e. pageY + y) + "px", "left" :( e. pageX + x) + "px "}). show ('fast '); // mouse removal event }). mouseout (function () {// set the title value this. title = this. myTitle; $ ('# tooltip '). remove ();}). mousemove (function (e) {$ (' # Tooltip '). css ({"top" :( e. pageY + y) + "px", "left" :( e. pageX + x) + "px"}) ;;};}); </span> HTML code (structure) [html] <span style = "font-size: 18px; "> <body> <p> <a href =" images/apple_javasbigger.jpg "class =" tooltip "title =" Apple iPod "> </a> </p> <a href =" images/apple_2_bigger.jpg "class =" tooltip "title =" Apple iPod nano "> </A> </p> <a href = "images/apple_3_bigger.jpg" class = "tooltip" title = "Apple iphone"> </p> <a href =" images/apple_4_bigger.jpg "class =" tooltip "title =" Apple Mac "> </a> </p> </body> </span> PS: 1. when you want to get the coordinates of the elements pageX and pageY, you must first set the position of the element to absolute or relate, otherwise the element will not move. 2. the relationship between html (), text (), and val () should generally be html ()> text ()> val, both of them can obtain and set values. html () reads and sets the overall element value, text () is the element text value, and val () is the element value. 3. this refers to the DOM object of the current operation. It cannot use JQueryfangfa. $ (this) converts this from DOM to JQuery. A beautiful user interaction interface is generally composed of three parts: presentation, structure, and behavior. CSS designs a beautiful appearance for a fixed and rigid structured HTML, while JavaScript adds a icing on the cake and increases the dynamic effect, thus forming a dynamic page. A website is usually composed of many interconnected dynamic pages and database servers. What Directly Interacts with users in a Web program is the Web Front-end page.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.