Home > Developer > JavaScript
This is a typical background-position-x application. The technical content is not high, but the idea is worth thinking about. It proves that there are many things that can be changed in DHTML. If map is used as the background, ajax is used to dynamically load the image background, which is also a small map. I don't want to go into this item because there is a bottleneck in the speed and efficiency of the script.
Prerequisites:
Background-position-x ------------- X coordinate of the background image.
Background-position-y ------------- Y coordinate of the background image.
Event. clientX ------------------------ X coordinate of the mouse.
Event. clientY ------------------------ Y coordinate of the mouse.
JSON --------------------------------- the word seems to be very popular now. Since ajax in action came out, it has become even more popular. in a broad sense, it is a javascript associated array. JSON (JavaScript Object Notation) is like this var o = {name: "never-online", web: "http://www.never-online.net", blog: "http://blog.never-online.net"} So you can use o. name, o. the array relational form, such as web or o ['name'] and o ['web.
Solution:
The main difficulty of this map is the accuracy of coordinates, that is, the orientation of the background-position obtained when the mouse moves.
If the problem is solved, more than half of the success will be achieved.
I use the usual method
Coordinates = coordinates after moving with the mouse-original coordinates we saved.
The method for obtaining the original coordinates is neverOnlineMap. _ wrapper. X = event. clientX-parseInt (x. backgroundPositionX );
That is, use the mouse's current position-X coordinate of the image background
Image background coordinates = mouse position-original position
The Y coordinate is similar to the X coordinate. NeverOnlineMap. _ wrapper. Y = event. clientY-parseInt (x. backgroundPositionY );
The source code is as follows:<? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/tr/html4/strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> neverOnlineMap-http://www.never-online.net </ title> <meta http-equiv = "ImageToolbar" content = "no"/> <meta name = "author" content = "never-online, blueDestiny "/> <meta name =" keywords "content =" never modules, Mozilla CSS, C #,. net, Refercence, BlueDestiny, never-online "/> <meta name =" description "content =" BlueDestiny, never-online "/> <meta name =" title "content ="-http://www.never-online.net "/> <meta name =" creator. name "content =" KaiyuanLau, never-online, blueDestiny "/> <style type =" text/css "media =" all "title =" Default "> </style> <body id =" www.never-online.net "> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
