当前位置: 动力学知识库 > 问答 > 编程问答 >

animation - jquery background image changing when the mouse goes accross the element

问题描述:

My boss has seen this on a website: http://event.photoswarm.com/

Notice how the images change as you go across the albums. The downside of this is that all the thumbnail images have to be downloaded at the start and then I guess it all then works.

Is there a way I could get something similar to work while loading the images a little better?

The problem I guess is:

  1. Make the images load a little cleaner
  2. Make them load better as some of the albums could have 200+ photos
  3. Use a jquery plugin - this one seems to have been made by photo swarm and I guess they wouldn't be too chuffed if I stole it!

So if there is a way to make something or anyone knows of a free plugin I can download that would be great.

网友答案:

If you inspect the element and resources you will find this:

http://static.photoswarm.com/js/app_user.js

It uses jQuery and Prototype.js

网友答案:

You could store all your image locations in an array. Then it only will load the images when you hover over them.

var images=new Array("image1.jpg","image2.jpg","image3.jpg", 'image4.jpg");
网友答案:

I suppose you take your images and smush it first of all via the Yahoo Tool SmushIt, this removes all unneceseary information out of your images. Then I would initialize an array with the links of the images you want to have on that specific album, and then simply add a

`.mousemove(function(){
     set Timeout(function(){
       //code goes here
     },1000)
  })`

on the specified album(which could be a div for example) and by that you run through that array and simply change the "background-image" of that div with your link out of that array. Maybe you should add a setTimeout() to that action so this does not run through that fast. An alternate option would be if you choose .hover() but I'm not quite sure if this fits your requirements.

网友答案:

I think it might be best if I answered this one as I'm the original author of the code in question :)

Firstly, we're ok with you taking the code (though this question is a year old so you probably already have), we're in the middle of a big rewrite at the moment and this code is depreciated as part of that.

The file that Fabián linked to does contain the code that you need, but it also contains a lot of other code for the rest of the site that you don't. The bit that you want is actually quite simple but there are a couple of different things going on. Deep in that file you'll see the PS.CoverLoader class.

Firstly that takes all the thumbs for the page and starts loading them in the background. Let's just assume they've already been loaded.

The flicking is very simple - I'll just use pseudocode as you already have the js there (and you'd probably use jquery these days).

create array of all images for album
attach to album mousemove
on move find x position of the mouse
translate that to a position in your array
    segment_size = album_width / img_count
    segment = Math.floor(offset/segment_size)
switch album displayed image to be array[segment]

In terms of other questions regarding loading lots of images. It is a problem. This system loads all the thumbs for the page. It's inefficient - some pages are 10s/100s of MB. We tried created a single long image for each album containing all the thumbs (an image sprite) but that doesn't really work with this many different images.

My suggestion would be to load all the images for a given album on first hover and store that in an array in js.

分享给朋友:
您可能感兴趣的文章:
随机阅读: