鼠标滑过图片渐变大小显示

最新推荐文章于 2023-12-01 12:58:10 发布

原创最新推荐文章于 2023-12-01 12:58:10 发布 · 320 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #jquery #ViewUI

原创专栏收录该内容

16 篇文章

订阅专栏

代码不多，但是效果很炫，我根据曾经看过的flash的效果模拟的

	var gradual={};
	gradual.ImagesView=function(options){
		
		var defaults={
		
			applyTo:null,
			minWidth:null,
			maxWidth:null	
		
		};
		
		this.options=$.extend(defaults,options);
		this.$applyTo=null;
		this.$img=null;	
		this.render();
	}
	
	gradual.ImagesView.prototype={
	
		render:function(){
	
			var _that=this;
			var _opts=this.options;
			this.$applyTo=$(_opts.applyTo);
			if(_opts.applyTo!=null && this.$applyTo.size()>0){
				this._create();
				this.$img.mouseover(function(){
											 
					 _that.$img.css('width',_opts.minWidth);
					 var $prev=$(this).prev();
					 var $prevAgain=$prev.prev();
					 var $next=$(this).next();
					 var $nextAgain=$next.next();
					 $prev.css('width',_opts.maxWidth*0.8);
					 $next.css('width',_opts.maxWidth*0.8);
					 $prevAgain.css('width',_opts.maxWidth*0.6);
					 $nextAgain.css('width',_opts.maxWidth*0.6);
					$(this).css('width',_opts.maxWidth);
				
				})
				
			}
		
		},
		
		_create:function(){
			

			this.$img=this.$applyTo.children('img');
			
			
		}
	
	}
	
	
	$.fn.ImagesView = function(options){

	if(!options) options = {};

	options.applyTo = $(this).selector;

	return new gradual.ImagesView(options);

}