JavaScript和jQuery制作光棒效果

2024-11-30 19:25:25

使用javaScript与jQuery添加CSS样式的区别和步骤

使用javaScript制作光棒效果

--首先是javaScript

<script>
    $(function () {
      var lis = document.getElementsByTagName("li"); //定义DOM变量接受标签为li的元素
      for (var i = 0; i < lis.length;i++){
        lis[i].onmouseover = function () {
          //方式一
          //this.style.backGround = "pink";   //1，注意这里只能使用this方法作为for循环当前遍历项
          //this.style.fontSize = "50px";   //2，同样style之后的追加的样式命名只能用骆驼命名法
          //方式二
          this.style.cssText = "background-color:red;font-size:50px";
        };
        lis[i].onmouseout = function () {
          //方式一
          //this.style.background = "";
          //this.style.fontSize = "20px";
          //方式二
          this.style.cssText = "background-color:;font-size:20px";
        }
      }
    });
  </script>

两种方式相比相对来说：.cssText比较简便

使用jQuery制作光棒效果

 <script>
    $(function () {
      $("li").hover(function () {                  //这里调用复合事件 模拟鼠标悬停事件
        $(this).css({"background-color": "red","font-size":"50px"});
      },
      function () {
        $(this).css({ "background-color": "", "font-size": "20px" });  //直接追加CSS样式
      }
      );
    });
  </script>

相对于javaScript jQuer代码更灵活，简便一些，（jQuery中有自动遍历效果，所有省了循环）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

Asp.net GridView隔行变色和光棒效果2种方法实现

方法一:前台和后台配合使用 1.aspx 隔行变色属性(<AlternatingRowStyle BackColor="#f5f5f5" />) 复制代码代码如下: <asp:GridView ID="gvProjectList" runat="server" OnRowCreated="gvProjectList_RowCreated"> <AlternatingRowStyle BackCo
asp.net下让Gridview鼠标滑过光棒变色效果

复制代码代码如下: //光棒效果 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.back
asp.net 光棒效应实现代码

复制代码代码如下: protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "javascript:currentcolor=this.style.backgroundColor;this.style.
JavaScript和jQuery制作光棒效果

使用javaScript与jQuery添加CSS样式的区别和步骤使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { var lis = document.getElementsByTagName("li"); //定义DOM变量接受标签为li的元素 for (var i = 0; i < lis.length;i++){ lis[i].onmouseover = function () { //方式
JavaScript+html5 canvas制作的百花齐放效果完整实例

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra
JavaScript+html5 canvas制作色彩斑斓的正方形效果

本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去. 看起来动画效果还是比较cool的,如果加上了处理后的效果更佳: 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script sr
jQuery制作效果超棒的手风琴折叠菜单

拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进演示图: main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');
JavaScript+html5 canvas制作的圆中圆效果实例

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar
JavaScript与jQuery实现的闪烁输入效果

本文实例讲述了JavaScript与jQuery实现的闪烁输入效果.分享给大家供大家参考,具体如下: html部分 <div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-14,I want to say:<br /> Baby, I love you forever
Javascript基于jQuery UI实现选中区域拖拽效果

一.效果展示普通的三个div 鼠标拖动选中效果选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

JavaScript和jQuery制作光棒效果

相关推荐

随机推荐