鼠标悬停位移效果+点击提示

2018年6月12日14:00:59 4 287

今天给大家分享,怎么来让链接实现鼠标悬停位移效果。
效果图就不上了,直接在本站首页验证就行了。
上代码

  1. //标题抖动
  2. jQuery(document).ready(function($) {
  3.     $(".list-title a, .entry-title a, .new-title a, .message-widget a, .flexisel-h-title a, .li-icon a").hover(function() {
  4.         $(this).stop().animate({
  5.             //.list-title a, 改成你标题的样式名称,可以应用多个链接,用英文逗号隔开
  6.             "marginLeft""15px"
  7.         }, 300)
  8.     }, function() {
  9.         $(this).stop().animate({
  10.             "marginLeft""0px"
  11.         }, 300)
  12.     });
  13.     $(".list-title a, .entry-title a, .new-title a, .message-widget a, .flexisel-h-title a, .li-icon a").click(function() {
  14.         myloadoriginal = this.text;
  15.         $(this).text("正在努力加载中 …");
  16.         //点击后的链接会替换成如上文字,可自由修改。
  17.         var myload = this;
  18.         setTimeout(function() {
  19.             $(myload).text(myloadoriginal)
  20.         }, 2011)
  21.     })
  22. });


然后就是加入到主题的JS文件里面

weinxin
我的微信
这是我的微信扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar 寝室 来自天朝的朋友 搜狗浏览器 Windows 7江西省萍乡市 电信 3

      具体加在哪个js文件呢

      • avatar 墨涵 来自天朝的朋友 火狐浏览器 Linux 江西省赣州市 电信 0

        请问怎么使用,有好多一个JS文件诶

        • avatar 热腾网 来自天朝的朋友 搜狗浏览器 Windows 7河北省石家庄市 电信 4

          现在我比较喜欢简单简洁的界面。

            • avatar 堆爱博客 博主 来自天朝的朋友 QQ浏览器  Android 8.1.0 OPPO R11 Plus Build/OPM1.171019.011 贵州省铜仁地区 电信

              @热腾网 你们是专业的,做内容,有目标。我只是觉得好玩。不能比啊! :???: :???: