有谁知道一个 jQuery 插件可以做这样的事情：http://www.pronovias.com/

发布于 2024-09-12 12:01:00 字数 2272 浏览 4 评论 0原文

有谁知道一个 jQuery 插件可以做这样的事情： http://www.pronovias.com/

我的意思是当我将鼠标悬停在它上面并滑动图片时。我想放大它并缩小它。如果不存在这样的插件，我该怎么写？

这就是我所做的。任何人都可以用 ie 支持的正确替换吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var currentPhoto=$('#photoShow .current');
        var nextPhoto=currentPhoto.next('div').addClass('next');
        if (nextPhoto.length==0)
            nextPhoto=$('#photoShow div:first').addClass('next');
        $('#photoShow .current').animate({'opacity':0},1000, function(){
        nextPhoto.addClass('current');
        nextPhoto.removeClass('next');
        currentPhoto.css('opacity', 1)
        currentPhoto.removeClass('current');
        });
    },2000);
    $('#photoShow img').hover(
        function(){
            $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'});
            }, 
        function(){
            $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'});

            });

});


</script>


<style type="text/css">
<!--
*{margin:0; padding:0;}
img{ border:none;
cursor:pointer;}



#photoShow div{
    position:relative;
    visibility:hidden;
}
#photoShow img{
position:absolute;
    z-index: 0;

}
#photoShow .current {
    z-index: 2;
    visibility:visible;
}
#photoShow .next {
    z-index: 1;
        visibility:visible;
}


-->
</style>
</head>

<body>
<div id="photoShow">
    <div class="current"><img src="gelinlik1.jpg" /></div>
    <div><img src="gelinlik2.jpg" /></div>
    <div><img src="gelinlik3.jpg" /></div>
    <div><img src="gelinlik4.jpg" /></div>
        <a href="#" style="visibility:hidden;"></a>
    </div>

</body>
</html>

原文

Does anybody know of a jQuery plugin that can do something like this: http://www.pronovias.com/

I mean when i hover over it while sliding pictures. i want to zoom in it and zoom out. if doesn't exist plugin like this, how do i write?

this is what i have done.
can any one replace with the correct one with ie support?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var currentPhoto=$('#photoShow .current');
        var nextPhoto=currentPhoto.next('div').addClass('next');
        if (nextPhoto.length==0)
            nextPhoto=$('#photoShow div:first').addClass('next');
        $('#photoShow .current').animate({'opacity':0},1000, function(){
        nextPhoto.addClass('current');
        nextPhoto.removeClass('next');
        currentPhoto.css('opacity', 1)
        currentPhoto.removeClass('current');
        });
    },2000);
    $('#photoShow img').hover(
        function(){
            $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'});
            }, 
        function(){
            $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'});

            });

});


</script>


<style type="text/css">
<!--
*{margin:0; padding:0;}
img{ border:none;
cursor:pointer;}



#photoShow div{
    position:relative;
    visibility:hidden;
}
#photoShow img{
position:absolute;
    z-index: 0;

}
#photoShow .current {
    z-index: 2;
    visibility:visible;
}
#photoShow .next {
    z-index: 1;
        visibility:visible;
}


-->
</style>
</head>

<body>
<div id="photoShow">
    <div class="current"><img src="gelinlik1.jpg" /></div>
    <div><img src="gelinlik2.jpg" /></div>
    <div><img src="gelinlik3.jpg" /></div>
    <div><img src="gelinlik4.jpg" /></div>
        <a href="#" style="visibility:hidden;"></a>
    </div>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡冰雨忧蓝° 2024-09-19 12:01:01

当然可以做到这一点，而且我确信我已经看到有人已经为其编写了一个插件，我只是似乎不记得它在哪里了。

为了让您开始使用插件路线，您需要决定插件应该做什么，然后选择应该是什么。

到目前为止，我们知道该插件需要 -

在 mouseenter 上放大
应该缩放多少？
图像应该在整个变焦过程中保持居中吗？
图像应该以什么速度缩放？
缩小鼠标离开
使用与放大相同的速度设置。
应该返回到原始图像大小。

考虑到这些，您需要考虑一些事情。

如果我们简单地增加图像的宽度和高度，则宽度和高度将在视口中增大，但我们真正想做的是将宽度和高度限制为页面加载时的宽度和高度，并使图像在这些范围内变大界限。我们该怎么做呢？
当我们缩放时，我们是否应该将缩放图像文件的源替换为更高分辨率版本的图像？我们可能不需要对小缩放（例如 10 - 20%）执行此操作，但可能希望对更大的缩放百分比执行此操作。

一些代码可以帮助您入门。在此页面上运行此命令并观察图像会发生什么情况

var imgs = $('img');
imgs.wrap('<div style="overflow:hidden;"></div>');

imgs.parent('div').each(function() {
  var self = $(this),
      img = self.find('img');
  self.height(img.height());
  self.width(img.width());
});

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);

It is certainly possible to do this and I'm certain that I've seen someone already write a plugin for it, I just can't seem to remember where it was.

To get you started on the plugin route, you need to decide what the plugin should do and following that, wha the options should be.

So far, we know that the plugin needs to -

Zoom in on mouseenter
How much should it zoom?
Should the image remain centered throughout the zoom?
At what speed should the image zoom?
Zoom out on mouseleave
using the same settings for speed as Zoom in.
should return back to the original image size.

With these in mind, things you need to think about.

If we simply increase the width and height of an image, the width and height will grow in the viewport, but what we really want to do is constrain the width and height to what it is on page load and have the image become larger within those bounds. How might we go about this?
When we zoom, should we swap out the source of the zoomed image file for a higher resolution version of the image? We might not need to do this for small zooms, say 10 - 20%, but may want to do this for larger zoom percentages.

Some code to get you started. Run this on this page and observe what happens to the images

var imgs = $('img');
imgs.wrap('<div style="overflow:hidden;"></div>');

imgs.parent('div').each(function() {
  var self = $(this),
      img = self.find('img');
  self.height(img.height());
  self.width(img.width());
});

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);

回复收藏 0 原文

~没有更多了~