一、图片跟随鼠标移动

　　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学习笔记（二十四）继承与封装

    继承(extends)就是把多个类中相同的成员给提取出来定义到一个独立的类中,然后让这多个类和该独立的类产生一个关系,这多个类就具备了这些类容,这个关系就叫做继承. 实现继承的类称为子类,也叫派生类, ...

  2. 模块讲解----shutil模块（copy、压缩、解压）

    作用与功能 主要用于文件的copy,压缩,解压 导入shuitl模块: import shutil copy方法 1.shutil.copyfileobj()  打开file1,并copy写入file ...

  3. iOS学习之HelloWorld工程

    本文应读者要求,主要简介使用Xcode创建一个“HelloWorld”工程. 1.打开Xcode,点击新建工程 选择工程类型 2.填写工程信息 3.代码简介 // // main.m // hello ...

  4. CentOS忘记用户名或者密码解决办法

    方法一:如果用户名和密码都忘记了,可以用以下这个方法找回:(和第二种大步骤差不多,需注意3,4步) 1. 在出现grub画面时,用上下键选中你平时启动linux的那一项,然后按e键 2. 再次用上下键 ...

  5. OS X 10.9 Mavericks下如何安装Command Line Tools(命令行工具)

    OS X 10.9 Mavericks下如何安装Command Line Tools(命令行工具) 今天OS X 10.9 Mavericks正式发布,免费更新,立即去更新看看效果. 不过升级后安装命 ...

  6. 列表中相同key的字典相加

    # 怎么把列表中相同key的字典相加,也就是id的值加id的值,doc_count的值加doc_count的值 # 目标列表 l=[{'id': 5, 'doc_count': 129}, {'id' ...

  7. PKU 2513 Colored Sticks(并查集+Trie树+欧拉路径(回路))

    题目大意: 给定一些木棒,木棒两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相连接的一端必须是同颜色的. 解题思路: 可以用图论中欧拉路的知识来解这道题,首先可以把木棒两端看成节点 ...

  8. XDU 1109

    #include<stdio.h> #define N 10007 #define maxn 1000005 int dp[maxn]; int main() { dp[]=,dp[]=, ...

  9. $Python技巧大全

    知乎上有一个问题:Python 有什么奇技淫巧?其中有各种不按套路出牌的招数,也不乏一些惊为天人的"奇技淫巧",会让你大呼:居然还有这种操作??? 本文就是对日常使用过的或者觉得很 ...

  10. netbeans通过wsdl生成webservice的UTF8问题

    在netbeans通过wsdl方式生成的webservice,打开类文件时,提示无法通过UTF-8打开. 这是因为默认生成的文件不是UTF-8格式的,解决方案如下: 1.打开netbeans的安装目录 ...