JQuery图片跟随鼠标移动

JQuery部分

<script src="Scripts/jquery-1.11.3.js"></script><script type="text/javascript">$(function () {//不可更改状态$("[name = btn_time]").attr("disabled", true);//定时器var time = setInterval(function () {if ($("[name = btn_time]").val() == "1") {$("[name = btn_time]").val("午时已到");$("[name = btn_time]").attr("disabled", false);clearInterval(time); //取消定时器}else {$("[name = btn_time]").val($("[name = btn_time]").val() * 1 - 1);//每秒-1}}, 1000);//鼠标移动触发事件$("body").mousemove(function (event) {$(".img1").css({ "left": event.pageX, "top": event.pageY, "position": "absolute" });});$(".img2").mousemove(function (event) {$("#div3").css({ "background-size": "100%", "background-image": "url('" + $(this).attr("src") + "')", "left": event.pageX, "top": event.pageY, "position": "absolute" });});$(".img2").mouseout(function () {$("#div3").css("background-image", "");});//隐藏div$("#div4").hide();//点击事件$("[name = btn_picture]").on("click", function () {//显示$("#div4").show();var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };//遍历$.each(userFaces, function (index, dom) {//添加图片 index：图片路径 dom：文本$("#div4").append("<img class='img3' src='faces/" + index + "' alt='" + dom + "'width='25px' />");})//弹出$(".img3").on("click", function () {alert($(this).attr("alt"));});});});</script>

CSS部分

<style>.img1 {width: 180px;height: 100px;}#div3 {width: 400px;height: 200px;}#div2 img {width: 400px;height: 200px;}#div4 {width: 400px;border:1px solid black;}</style>

HTML部分

<body><input type="button" name="btn_time" value="5" /><br /><div id="div1"><img class="img1" src="imgs/img1.png" /></div><div id="div2"><img class="img2" src="imgs/img2.jpg" /><img class="img2" src="imgs/img3.jpg" /></div><div id="div3"></div><br /><br /><input type="button" name="btn_picture" value="头像" /><div id="div4"></div></body>

JQuery图片跟随鼠标移动相关推荐

html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
实现图片跟随鼠标移动
下面代码可以实现图片跟随鼠标移动 <html> <head><meta charset="utf-8"><title></ti ...
图片跟随鼠标移动效果的抖动问题
场景图片跟随鼠标移动效果的实现思路: 触发mousemove事件响应时,通过e.offsetX,e.offsetY获取到当前鼠标的位置.再修改图片的css样式中的top, left属性(图片采用绝对 ...
图片跟随鼠标移动案例
文献种类:专题技术总结文献开发工具与关键技术: DW前端技术作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日文献编号: ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
设置图片跟随鼠标移动
案例介绍 1.鼠标不断移动,使用鼠标移动事件:mousemove 2.在页面中移动,给document注册事件 3.图片要移动距离,而且不占位置,我们使用绝对定位即可 4.核心原理:每次鼠标移动,我们 ...
js 图片跟随鼠标移动
叒叒叒是pink老师的课里讲了一个非常有意思的案例图片可以跟着鼠标移动主要是添加一个mousemove的监听事件实时获取鼠标的坐标同时改变图片的坐标 html <img src=&quo ...
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...

JQuery图片跟随鼠标移动

JQuery图片跟随鼠标移动相关推荐

最新文章

热门文章