账号通
    

注册

找回密码

账号  

密码  

话题
互动
会员
服务
<<返回列表上一个主题 下一个主题 打印本帖 复制本帖地址

9234

查看

9

回复
主题：[分享]jQuery图片漂浮插件 就是某个层在屏幕上弹啊弹的，各大清理广告软件都清不掉的哦！ [收藏主题] 转到：  
licaifuwu 当前离线

653

主题

10

广播

17

粉丝
添加关注
级别:六年级

用户积分:1585 分
登录次数:361 次
注册时间:2010/11/19
最后登录:2019/5/7
licaifuwu 发表于：2011/1/26 16:42:26   | 显示全部帖子 查看该作者主题 楼主 
做考试题库 就用#科汛在线考试系统!

jQuery图片漂浮插件 就是某个层在屏幕上弹啊弹的，各大清理广告软件都清不掉的哦！

以下是代码：（自己封装js）

  1. /*
  2. *   jQuery Plugins imgFloat v1011
  3. * 使用说明：
  4. *   speed //元素移动速度
  5. *   xPos  //元素一开始左距离
  6. *   yPos  //元素一开始上距离
  7. *   $('#div1').imgFloat({speed:30,xPos:10,yPos:10});  
  8. *   $('#div2').imgFloat();   //不给参数默认（speed:10,xPos:0,yPos:0）                     
  9. */

  10. (function($) {

  11.     jQuery.fn.imgFloat = function(options) {
  12.         var own = this;
  13.         var xD = 0;
  14.         var yD = 0;
  15.         var i = 1;
  16.         var settings = {
  17.             speed: 10,
  18.             xPos: 0,
  19.             yPos: 0
  20.         };
  21.         jQuery.extend(settings, options);
  22.         var ownTop = settings.xPos;
  23.         var ownLeft = settings.yPos;
  24.         own.css({
  25.             position: "absolute",
  26.             cursor: "pointer"
  27.         });
  28.         function imgPosition() {
  29.             var winWidth = $(window).width() - own.width();
  30.             var winHeight = $(window).height() - own.height();
  31.             if (xD == 0) {
  32.                 ownLeft += i;
  33.                 own.css({
  34.                     left: ownLeft
  35.                 });
  36.                 if (ownLeft >= winWidth) {
  37.                     ownLeft = winWidth;
  38.                     xD = 1;
  39.                 }
  40.             }
  41.             if (xD == 1) {
  42.                 ownLeft -= i;
  43.                 own.css({
  44.                     left: ownLeft
  45.                 });
  46.                 if (ownLeft <= 0) xD = 0;
  47.             }
  48.             if (yD == 0) {
  49.                 ownTop += i;
  50.                 own.css({
  51.                     top: ownTop
  52.                 });
  53.                 if (ownTop >= winHeight) {
  54.                     ownTop = winHeight;
  55.                     yD = 1;
  56.                 }
  57.             }
  58.             if (yD == 1) {
  59.                 ownTop -= i;
  60.                 own.css({
  61.                     top: ownTop
  62.                 });
  63.                 if (ownTop <= 0) yD = 0;
  64.             }
  65.         }
  66.         var imgHover = setInterval(imgPosition, settings.speed);
  67.         own.hover(function() {
  68.             clearInterval(imgHover);
  69.         },
  70.         function() {
  71.             imgHover = setInterval(imgPosition, settings.speed);
  72.         });
  73.     }
  74. })(jQuery);



神呐



应用到图片上

html

<div id=img><img src="1.jpg"></div> 或者<img id=img src="1.jpg">

js

  $('#img).imgFloat({speed:30,xPos:10,yPos:10});  

$('#img).imgFloat();   //不给参数默认（speed:10,xPos:0,yPos:0）   



前提是要加jq库和上的代码 如果不清楚jq用法的可以站内信 或者百度
 
有课程 找生源 就上科汛课堂街
  支持(33) | 反对(32) 回到顶部顶端 回到底部底部
licaifuwu 当前离线

653

主题

10

广播

17

粉丝
添加关注
级别:六年级

用户积分:1585 分
登录次数:361 次
注册时间:2010/11/19
最后登录:2019/5/7
licaifuwu 发表于：2011/4/1 19:52:08   | 显示全部帖子 查看该作者主题 沙发 
科汛智能建站系统
做考试题库 就用#科汛在线考试系统!

好多人都不懂啊

大家多多学习jq啊 一起成长
 

科讯cms[/backcolor][/color][/url]web前端技术[/url] www.webx32.com[/url] [/color] 科讯有问必答QQ群 17478244（VIP高级群）[/color][/size][/align]

一分钟快速开通线上知识店铺
  支持(19) | 反对(19) 回到顶部顶端 回到底部底部
＜上一主题 | 下一主题 ＞
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.10938秒 powered by KesionCMS 9.0