jQuery+css3实现文字跟随鼠标的上下抖动


Posted in Javascript onJuly 31, 2015

css3过渡属性结合jq,如果直接复制代码运行,需要加载一个jquery文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m</title>
</head>
<style>
/* CSS 预设*/
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
ul{ list-style:none;}
body{ color:#222121; font-size:12px; font-family:"宋体"; background-color:#fefefe}
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
/*demo4*/
.demo{ margin:0 50px;}
.hover-list{ line-height:40px; width:500px;}
.hover-list li{ height:40px; border-bottom:1px solid #969; position:relative;}
.hover-list li a span{ width:12px; height:40px;cursor:pointer;transition:all .1s cubic-bezier(.06,1.15,1,1.4) 0s;}
.hover-list li a{ color:#39F; cursor:pointer;}
</style>
<body>
<div class="demo">
  <div class="wrapper box-con">    
    <ul class="hover-list">
      <li><a href="http://www.miaov.com/2013/#" target="_blank">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
      <li><a href="#2">大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎</a></li>
      <li><a href="#2">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
    </ul>
  </div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 
//demo
  //可以变化的参数
  var setccid=$(".hover-list");//设置ul的class,添加效果
  var setleft=12;//设置字与字之间的left值
  var setskip=10;//设置上下抖动值
   
  var hov=setccid.children("li");
  for(var i=0;i<hov.length;i++){
    var hovtext=hov.eq(i).find("a").html();
    var hovtextl=hovtext.length;
    //alert(hovtextl)
    var hovtexta=hovtext.split("");
    var arrys=[];
    for(var j=0;j<hovtexta.length;j++){
      arrys.push(hovtexta[j].replace(hovtexta[j],"<span>"+hovtexta[j]+"</span>"))
    };
    hov.eq(i).find("a").html(arrys);
    var hovtextspan=hov.eq(i).find("a").find("span").length;
    for(var z=0;z<hovtextspan;z++){
      hov.eq(i).find("a").find("span").eq(z).css({position:"absolute",top:"0px"});
      hov.eq(i).find("a").find("span").eq(z).css('left',z*setleft);
    }
  };
   
  setccid.children("li").find("a").children("span").hover(function(event){
    var sppz=$(this).index();
    var sppzp=$(this).parent().children("span");
    var sppzpl=$(this).parent().children("span").length;
    var sppy=$(this).offset().top;
    var ey=event.pageY;
    var chay=sppy+$(this).height()/2;
    var sppcony=$(this).position().top; 
    if(ey>=chay) {
      $(this).css('top',sppcony+setskip);
      var lla=sppcony+setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz-lla)>0?sppz-lla:0;    
      for(var xx=sppz+1;xx<=sppz+lla;xx++){
        llr=llr-1;
        sppzp.eq(xx).css('top',llr);   
      };
      for(var x=sppz-1;x>=teshu;x--){
        lll=lll-1;
        sppzp.eq(x).css('top',lll); 
      }; 
    }else{
      $(this).css('top',sppcony-setskip);
      var lla=sppcony-setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz+lla)>0?sppz+lla:0;
      for(var xxxx=sppz+1;xxxx<=sppz-lla;xxxx++){
        llr=llr+1;
        sppzp.eq(xxxx).css('top',llr);
      }; 
      for(var xxx=sppz-1;xxx>=teshu;xxx--){
        lll=lll+1;
        sppzp.eq(xxx).css('top',lll);
      };           
    }    
  },function(event){
    $(this).css('top',"0px");
    $(this).parent().children("span").css('top',"0px");
  });
//end    
});
</script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
基于bootstrap3和jquery的分页插件
Jul 31 #Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
You might like
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
JavaScript的Function详细
2006/11/14 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Pycharm更换python解释器的方法
2018/10/29 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python