一、图片跟随鼠标移动

　　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. centos下apache安装

    ./configure --prefix=/usr/local/apache2 --enable-so --enable-proxy --enable-proxy-connect --enable-p ...

  2. HTML容易遗忘内容（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  3. C++入门（1）

    #include<>直接从编译器自带的函数库中寻找文件 #include""是先从自定义的文件中找 ,如果找不到在从函数库中寻找文件 采用"< > ...

  4. facebook工具xhprof的安装与使用-分析php执行性能(转载)

    下载源码包的网址 http://pecl.php.net/package/xhprof

  5. UVA10905: Children's Game（排序）

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/A 题目需求:,给n个数字,将它们重新排序得到一个最大的数 ...

  6. （转）extern关键字两种场景的使用

    第一种场景 -- extern extern关键字的作用是声明变量和函数为外部链接,即该变量或函数名在其它文件中可见.用其声明的变量或函数应该在别的文件或同一文件的其它地方定义. 例如语句:exter ...

  7. （转 ）C++ static、const和static const 以及它们的初始化

    const定义的常量在函数执行之后其空间会被释放,而static定义的静态常量在函数执行后不会被释放其空间.但不论是Const还是static  他们定义的内容都会随着程序的结束而被系统清楚. sta ...

  8. PKU 1094 Sorting It All Out(拓扑排序)

    题目大意:就是给定一组字母的大小关系判断他们是否能组成唯一的拓扑序列. 是典型的拓扑排序,但输出格式上确有三种形式: 1.该字母序列有序,并依次输出: 2.判断该序列是否唯一: 3.该序列字母次序之间 ...

  9. Git-基本操作（同SVN）

    本人拜读了廖雪峰老师关于Git的讲述后整理所得 1.创建版本库: 版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删 ...

  10. IDEA 程序直接运行分析

    今天用IDEA运行SpringBoot程序,启动时始终报错说读取不到datasource的url配置. 分析代码的resources目录,是有配置文件的,配置也是正常的.如下图: 后来经人指点,是因为 ...