Shulou(Shulou.com)06/02 Report--

This article shows you how to use jQuery marquee to achieve response design, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

The design of the template integrates multi-screen responsive design and self-running jQuery marquee (uninterrupted scrolling) technology. The main problem to be solved is how to use jQuery Ajax technology to load additional interoperable data into the template according to the size of the display screen. Taking advantage of the media query capabilities in CSS3 and including a common set of HTML and CSS tags, this template provides an excellent user experience across devices.

Note: for more information about CSS-only responsive design and initiator templates, please refer to the customizable launcher design for multi-screen development.

General introduction: jQuery and Dreamweaver

One of the most important features of Dreamweaver CS5.5 is its embedded jQuery support. Whether a beginner in jQuery or an experienced JavaScript developer, Dreamweaver's included code hints and built-in jQuery support undoubtedly improve development efficiency (see figure 1). In addition to supporting JQuery,Dreamweaver CS5.5, it also strongly supports CSS3 media queries and multi-screen design (also known as responsive design).

Figure 1. Dreamweaver supports jQuery code hints.

Custom jQuery script

The template contains a custom script library developed by Codify Design Studio to create an interactive home page marquee content. The implementation of scrolling content is based entirely on the standard HTML. The marquee content in the template consists of a set of panels (also known as slides), each containing pictures, titles, and links for panel switching. The contents of the panels and navigation are dynamically created based on the html in the marquee_panels.html file (see figure 2). Because the auto-playback function is set, marquee content is played automatically by default, and when the user operates with the mouse, the playback function is automatically turned off in response to the user's action.

Figure 2. Generate panels and navigation dynamically based on HTML content.

Note: special thanks to Dimas Begunoff for granting permission to use jQuery Image Preloader plug-in.

Dynamic loading based on screen size

When the visual area is more than 550pixel wide, the template loads a html page containing marquee content, preloads images, and then generates interactive marquee content. When the visual area is less than 550 pixels wide, for example, accessed through a device, the marquee container div is hidden and only the html file containing only one recommended entry is loaded (see figure 3). This is done to reduce the amount of content loaded on the small screen, but retain the CSS3 media query capability.

Note: for Chrome users only. When this article is published, Chrome forbids the use of Ajax to load local files from the local operating system, which will cause the marquee or promo area to become a blank area. But Chrome supports loading a file from a Web server or locally running web service. For more information, please follow Chrome's open source browser project.

Figure 3. Based on the visual region returned by jQuery, the loaded html.

In addition to using HTML,CSS and jQuery technology, the template also contains an PSD file that uses custom design elements to match the needs of the brand.

Watching videos: using custom templates

Chris Converse shows how to use Dreamweaver jQuery marquee templates to load interactive data based on the size of the screen. Taking advantage of CSS3's media query capabilities and including a set of generic html and css tags, jQuery's Ajax creates an excellent user experience across devices.

Preview and download templates

Preview marquee content on different devices. Download the HTML,CSS and Photoshop source files associated with the template.

Figure 4. Preview marquee content on different devices

The above content is how to use jQuery marquee to implement response design. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.