zoukankan      html  css  js  c++  java
  • js模拟苹果菜单

    模拟苹果菜单的js代码是从网上看到的,用来做导航菜单还是蛮好看的。这里借鉴一下。

    效果描述:当鼠标移动离哪个图片最近的时候,这个图片最大,鼠标离的图片越远,则图片越小;

    原理:主要用到了三角形的勾股定理,可以根据两点的坐标,求到两点的距离,突然发现数学知识和js效果息息相关啊!

    步骤:

    1.插入大的图片,防止图片放大后失真,图片初始值为它的一半。

    2.获取每个图片的中心点;

    3.获取鼠标的位置;

    4.使用勾股定理求出鼠标离图片中心的的距离;

    代码入下:

    document.mousemove=function(e){
            var e=window.event||e;
    	for (var i = 0; i < oImg.length; i++) {
    	        var x = oImg[i].offsetLeft + oImg[0].offsetWidth/2 ;//我这里每个图片都一样宽;
    	        var y = oImg[i].offsetTop + oImg[0].offsetHeight/2 + box.offsetTop;	//box是包含图片外面的div,用来定位的;
    		var a=e.clientX - x;
    		var b=e.clientY - y;
    		var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2)); //数学公式
    		var d=1-c/300; //c除以300是用来降低基数的,因为c越大,代表鼠标离图片越远,则图片越小,所以用1-则得到相对应的基数;
    		if(d<0.5){
    			d=0.5  //图片本身不能小于它的一半
    		}	
    		oImg[i].style.width=d*128 + 'px';
    		oImg[i].style.height=d*128 + 'px';	
    	}; 
        
    }
    

    看着很难的一个效果,用初中学的知识就解决了,真的很意想不到。

  • 相关阅读:
    Mysql之数据库设计
    jQuery取得select选中的值
    抛java.lang.NoClassDefFoundError: org.joda.time.ReadablePeriod错误
    JS限制并且显示textarea字数
    myBaits association的使用
    IOS-Plist文件存储(1)
    Golang基于学习总结
    freemarker定义自己的标签错误(八)
    教你使用vim表白
    Cocos2d-x 3.2 大富翁游戏项目开发-第八部分 角色的散步路径
  • 原文地址:https://www.cnblogs.com/ILYljhl/p/5089236.html
Copyright © 2011-2022 走看看