1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>制作非缘勿扰页面特效 </title>
  6. <script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
  7. <style type="text/css">
  8. .main{
  9. width:500px;
  10. }
  11. .left{
  12. width:200px;
  13. float:left;
  14. }
  15. .right{
  16. width:300px;
  17. float:left;
  18. }
  19. </style>
  20.  
  21. <script type="text/javascript">
  22. $(document).ready(function(){
  23. $('dt').click(function(){
  24. $('strong').css("color","#FF0099");
  25. });
  26.  
  27. $(".dy").click(function(){
  28. $('.dy+span').css("font-weight","bold");
  29. });
  30.  
  31. $('#bq').click(function(){
  32. $("#bq+span>a:even").css("background-color", "#E0F8EA").css("color", "#10A14B").css("padding", "2px");
  33. });
  34.  
  35. $("img[alt='收藏本片']").click(function(){
  36. alert("您已收藏成功!");
  37. });
  38.  
  39. });
  40.  
  41. </script>
  42. </head>
  43. <body>
  44. <div class='main' >
  45. <div class='left'>
  46. <img src="data:images/pic.gif" />
  47. <br/><br/><br/><br/>
  48. <img src="data:images/col.gif" alt="收藏本片"/>
  49. </div>
  50. <div class='right'>
  51. <dl>
  52. <dt><b>非缘勿扰</b></dt>
  53. <dd>
  54. <p>
  55. <strong>主演:</strong><span>苏有朋/秦岚/傅艺伟等</span>
  56. </p>
  57. <p>
  58. <strong class='dy'>导演:</strong><span>赖水清</span>
  59. </p>
  60. <p>
  61. <strong id='bq'>标签:</strong><span><a>苏有朋</a> <a> 国产电视剧</a> <a>2013</a> <a>连续剧</a></span>
  62. </p>
  63. <p>
  64. <strong>剧情:</strong><span>当代都市,大年女刘林、杨阳都在寻找自己的如意郎君,刘林偶遇陆氏房地产总裁路西诺,两人成了欢喜冤家,遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多 </a></span>
  65. </p>
  66. </dd>
  67. </dl>
  68. <img src="data:images/btn.gif"/>
  69. </div>
  70. </div>
  71.  
  72. </body>
  73. </html>

制作非缘勿扰页面特效.html

jQuery - 制作非缘勿扰页面特效的更多相关文章

  1. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  2. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  4. 页面头部带loading进度指示的jQuery滚动页面特效

    这是一款非常有用且效果非常酷的jQuery页面头部带loading进度指示的滚动页面特效. 该特效在页面滚动的时候页面头部有Loading进度条指示当前页面滚动的位置,这能够让用户知道当前阅读的地方距 ...

  5. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  6. 使用jQuery快速高效制作网页交互特效---jQuery选择器

    一.什么是jQuery选择器 Query选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择, 而不必担心浏览器的兼容性,通过jQuery选择器对页 ...

  7. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  8. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  9. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

随机推荐

  1. ubuntu 安装redis以及phpredis

    一.安装redis 1. 去百度搜索 redis,然后去靠谱的地方下载最新的redisxxx.tar.gz 2. 解压后,sudo make 3. sudo make install 4. //安装完 ...

  2. Django用户认证系统

    一. 认证系统概要 create_user 创建用户 authenticate 验证登录 login 记住用户的登录状态 logout 退出登录 is_authenticated 判断用户是否登录 l ...

  3. 2017-5新版ionic3.1 新命令及一些常用命令

    ionic3.1的新命令: # ionic cordova --help //== 查看命令 # ionic cordova resources // 其中 icon.png (1024*1024) ...

  4. java实现搜索附近地点或人的功能

    前言 当前大多数app都有查找附近的功能, 简单的有查找周围的运动场馆, 复杂的有滴滴, 摩拜查找周围的车辆. 本文主要阐述查找附近地点的一般实现. 方案比较 方案1 (性能还不错) 数据库直接存经纬 ...

  5. Web 服务器与应用服务器的区别是什么?

    不太严谨的说法:web服务器就是负责接收用户的Request,然后响应html等给客户浏览器.应用服务器处理一些业务逻辑等. 作者:luo链接:https://www.zhihu.com/questi ...

  6. css页面布局总结

    W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...

  7. 简述prototype, _proto_, constructor三者的关系

    1.prototype 感概:每个函数都有一个prototype这个属性,而这个属性指向一个对象,这个对象称为原型对象 作用: a.节约内存 b.扩展属性和方法 c.实现类与类的之间的继承 2._pr ...

  8. svn 使用TortoiseSVN server搭建本地SVN服务器

    使用TortoiseSVN server搭建本地SVN服务器

  9. 03.requests模块(1)

    目录 03.requests模块(1) 展开requests模块的学习 代码实例 需求:爬取搜狗指定词条搜索后的页面数据 需求:登录豆瓣电影,爬取登录成功后的页面数据 需求:爬取豆瓣电影分类排行榜 h ...

  10. 一个电商项目的Web服务化改造

    一个电商项目的Web服务化改造 项目,早期是随便瞎做的,没啥架构,连基本的设计也没. 有需求,实现需求,再反复修改. 大致就是这么做的. 最近,项目要重新架构,和某boss协商的结果是,采用阿里开源的 ...