`

UELike首页鼠标晃动效果过

 
阅读更多
<!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>

 

分享到:
评论

相关推荐

    (179979052)基于MATLAB车牌识别系统【带界面GUI】.zip

    基于MATLAB车牌识别系统【带界面GUI】.zip。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    DG储能选址定容模型matlab 程序采用改进粒子群算法,考虑时序性得到分布式和储能的选址定容模型,程序运行可靠 这段程序是一个改进的粒子群算法,主要用于解决电力系统中的优化问题 下面我将对程序进行详

    DG储能选址定容模型matlab 程序采用改进粒子群算法,考虑时序性得到分布式和储能的选址定容模型,程序运行可靠 这段程序是一个改进的粒子群算法,主要用于解决电力系统中的优化问题。下面我将对程序进行详细分析。 首先,程序开始时加载了一些数据文件,包括gfjl、fljl、fhjl1、cjgs和fhbl。这些文件可能包含了电力系统的各种参数和数据。 接下来是一些参数的设置,包括三种蓄电池的参数矩阵、迭代次数、种群大小、速度更新参数、惯性权重、储能动作策略和限制条件等。 然后,程序进行了一些初始化操作,包括初始化种群、速度和适应度等。 接下来是主要的迭代过程。程序使用粒子群算法的思想,通过更新粒子的位置和速度来寻找最优解。在每次迭代中,程序计算了每个粒子的适应度,并更新个体最佳位置和全局最佳位置。 在每次迭代中,程序还进行了一些额外的计算,如潮流计算、储能约束等。这些计算可能涉及到电力系统的潮流计算、功率平衡等知识点。 最后,程序输出了一些结果,包括最佳位置和适应度等。同时,程序还绘制了一些图形,如电压和损耗的变化等。 综上所述,这段程序主要是一个改进的粒子群算法,用于解决电力

    三保一评关系与区别分析

    三保一评关系与区别分析

    Day-05 Vue22222222222

    Day-05 Vue22222222222

    多功能知识付费源码下载实现流量互导多渠道变现+搭建教程

    多功能知识付费源码下载实现流量互导多渠道变现+搭建教程。资源变现类产品的许多优势,并剔除了那些无关紧要的元素,使得本产品在运营和变现能力 方面实现了质的飞跃。多领域素材资源知识变现营销裂变独立版本。 支持:视频、音频、图文、文档、会员、社群、用户发布、创作分成、任务裂变、流量主、在线下载等多种功能,更多功能 正在不断更新中... 支持流量主变现模式,付费下载付费古观看等变现模式。 实现流量互导,多渠道变现。可以独立部署,并绑定自有独立域名,没有域名限制。

    住家保姆的工作职责、照顾老人住家保姆服务内容.docx

    住家保姆的工作职责、照顾老人住家保姆服务内容.docx

    《高温中暑事件卫生》一级(红色),二级(橙色),三级(黄色),四级(蓝色).docx

    《高温中暑事件卫生》一级(红色),二级(橙色),三级(黄色),四级(蓝色).docx

    职业中专技工学校专业评估表.docx

    职业中专技工学校专业评估表.docx

    统计计算使用R一书的源代码Rcode.zip

    统计计算使用R一书的源代码Rcode.zip

    YOLO算法-火灾和人员探测数据集-850张图像带标签-人-烟-火.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    社区居民诊疗健康-JAVA-基于SpringBoot的社区居民诊疗健康管理系统设计与实现(毕业论文)

    社区居民诊疗健康功能描述 社区居民诊疗健康系统是一个为社区居民提供健康管理、疾病预防、诊疗服务和健康教育的综合平台。该平台致力于提升居民的健康水平,通过智能化、便捷化的服务为居民提供高效的健康保障。以下是该系统的主要功能描述: 1. 用户注册与登录 居民注册:居民可以通过身份证、手机号或社交媒体账号进行注册,填写个人基本信息(如姓名、性别、年龄、联系方式等)并创建账户。 健康档案管理:每个居民注册后,系统会自动生成个性化健康档案,记录个人的健康历史、疾病记录、体检报告等。 2. 健康档案与记录管理 个人健康档案:包括居民的基础健康信息、既往病史、用药记录、免疫接种记录、体检报告等。 诊疗记录管理:记录每次诊疗信息,如诊断、治疗方案、用药情况及随访记录。 健康指标监测:定期记录和更新如血压、血糖、体重、体脂等常见健康指标,便于长期追踪和分析。 3. 在线问诊与诊疗服务 在线咨询:居民可以通过平台预约或直接向社区医生发起在线问诊,获取健康咨询、疾病预防建议、用药指导等服务。 远程诊疗:提供视频问诊功能,方便居民与医生进行实时面对面的远程交流,获得更加详细的诊疗建议。 预约就诊:居民可以

    面部、耳廓损伤损伤程度分级表.docx

    面部、耳廓损伤损伤程度分级表.docx

    java毕设项目之ssm校园美食交流系统+vue(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

    功能完善的小说CMS系统项目全套技术资料.zip

    功能完善的小说CMS系统项目全套技术资料.zip

    YOLO算法-回收站数据集-501张图像带标签-黑色垃圾箱-绿色垃圾桶-箱子-杯子-老鼠-蓝色垃圾桶.zip

    YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;

    java毕设项目之ssm助学贷款+jsp(完整前后端+说明文档+mysql+lw).zip

    项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

    (3127654)超级玛丽游戏源码下载

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    hw06.zip

    hw06

    基于 C++和TCP和WebSocket的即时通信系统设计与实现(源码+文档)

    这个项目是使用C++实现的即时通信系统,具有高性能、高并发的特点,项目包括客户端和服务器,实现了以下功能:注册、登录、点对点聊、群聊、上下线通知、用户在线信息、拉取好友信息、拉取好友分组信息、拉取群信息、拉取群成员信息;使用到的语言包括C++、Node.js;开源库:Boost C++ Libraries、Openssl、Protobuf、Hiredis、Socket.io;相关开发工具:Redis、Sqlite、Nginx、Microsoft Visual Studio、Visio;

    医疗设备管理-JAVA-基于springboot的医疗设备管理系统设计与实现(毕业论文)

    医疗设备管理功能描述 医疗设备管理系统的主要目的是为医院和医疗机构提供高效的设备管理解决方案,确保医疗设备的安全、有效和高效使用。以下是该系统可能具备的功能描述: 1. 设备信息管理 设备登记:记录所有医疗设备的基本信息,包括设备名称、型号、序列号、生产厂家、购置日期等。 设备分类:将设备按类型(如影像设备、监护设备、实验室设备等)进行分类,方便查询和管理。 设备状态跟踪:实时更新设备的使用状态(如在用、维修中、闲置等),确保信息准确。 2. 设备维护管理 维护计划:制定设备的定期维护计划,设置维护周期和提醒通知。 维护记录:记录每次设备维护的详细信息,包括维护日期、维护内容、维护人员等。 故障报告:提供故障报告功能,用户可以快速记录设备故障并提交给维护人员。 3. 设备使用管理 使用申请:医务人员可以在线申请使用特定设备,系统自动记录申请信息。 使用记录:记录设备的使用情况,包括使用时间、使用人员、使用目的等,便于后续查询。 使用统计:生成设备使用统计报表,分析设备的使用频率和效率。 4. 库存管理 库存监控:实时监控医疗设备的库存情况,确保设备充足。 设备采购管理:记录设备采购

Global site tag (gtag.js) - Google Analytics