一、图片跟随鼠标移动

　　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. NoSQL文章

    MongoDB Bugsnag的MongoDB分片集群使用经验

  2. 小技巧-如何加快github下载代码的速度（转）

    作为开发人员,github是大家的标配了,常常会苦恼于gitclone某个项目的时候速度太慢,看着控制台那几K十几K的龟速,吐血!! 原因很简单:github的CDN被伟大的墙屏蔽所致. 所以解决方案 ...

  3. C#建WindowForm调用R可视化

    众所周知R软件功能非常强大,可以很好的进行各类统计,并能输出图形.下面介绍一种R语言和C#进行通信的方法,并将R绘图结果显示到WinForm UI界面上的方法,文中介绍的很详细,需要的朋友可以参考下. ...

  4. 使用paramiko执行远程linux主机命令

    paramiko是python的SSH库,可用来连接远程linux主机,然后执行linux命令或者通过SFTP传输文件. 关于使用paramiko执行远程主机命令可以找到很多参考资料了,本文在此基础上 ...

  5. visual studio 2015开发nodejs教程1搭建环境

    http://sailsdoc.swift.ren/ 这里有 sails中文文档 1 安装nodejsv6.10.3 下载地址  https://nodejs.org/dist/v6.10.3/nod ...

  6. Spark SQL中UDF和UDAF

    转载自:https://blog.csdn.net/u012297062/article/details/52227909 UDF: User Defined Function,用户自定义的函数,函数 ...

  7. Vim step by step

    @1: VIM中非常迷人的功能: D------->从当前位置开始删除,直到当前行结束 cw------->修改游标所在的单词,修改范围从游标位置到单词结尾. 一个替换一个用r,一个替换多 ...

  8. java通过URL获取文本内容

    原文地址https://www.cnblogs.com/myadmin/p/7634262.html public static String readFileByUrl(String urlStr) ...

  9. django【F和Q】

    一.F 案例每人增加500工资 ORM:UserInfo.objects.filter().update(salary=500) 这不行吧 SQL: update userinfo set salar ...

  10. SQL Server 数据分页查询

    最近学习了一下SQL的分页查询,总结了以下几种方法. 首先建立了一个表,随意插入的一些测试数据,表结构和数据如下图: 现在假设我们要做的是每页5条数据,而现在我们要取第三页的数据.(数据太少,就每页5 ...