`
癫觉士
  • 浏览: 19570 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

阅读更多

 

代码不多,但是效果很炫,我根据曾经看过的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);

}	

 

分享到:
评论

相关推荐

    js模拟文字列表鼠标滑过渐变效果

    本示例“js模拟文字列表鼠标滑过渐变效果”正是关注于此,旨在使文字列表在鼠标经过时呈现出平滑的颜色过渡,从而吸引用户的注意力并增强交互性。 首先,我们需要理解CSS中的渐变(Gradient)概念。渐变是一种颜色...

    实现6种炫酷的鼠标滑过图片显示遮罩层特效.zip

    "实现6种炫酷的鼠标滑过图片显示遮罩层特效.zip"这个压缩包文件包含了一组JavaScript实现的图片特效,旨在当用户将鼠标指针滑过图片时,会触发一个遮罩层展示,为用户提供更多的信息或者增强视觉体验。下面我们将...

    117个图片css3鼠标经过效果

    当鼠标悬停在图片上时,可以添加过渡效果,如渐变颜色、大小变化等: ```css .image { transition: all 0.5s ease; } .image:hover { /* 添加悬停效果 */ } ``` 5. 隐藏层的显示与隐藏 可以利用CSS3的`...

    鼠标经过菜单,渐变

    在网页设计中,"鼠标经过菜单,渐变"是一种常见的交互设计技巧,它能提升用户的浏览体验,使网站显得更加动态和生动。这种效果通常应用于导航菜单,当用户将鼠标悬停在某个菜单项上时,菜单的颜色或背景会逐渐变化,...

    鼠标滑过(hover)图片放大效果外加自做专题实例

    在本实例中,我们将探讨如何实现鼠标滑过图片时图片放大的效果,以及如何结合自己的专题进行实际应用。 首先,让我们来了解HTML的基础知识。HTML(HyperText Markup Language)是构建网页的基本语言,通过标记不同...

    鼠标滑过多焦点图透明渐变切换

    在网页设计中,"鼠标滑过多焦点图透明渐变切换"是一种常见的动态视觉效果,它增强了用户与网页的交互体验。这种技术常用于网站的首页、产品展示或新闻滚动等部分,通过鼠标移动来切换多张图片,形成一种平滑且吸引人...

    js模拟文字列表鼠标滑过渐变效果.zip

    标题中的"js模拟文字列表鼠标滑过渐变效果"指的是使用JavaScript编程语言和CSS样式来实现的一种交互式设计。在网页中,当用户将鼠标指针悬停在文本列表上时,文字的颜色或背景会逐渐变化,以创建视觉吸引力并提升...

    CSS 鼠标经过图片效果合集

    7. **伪元素与边框效果**:利用`:before`和`:after`伪元素,可以在图片周围添加额外的元素,如边框或阴影,这些元素在鼠标经过时可以动态显示或改变形状。 8. **响应式设计**:在移动设备上,触摸屏幕时无鼠标经过...

    jQuery鼠标经过索引图片无缝渐变切换特效源码.zip

    在这个项目中,jQuery被用来创建一个功能丰富的图片展示模块,具有鼠标经过时图片平滑过渡的效果。 这个特效的核心在于图片的无缝切换,它通过巧妙地调整图片的显示顺序和透明度,实现了在用户鼠标悬停时图片之间的...

    30款css3实现的鼠标经过图片显示描述特效

    本文将深入探讨“30款CSS3实现的鼠标经过图片显示描述特效”,这些特效能够为网站增添动态感,提高用户对内容的理解与互动性。CSS3是 Cascading Style Sheets 的第三版,它提供了更丰富的样式控制,包括动画、过渡和...

    css3炫酷圆形图片鼠标滑过特效

    本项目聚焦于CSS3的一个特定应用——创建炫酷的圆形图片鼠标滑过特效,这为网页设计带来了丰富的交互性和动态美感。以下是关于这个主题的详细知识点: 1. **CSS3选择器和属性**: - `:hover`伪类:在鼠标指针悬停...

    jQuery鼠标移动图片遮罩显示特效.zip

    在这个"jQuery鼠标移动图片遮罩显示特效.zip"压缩包中,包含了一个利用jQuery实现的独特图片展示功能,特别适用于图片相册或者产品展示等场景。接下来,我们将深入探讨这个特效背后的技术细节。 首先,jQuery的事件...

    css鼠标滑过图片放大

    "css鼠标滑过图片放大"是一个常见的需求,它可以增加用户对网页内容的互动感,提高用户体验。 首先,我们需要理解:hover伪类的工作原理。`:hover`是CSS3中的一个伪类选择器,它会在用户将鼠标指针悬停在某个元素上...

    jQuery鼠标滑过图片动画特效源码.zip

    《jQuery鼠标滑过图片动画特效实现详解》 在网页设计中,动态效果常常能提升用户体验,使得页面更具吸引力。jQuery库以其简洁的API和强大的功能,成为实现这些效果的首选工具之一。本篇文章将深入探讨如何利用...

    纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip

    1. 图片渐变:此效果可能利用了CSS3的`transition`属性,当鼠标滑过图片时,图片的颜色或滤镜效果会逐渐变化,增加视觉冲击力。 2. 缩放效果:通过`transform: scale()`,图片在鼠标悬停时可以放大或缩小,为用户...

    鼠标移上去,图片切换效果

    当鼠标悬停在元素上时,这个属性可以用来改变图片的显示效果,例如改变透明度、大小、位置或颜色。过渡效果由四个主要部分组成:`transition-property`定义要改变的属性,`transition-duration`定义过渡的持续时间,...

    20种配合场景CSS3鼠标滑过文字背景动画特效

    2. 渐变背景:CSS3的线性渐变或径向渐变允许我们在鼠标滑过时改变背景的渐变方向或颜色。 3. 阴影效果:`text-shadow`属性可以创建文字阴影,增加立体感。通过调整阴影的颜色、偏移量和模糊度,可实现各种动态效果...

    8款CSS3鼠标滑过图片动画效果.zip

    本资源“8款CSS3鼠标滑过图片动画效果.zip”包含了一系列利用CSS3实现的图片动画效果,这些效果在用户将鼠标指针悬停在图片上时会触发,为网页增添动态美感。下面我们将详细探讨这些知识点: 1. **CSS3过渡...

    纯CSS3鼠标滑过图片遮罩层动画特效

    【纯CSS3鼠标滑过图片遮罩层动画特效】是一种基于现代浏览器的Web设计技术,主要利用CSS3的特性来实现交互式的用户体验。这个特效的核心在于,当用户将鼠标光标移动到图片上方时,会触发一个遮罩层,显示图片的附加...

Global site tag (gtag.js) - Google Analytics