使用 jQuery 插件：视口模拟器

Posted 2023-05-08

【中文标题】使用 jQuery 插件：视口模拟器

【英文标题】：Working on a jQuery plugin : viewport simulator

【发布时间】：2011-02-15 09:59:20

【问题描述】：

我正在开发一个旨在模拟单轴相机运动的 jQuery 插件。 实现这一目标的第一步很简单：使用传统的、干净的标记，并让原型工作。

这里是如何启动插件：

$('#wrapper').fluidGrids(exclude: '.exclude');

这是 WIP 的工作演示：http://sandbox.test.everestconseil.com/protoCitroen/home.html

我在哪里遇到问题：

有没有一种快速的方法来检测每个目标的父级（可点击的动画元素）是否是一个 href 链接，如果是的话来保存这个 url？ 我的克隆使用原始背景图像对其进行动画处理。将其淡化为黑/白。但是当您单击一个元素时，会找到图像 url，但似乎没有被注入。你看到什么了吗？ 最后，关于元素的动画：正如您在源代码中看到的，我使用容器 $('#wrapper') 来定位所有动画子元素。什么是完美的属性来应用这个跨浏览器证明？

这是插件的源代码，有完整的注释。

(function($)
    $.fn.extend( 
        //plugin name - fluidGrids
        fluidGrids: function(options) 

            //List and default values for available options
            var defaults = 
                //The target that we're going to use to handle click event
                hitTarget:      '.animateMe',
                exclude:        '.exclude',
                animateSpeed:   1000
            ;

            var options = $.extend(defaults, options);

            return this.each(function() 

                var o = options;

                //Assign current element to variable
                var obj = $(this);

                //We assign default width height and positions to each object in order to get them back when necessary
                var objPosition = obj.position();

                //Get all ready to animate targets in innerViewport
                var items = $(o.hitTarget, obj);

                //Final coords of innerViewport
                var innerViewport = new Object();
                innerViewport.top = parseInt(objPosition.top);
                innerViewport.left = parseInt(objPosition.left);
                innerViewport.bottom = obj.height();
                innerViewport.right = obj.width();

                items.each(function(e)
                    //Assign a pointer cursor to each clickable element
                    $(this).css("cursor","pointer");

                    //To load distant url at last, we look for it in Title Attribute
                    if ($(this).attr('title').length)
                        var targetUrl = $(this).attr('title');
                                       

                    //We assign default width height and positions to each object in order to get them back when necessary
                    var itemPosition = $(this).position();
                    var itemTop = itemPosition.top;
                    var itemLeft = itemPosition.left;
                    var itemWidth = $(this).width();
                    var itemHeight = $(this).height();  

                    //Both the original and it's animated clone
                    var original = $(this);
                    //To give the 
                    if (original.css('background-image'))
                        var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, '');
                        var imageToInsert = "<img src="+urlImageOriginal+"/>"                       
                    

                    var clone = $(this).clone();


                    original.click(function() 
                        $(clone).append(imageToInsert);
                        $(clone).attr("id","clone");
                        $(clone).attr('top',itemTop);
                        $(clone).attr('left',itemLeft);
                        $(clone).css("position","absolute");
                        $(clone).insertAfter(this);                     
                        $(this).hide();     

                        $(clone).animate(
                            top: innerViewport.top,
                            left: innerViewport.left,
                            width: innerViewport.bottom,
                            height: innerViewport.right
                            ,
                            obj.animateSpeed);
                        $("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast');

                        //Si l'objet du click est un lien
                        return false;
                      );
                );             
            );
        
    );
)(jQuery);

【参考方案1】：

我不知道我能不能帮到你……但我会尽我所能：

您可以使用.is() 获取父类型。或比较标记名。我发了demo here。

 $('.clickable').click(function()
  if ( $(this).is('a') ) 
   alert( 'TRUE! -> url = ' + this.href ); 
   else  
   alert( this.tagName );
  
 )

我可以看到你在注入背景图片，但我不确定你指的是什么元素 - 克隆？当我单击网格时，背景图像会作为具有正确 url 的图像打开，但没有其他任何反应。我没有看到任何代码可以将其恢复到原来的位置。

您是否使用图像标签？ （例如<img class="animateMe" src="/image/myimage.jpg"/>。如果是这样，您可以确定它是一个 img 并使用上面的脚本提取 src。

除了ScrollView 插件之外，我还有一张使用ScrollTo 插件制作动画的地图...您可以查看这些插件的编码，甚至可以使用它们！