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

一、图片跟随鼠标移动

　　1、要求：鼠标移动到哪，图片就要跟到哪

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

二、五角星评分案例

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

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

　　3、具体代码：

时间： 2024-10-12 19:42:07

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例的相关文章

图片跟随鼠标移动

关键点: 1.图片采用绝对定位 2.事件:mousemove 3.偏移距离 offset(), .offset().left | .offset().top $("#mem-box-mouse").css({ "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动,判断图片在背景区域内的位置鼠标位置-背景框相对于页面的距离:mouseX - offset().left, "top":

图片跟随鼠标移动（精简版跨浏览器实现）

网上看到许多让图片跟随鼠标移动,感觉代码很复杂,还不兼容,其实可以很简单的实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="

Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

JS 图片跟随鼠标移动案例

css代码 1 img { 2 position: absolute; 3 /* top: 2px; */ 4 width: 50px; 5 height: 50px; 6 } HTML代码 <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt=""> js代码 1 <script> 2 var pic = document.querySelector('

Jquery学习笔记（2）--五角星评分

网购五星评分模拟: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.js"></script> 7

js图片跟随鼠标移动

<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/> <img id="hh"src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" al

图片跟随鼠标

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 7 img{ 8 position: absolute; 9 } 10 </style> 11 </head> 12 <body> 13 <img src="img/ts.gif"

五角星评分小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff3100; } .comment li { float: lef

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板特效插件源码下载酷站欣赏建站资源建站教程心境之旅在线留言设为首页加入收藏我要投稿联系站长 Search 首页 PSD模板 CSS模板特效插件源码下载酷站欣赏建站资源建站教程心境之旅在线留言滚动图片广告特效选项卡特效鼠标特效表单按钮表格图层窗口特效文字特效色彩特效图像特效日期特效导航菜单在线客服当前位置:模板网首页 > 特效插件 > 导航菜单 > jQuery背景跟随鼠标移正文 jQuery背景跟