Jquery 方块随着鼠标所在的区域而放大

2016-02-19 13:05 10 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享Jquery 方块随着鼠标所在的区域而放大的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

效果如下图:

实现代码:运行后F5刷新下

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml"  head titleJquery 方块随着鼠标所在的区域而放大 /title script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"/script style type="text/css" *{margin:0;padding:0;} .dock { text-align:center;} .dock div{width:8px;height:8px;border:1px #dfdfdf solid; background:#dfdfdf;margin:2px auto; line-height:0px;overflow: hidden;} /style /head body div/div script language="javascript" type="text/javascript" //配置 var m=5;//最大倍数 var s=400;//距中心最大距离 var count=20;//个数 //Dock类 function Dock(){ this.dockItems=[]; this.addItem=function(item){ this.dockItems.push($(item)); $(item).appendTo(".dock"); }; } //生成Dock对象实例 var d=new Dock(); //循环插入count个dockItem dom对象 for(var i=0;icount;i++){ d.addItem('div/div'); } //绑定dockItem函数 $(".dock div").bind("mouseover",function(event){ var w=$(this).width(); var h=$(this).height(); var offset=$(this).offset(); onmouseItemout(offset.top); }); //处理子对象样式 function onmouseItemout(top){ for(var i=0;id.dockItems.length;i++){ var c=d.dockItems[i].attr("class"); var of=$("."+c).offset(); d1=Math.abs(of.top-top); var z=zoomD(m,s,d1); $("."+c).css({width:8*z+"px",height:8*z+"px"}); } } //计算放大倍数 function zoomD(m,s,d){ var z=m*(s-d)*(s-d)/(s*s+1); return (z1)？1:z; } /script /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1602921.html

上一篇：基于jquery实现的服务器验证控件的启用和禁用代码
下一篇：猜数游戏

看过《Jquery 方块随着鼠标所在的区域而放大》的人还看了以下文章更多>>

jquery tabs的实现代码

标签： Web开发

关键代码：代码如下: $(function(){ $(".tabs li").eq(0).css("background","#499AFF"); $(".tabs div").eq(0).show(); $(".tabsulli").click(function(i){ $(this).css("background","#499AFF").siblings().css("background","#ffffff"); $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); return false; }) ...

jQuery AnythingSlider滑动效果插件

标签： Web开发

打包下载 jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件，有些插件在本博客中已经有介绍，有些还没有，本文介绍的是：2009年度最佳 jQuery 插件—Anything...

jQuery TextBox自动完成条

标签： Web开发

代码如下：代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title无标题页/...

JQuery contains的选择器

标签： Web开发

contains选择符 contains选择符是指对象中包括指定内容的对象本身，如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格，设置这些单元格的样式类型添加“highlight”类。下面的代码，运行后，需要刷新下，以便加载jquery !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht...

jQuery slider Content(左右控制移动)

标签： Web开发

不错的效果。好多文字广告可以这样控制。 script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script script type="text/javascript" function animate(dir, step) { var position; position = parseInt($("#content").css("margin-left")); var contentwidth; var sliderwidth; contentwidth = ...

查看更多精彩>>