jquery 感應滑鼠移動的文字3d滾動效果

admin發表於2017-04-01
jQuery3D

本章節分享一段程式碼例項，它是通過jquery實現的文字3d滾動效果。

並且此滾動效果能夠感應滑鼠的指標的移動方向實現滾動方向的改變效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-family:Arial, "MS Trebuchet", sans-serif;
  background-color:#111;
}
#list{
  margin:0 auto;
  height:600px;
  width:600px;
  overflow:hidden;
  position:relative;
  background-color:#000;
}
#list ul, #list li{
  list-style:none;
  margin:0;
  padding:0;
}
#list a{
  position:absolute;
  text-decoration:none;
  color:#666;
}
#list a:hover{
  color:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   var element = $('#list a');;
   var offset = 0; 
   var stepping = 0.03;
   var list = $('#list');
   var $list = $(list)
   $list.mousemove(function(e){
     var topOfList = $list.eq(0).offset().top
     var listHeight = $list.height()
     stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
  });
  for (var i = element.length - 1; i >= 0; i--){
    element[i].elemAngle = i * Math.PI * 2 / element.length;
  }
  setInterval(render, 20);
  function render(){
    for (var i = element.length - 1; i >= 0; i--){
      var angle = element[i].elemAngle + offset;
      x = 120 + Math.sin(angle) * 30;
      y = 45 + Math.cos(angle) * 40;
      size = Math.round(40 - Math.sin(angle) * 40);
      var elementCenter = $(element[i]).width() / 2;
      var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
      $(element[i]).css("fontSize", size + "pt");
      $(element[i]).css("opacity",size/100);
      $(element[i]).css("zIndex" ,size);
      $(element[i]).css("left" ,leftValue);
      $(element[i]).css("top", y + "%");
    }
    offset += stepping;
  }
});
</script>
</head>
<body>
<div id="list">
  <ul>
    <li><a href="#">ajax</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">softwhy.com</a></li>
    <li><a href="#">螞蟻部落</a></li>
    <li><a href="#">antzone</a></li>
    <li><a href="#">html</a></li>
    <li><a href="#">Devirtuoso</a></li>
    <li><a href="#">jquery</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">SEO</a></li>
    <li><a href="#">usability</a></li>
    <li><a href="#">www</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">xhtml</a></li>
  </ul>
</div>
</body>
</html>


相關文章