<!DOCTYPE html>
<html>
<head>
<title>jQuery实现很酷的鼠标互动效果_网页代码站(www.webdm.cn)</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
float: left;
}
.clear {
clear: both;
}
html, body {
color: #737373;
background: url(http://www.webdm.cn/images/20130220/bg.jpg) #E4E7E8 no-repeat center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute
}
#container {
width: 100%;
position: absolute
}
#indexgs {
width: 1128px;
height: 508px;
position: relative;
}
#indexgs img {
position: absolute;
}
#indexg2 {
left: 1000px;
top: 1000px;
}
#indexg1 {
left: -1000px;
top: 1000px;
position: absolute
}
#indexg1 a {
width: 244px;
height: 51px;
display: block;
background: url(http://www.webdm.cn/images/20130220/indexlogo.png);
position: relative;
top: 107px;
left: 109px;
}
#indexg1 a:hover {
width: 244px;
height: 51px;
display: block;
background: url(http://www.webdm.cn/images/20130220/indexlogo2.png);
}
#indexg0 {
left: 0;
top: 1000px;
position: absolute;
}
#indexg0 a {
width: 54px;
height: 54px;
display: block;
background: url(http://www.webdm.cn/images/20130220/blog2.png);
position: relative;
top: 263px;
left: 800px;
}
#indexg0 a:hover {
background: url(http://www.webdm.cn/images/20130220/blog1.png)
}
#indexmask {
background: url(http://www.webdm.cn/images/20130220/bjd.png);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none
}
</style>
<script type="text/javascript" src="http://www.webdm.cn/images/20130220/packed_jquery.min6301986802.js"></script>
<script type="text/javascript" src="http://www.webdm.cn/images/20130220/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function () {
var index_div_pro = [{
sx: 0,
sy: 0,
mw: 3,
mh: 1,
bx: 8.4,
by: 10.4,
rx: -0.6
},
{
sx: 35,
sy: 0,
mw: 3,
mh: 0.5,
bx: 6.4,
by: 8.4,
rx: -0.1
},
{
sx: 785,
sy: 90,
mw: 0.3,
mh: 0.1,
bx: 6.5,
by: 7.4,
rx: -0.1
}];
var ePageX = null;
var ePageY = null;
function getMousePos(expression) {
if (ePageX == null || ePageY == null) return null;
var _x = $(expression).position().left;
_x += ePageX - $(expression).parent().position().left;
var _y = $(expression).position().top;
_y += ePageY - $(expression).parent().position().top;
return {
x: _x,
y: _y
}
};
var index_xh = setInterval(function () {
for (var i = 0; i < 3; i++) {
var mousepos = getMousePos("#indexg" + i);
if (mousepos != null) {
var left = parseInt($("#indexg" + i).css("left"));
var l = left + (index_div_pro[i].sx + index_div_pro[i].mw - (mousepos.x - 100) / index_div_pro[i].bx * index_div_pro[i].rx - left) * 0.2;
var top = parseInt($("#indexg" + i).css("top"));
var t = top + (index_div_pro[i].sy + index_div_pro[i].mh - (mousepos.y - 100) / index_div_pro[i].by - top) * 0.2;
$("#indexg" + i).css({
left: l,
top: t
})
}
}
},
15);
$("body").mousemove(function (event) {
event = event || window.event;
ePageX = event.pageX;
ePageY = event.pageY;
});
});
</script>
</head>
<body>
<div id="indexgs"> <img id="indexg2" src="http://www.webdm.cn/images/20130220/g3.png" width="364" height="308"/>
<div id="indexg0"> <img src="http://www.webdm.cn/images/20130220/g1.png" width="918" height="508"/> <a href="#" target="_blank"></a> </div>
<div id="indexg1"> <img src="http://www.webdm.cn/images/20130220/g2.png" width="353" height="538"/> <a href="#" target="_blank"></a> </div>
</div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
分享到：
相关推荐
qt 一个基于Qt Creator（qt,C++）实现中国象棋人机对战.
热带雨林自驾游自然奇观探索
冰川湖自驾游冰雪交融景象
C51 单片机数码管使用 Keil项目C语言源码
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
前端分析-2023071100789s12
Laz_制作了一些窗体和对话框样式.7z
1、文件内容：ocaml-docs-4.05.0-6.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ocaml-docs-4.05.0-6.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
学习笔记-沁恒第六讲-米醋
工业机器人技术讲解【36页】
内容概要：本文档详细介绍了在 CentOS 7 上利用 Docker 容器化环境来部署和配置 Elasticsearch 数据库的过程。首先概述了 Elasticsearch 的特点及其主要应用场景如全文检索、日志和数据分析等，并强调了其分布式架构带来的高性能与可扩展性。之后针对具体的安装流程进行了讲解，涉及创建所需的工作目录，准备docker-compose.yml文件以及通过docker-compose工具自动化完成镜像下载和服务启动的一系列命令；同时对可能出现的问题提供了应对策略并附带解决了分词功能出现的问题。 适合人群：从事IT运维工作的技术人员或对NoSQL数据库感兴趣的开发者。 使用场景及目标：该教程旨在帮助读者掌握如何在一个Linux系统中使用现代化的应用交付方式搭建企业级搜索引擎解决方案，特别适用于希望深入了解Elastic Stack生态体系的个人研究与团队项目实践中。 阅读建议：建议按照文中给出的具体步骤进行实验验证，尤其是要注意调整相关参数配置适配自身环境。对于初次接触此话题的朋友来说，应该提前熟悉一下Linux操作系统的基础命令行知识和Docker的相关基础知识
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
网络小说的类型创新、情节设计与角色塑造
毕业设计_基于springboot+vue开发的学生考勤管理系统【源码+sql+可运行】【50311】.zip 全部代码均可运行，亲测可用，尽我所能，为你服务； 1.代码压缩包内容 代码：springboo后端代码+vue前端页面代码 脚本：数据库SQL脚本 效果图：运行结果请看资源详情效果图 2.环境准备： - JDK1.8+ - maven3.6+ - nodejs14+ - mysql5.6+ - redis 3.技术栈 - 后台：springboot+mybatisPlus+Shiro - 前台：vue+iview+Vuex+Axios - 开发工具: idea、navicate 4.功能列表 - 系统设置：用户管理、角色管理、资源管理、系统日志 - 业务管理：班级信息、学生信息、课程信息、考勤记录、假期信息、公告信息 3.运行步骤： 步骤一：修改数据库连接信息（ip、port修改） 步骤二：找到启动类xxxApplication启动 4.若不会，可私信博主！！！
在智慧城市建设的大潮中，智慧园区作为其中的璀璨明珠，正以其独特的魅力引领着产业园区的新一轮变革。想象一下，一个集绿色、高端、智能、创新于一体的未来园区，它不仅融合了科技研发、商业居住、办公文创等多种功能，更通过深度应用信息技术，实现了从传统到智慧的华丽转身。 智慧园区通过“四化”建设——即园区运营精细化、园区体验智能化、园区服务专业化和园区设施信息化，彻底颠覆了传统园区的管理模式。在这里，基础设施的数据收集与分析让管理变得更加主动和高效，从温湿度监控到烟雾报警，从消防水箱液位监测到消防栓防盗水装置，每一处细节都彰显着智能的力量。而远程抄表、空调和变配电的智能化管控，更是在节能降耗的同时，极大地提升了园区的运维效率。更令人兴奋的是，通过智慧监控、人流统计和自动访客系统等高科技手段，园区的安全防范能力得到了质的飞跃，让每一位入驻企业和个人都能享受到“拎包入住”般的便捷与安心。 更令人瞩目的是，智慧园区还构建了集信息服务、企业服务、物业服务于一体的综合服务体系。无论是通过园区门户进行信息查询、投诉反馈，还是享受便捷的电商服务、法律咨询和融资支持，亦或是利用云ERP和云OA系统提升企业的管理水平和运营效率，智慧园区都以其全面、专业、高效的服务，为企业的发展插上了腾飞的翅膀。而这一切的背后，是大数据、云计算、人工智能等前沿技术的深度融合与应用，它们如同智慧的大脑，让园区的管理和服务变得更加聪明、更加贴心。走进智慧园区，就像踏入了一个充满无限可能的未来世界，这里不仅有科技的魅力，更有生活的温度，让人不禁对未来充满了无限的憧憬与期待。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
内容概要：本文介绍了使用 Matlab 实现基于 BO（贝叶斯优化）的 Transformer 结合 GRU 门控循环单元时间序列预测的具体项目案例。文章首先介绍了时间序列预测的重要性及其现有方法存在的限制，随后深入阐述了该项目的目标、挑战与特色。重点描述了项目中采用的技术手段——结合 Transformer 和 GRU 模型的优点，通过贝叶斯优化进行超参数调整。文中给出了模型的具体实现步骤、代码示例以及完整的项目流程。同时强调了数据预处理、特征提取、窗口化分割、超参数搜索等关键技术点，并讨论了系统的设计部署细节、可视化界面制作等内容。 适合人群：具有一定机器学习基础，尤其是熟悉时间序列预测与深度学习的科研工作者或从业者。 使用场景及目标：适用于金融、医疗、能源等多个行业的高精度时间序列预测。该模型可通过捕捉长时间跨度下的复杂模式，提供更为精准的趋势预判，辅助相关机构作出合理的前瞻规划。 其他说明：此项目还涵盖了从数据采集到模型发布的全流程讲解，以及GUI图形用户界面的设计实现，有助于用户友好性提升和技术应用落地。此外，文档包含了详尽的操作指南和丰富的附录资料，包括完整的程序清单、性能评价指标等，便于读者动手实践。
漫画与青少年教育关系
励志图书的成功案例分享、人生智慧提炼与自我提升策略
人工智能在食品安全与检测中的应用