码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

时间:2017-06-29 11:21:36      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:代码   逻辑   移动   doc   event   修改   获取   nextall   事件   

一、图片跟随鼠标移动

  1、要求:鼠标移动到哪,图片就要跟到哪

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

二、五角星评分案例

技术分享

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

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

技术分享

  3、具体代码:

技术分享

 

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

标签:代码   逻辑   移动   doc   event   修改   获取   nextall   事件   

原文地址:http://www.cnblogs.com/carriezhao/p/7093206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!