一、图片跟随鼠标移动

　　1、要求：鼠标移动到哪，图片就要跟到哪

　　2、用到的事件：首先监听鼠标：$(document).mousemove(function(event){ }); //此时可以获取鼠标距离页面左侧、顶部的距离通过event.pageX、event.pageY，然后通过修改图片的left、top值即可。

二、五角星评分案例

　　1、如图：业务逻辑：①鼠标移入某颗星时，这颗及之前的都变实心；②未点击，移开评分区，所有星变空心；③点击，移开评分区，点击过的星及之前的变实心

　　2、用到的方法：end()，end()方法的用法，实例解释：如下图，在这个链式编程中end()表示prevAll()业务的结束，同时nextAll()指的是$(this)的nextAll()

　　3、具体代码：

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例的更多相关文章

  1. js 图片跟随鼠标移动效果 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  3. JS 图片跟随鼠标移动案例

    css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...

  4. Jquery学习笔记（2）--五角星评分

    网购五星评分模拟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  6. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

  7. js图片跟随鼠标移动

    <div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/ ...

  8. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  9. jQuery---五角星评分案例

    五角星评分案例 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心.当前位置后面的是空心.注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星.额外,找 ...

随机推荐

  1. python常见模块之random模块

    import random print(random.random()) #随机产生一个0-1之间的小数 print(random.randint(1,3)) #随机产生一个1-3之间的整数,包括1和 ...

  2. 前端之masonry（图片瀑布流插件）

    加载代码: 1 2 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script ...

  3. 类的super

    我们经常在类的继承当中使用super(), 来调用父类中的方法.例如下面: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 class A:     def func(self):   ...

  4. maven加载第三方jar包

    <dependency> <groupId>com.yeepay</groupId> <artifactId>yop-sdk</artifactI ...

  5. python web框架 django 工程 创建 目录介绍

    # 创建Django工程django-admin startproject [工程名称] 默认创建django 项目都会自带这些东西 django setting 配置文件 django可以配置缓存 ...

  6. How to store scaling parameters for later use

    you can use sklearn's built-in tool: from sklearn.externals import joblib scaler_filename = "sc ...

  7. PHP 基础篇 - PHP 的 BC MATH 系列数学函数

    一.常见问题 用 PHP 做计算时经常会遇到精度带来的问题,下面来看两个常见的例子: 1. 运算比较 下面表达式输出的结果不是相等: <?php echo 2.01 - 0.01 == 2 ? ...

  8. 百度NLP二面

    实验室项目:1.实验室方向 2.用两分钟介绍自己的项目,创新点在哪里 个人项目:     1.自己实现的贝叶斯分类器,目的,怎么做的 2.怎么计算各个分类的先验.(因为我使用的训练预料是每个分类10篇 ...

  9. php 通过http user-agent判断是否为手机浏览器

    <?php/*** 判断是否是通过手机访问* @return bool 是否是移动设备    */public function isMobile() {  //判断手机发送的客户端标志  if ...

  10. hdu6208 The Dominator of Strings

    地址: 题目: The Dominator of Strings Time Limit: 3000/3000 MS (Java/Others)    Memory Limit: 65535/32768 ...