pc软件 文章资讯 手机软件
您当前的位置→图文中心网站专题网站建设jQuery实现鼠标跟随效果
阅读排行
  1. JS使用ActiveXObject实现用户提交...
  2. 找网站建设公司要注意低价陷阱
  3. 80端口被占用导致Apache启动失败...
  4. 知名主机商Linode被关键字屏蔽
  5. 为什么现在做论坛的都选择香港的...
  6. 如何建设SEO优化一个全新的网站
  7. windows 7下FTP服务器构建教程
  8. 网站链接分析工具
  9. ASP 、PHP、JSP三者都是面向Web服...
  10. 开放分类目录DMOZ永久关闭
  11. php获取给定日期相差天数的方法分...
  12. Bootstrap jquery.twbsPaginatio...
  13. html CSS让边框发光 代码
  14. CDN的选择
  15. 虚拟主机上的网站备份方法

jQuery实现鼠标跟随效果


2017/2/20  编辑:admin 来源:本站整理
所谓鼠标跟随, 一般就是指鼠标移到哪张图片上, 那该张图片的放大图片就会出现, 并且放大图片会随着鼠标在该张图片上移动而移动。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } img{ border:none; } .box{ width:660px; position: relative; } .box .mark{ position: absolute; width: 400px; height: 300px; display: none; } .box .mark img{ width: 100%; } .box img{ width: 150px; float: left; margin:5px; } </style></head><body><div class="box" id="box"> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e95708d565639d99576ae7cb00729334" realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5328802dc943fc046e109f70359add0a" alt=""/> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=9e5459a7c0098c27adf4bdd73889caa9" realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=846f4d1987765dc4cfd5a06fcdd2dcc1" alt=""/> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3cd1c8e301007f0c94850139ac79cb5a" realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=747bf3f7092ebd2b0bf9fcd27e28bbe5" alt=""/> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=f391169b2cf678aa6fd253cf40d9821d" realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=fec8d2f20fad1f28d540337a831e89d0" alt=""/> <div id="mark" class="mark"><img src="" alt=""/></div></div><script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script><script> //1.鼠标移入哪张图片的时候, 让他对应的大图显示; //2.当鼠标在img中移动的时候, 大图跟着走; var $box=$('.box'); var $aImg=$box.children('img'); var $mark=$('.mark'); var $offset=$box.offset(); $aImg.mouseover(function(){ //当鼠标移入每张图片的时候, 让mark显示, 并且, 让mark里面的img标签, src属性值为当前这个图片的realImg属性上拿到的值; $mark.show().find('img').attr('src',$(this).attr('realImg')); }); $aImg.mousemove(function(e){ //拿鼠标的x坐标, 减去$box距离body的left位置; var left= e.clientX-$offset.left+10; var top= e.clientY-$offset.top+10; $mark.css({left:left,top:top}) }); $aImg.mouseout(function(){ $mark.hide(); })</script></body></html>

相关文章

Bootstrap jquery.twbsPagination.js动态页码分页实例代码:Bootstrap风格的分页控件自适应的:参考网址:分页参考文档1.风格样式:2.首先引入js文件jQuery.twbsPagination.js<spanstyle="font-size:14px;"><scripttype="text/...。 华硕笔记本N82JQ安装XP驱动包以后摄像头倒立:这个问题是普遍的,都会倒置的,没办法的,官方的问题  如果要解决就装win7吧,win7下是正常的! 。
发表评论
网站帮助 - 广告合作 - 下载声明 - 网站地图
88lifa