首页 » HTML/CSS, Javascript » CSS+JS让图片抖动

CSS+JS让图片抖动

16647 15

前两天发了一文《利用Jqueryui的effect让博客Logo抖动起来》,主要是利用jqueryui.js的接口来实现。发文后,CSS王子大发同学来留言说CSS就能实现,不需要调用脚本。随即今天正好有空,简化了实现方法,不需要调用jqueryui,直接用几句js搞定,效果和之前的一样,见左上方的logo,实际上外观上看不出有什么区别。

将之前的下面内容去除,也就是去掉jqueryui的接口:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

再将下面的内容:

$(".imagelogo").mouseover(function() {                 
  $(this).effect("shake");
});

更改为:

$(".imagelogo").mouseover(function() {
	obj = $(this);
	i = 5;
	timer = null;
	clearInterval(timer);
        timer = setInterval(function(){    	
	    obj.css({"position":"relative","left":i+"px"});
	    i = -i;
        },50);
});

$(".imagelogo").mouseout(function() {
	clearInterval(timer);
});

话说单独看了下jqueryui.js中关于shake的函数,貌似要比上面这段代码长了不知道多少,当然它还有其他参数返回,功能比较多了。

大发,你说的不会是纯CSS能实现吧。。。如果是的话,给个关键字。。。

文章评分3次,平均分4.7

本文原始地址:https://www.tiandiyoyo.com/2014/01/shake-logo-by-css/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


15 Comments

  1. 大发 :

    。。。加个hover就是滑过触发了

  2. 为啥是MouseOver事件驱动……?

  3. tennfy :

    不知道css3有没有这个效果,不过发现代码挺简单的

  4. 郑永 :

    纯css翻页没问题
    让鼠标放上去抖动,我觉得要用到 css 的动画效果,可以实现的。

  5. 效果用的太多,影响网站加载速度……

载入分页评论...