一、图片跟随鼠标移动

　　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. Windows服务的安装、卸载

    创建一个Windows服务 http://jingyan.baidu.com/article/fa4125acb71a8628ac709226.html 安装服务 使用FramWork框架自带的Ins ...

  2. 008-mac下apache tomcat 测试授权

    一.下载 下载合适版本即可zip包 2.对bin下的*.sh授权 chmod 755 *.sh 3.80端口 https://blog.csdn.net/ilovesmj/article/detail ...

  3. DOM简介

    什么是DOM? DOM 是 Document Object Model(文档对象模型)的缩写. W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容. ...

  4. linux系统压缩\解压命令详解

    转自:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html. tar -c: 建立压缩档案-x:解压-t:查看内容-r:向 ...

  5. UVA10954:Add All(优先队列）

    题目:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/O 题目需求:在数组中拿出两个数相加,再把结果放回数组中再 ...

  6. appium 中手势密码的定位坐标

    原文地址http://www.cnblogs.com/smallTestKK/p/5408143.html 1.press方法中的坐标为绝对坐标,moveTO方法中的坐标都是相对坐标,具体来说第一个m ...

  7. Vmwaretools

    先下载Vmwaretools  这一步是设置ubuntu的超级用户root的密码我设置为dong  转换为root用户操作 执行 perl程序 然后就是一路Enter,开始关机重启就行了 来自为知笔记 ...

  8. Using RUNDLL32.exe to call a function within a dll

    Using RUNDLL32.exe to call a function within a dll        Rundll32 is a utility included with Window ...

  9. 将jar包发布到nexus仓库

    版本的快速迭代不适合release发布到仓库,snapshot方便版本的快速迭代. 1.pom改为snapshot <dependency> <groupId>com.sf.c ...

  10. CodeChef - COUNTARI Arithmetic Progressions (FFT)

    题意:求一个序列中,有多少三元组$(i,j,k)i<j<k $ 满足\(A_i + A_k = 2*A_i\) 构成等差数列. https://www.cnblogs.com/xiuwen ...