jquery实现仿商品星级评价

一,HTML部分 <div id="rating-star"> <a href="#">0</a> <a href="#">1</a> <a href="#">2</a> <input type="hidden" id="goodLevel" /> </d…

说明: 本方法采用了Jquery库,暂时检测兼容IE8版本.本示例的2种颜色的星星都是放入了一张png图片当中,当然还有其他的一些实现思路.本示例展示的情况是当前页面只有一个星级评价的情况. 思路: 通过对星级显示元素的,mouseenter,mouseout,click 三个事件的监听,从而星星显示的个数.其中我用了2个变量(temp_value,choice_value)来存放当前选定星级的值和当前临时的星级值: temp_value : 临时的星级值: choice_value : 选择的…

iOS：自己写的一个星级评价的小Demo

重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a simple tool of star evaluation 一个简单的星级评价的工具简单调用: HYBStarEvaluationView *starView = [[HYBStarEvaluationView alloc]initWithFrame:CGRectMake(, , , ) nu…

一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div…

jQuery精仿手机上的翻牌效果菜单

代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用时不会出现这种情况. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&…

Jquery实现仿腾讯微薄的广播发表

前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学习学习Jquery,支持我吧,呵呵,这几天的学习Jquey使我感觉到其实Jquery的使用并不是很难,就我感觉Jquery只要把选择器学的差不多,其他的基本都可以迎刃而解,多了解一些方法,事件等等.所以我在这里实现了一个Jquery实现仿腾讯微薄的广播发表. 1. 首先新建HTML页面和介绍我要实现…

jquery插件——仿新浪微博限制输入字数的textarea

内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery插件——仿新浪微博限制输入字数的textarea</title&g…

jquery 星级评价插件jquery Raty的使用

需要引入的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery.min.js"></script> <script type="text/javascript" src="<%=basePath%>resources/js/jquery.raty.js"></script&…

jQuery旋转木马仿3D效果的图片切换特效代码

用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗浏览器. 效果图: 下载预览…

[springboot 开发单体web shop] 8. 商品详情&评价展示

上文回顾上节我们实现了根据搜索关键词查询商品列表和根据商品分类查询,并且使用到了mybatis-pagehelper插件,讲解了如何使用插件来帮助我们快速实现分页数据查询.本文我们将继续开发商品详情页面和商品留言功能的开发. 需求分析关于商品详情页,和往常一样,我们先来看一看jd的示例: 从上面2张图,我们可以看出来,大体上需要展示给用户的信息.比如:商品图片,名称,价格,等等.在第二张图中,我们还可以看到有一个商品评价页签,这些都是我们本节要实现的内容. 商品详情开发梳理我们根据上图…

jQuery实现购物车商品数量及总价的计算

记录一下项目中遇到的计算购物车商品数量和总价的jQuery代码,重点在于选择器以及.text()命令的使用. 先上效果图,点击加减,商品数量以及总价会发生相应变化. html代码: <div class="addGoods"> <div class="goods_list"> <ul> <li><img class="goods_img" src="../img/goods1.png…

jQuery css3仿游戏网站右键环形菜单

效果展示 http://hovertree.com/texiao/jquery/86/ PC用户右键弹出环形菜单. 手机用户扫描二维码: 长安可以弹出环形菜单. 转自:http://hovertree.com/h/bjaf/aht9w1n8.htm web前端特效:http://www.cnblogs.com/jihua/p/webfront.html…

JQuery实现仿sina新浪微博新鲜事滚动

<!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-…

用这个插件jquery.raty.js————用于星星评价（这个案例用于后台传数据给我，前台显示星星个数）

1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径…

jquery表格仿菜单

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <…

jquery实现仿select列表的即时搜索及拼音搜索

这里提到select,其实不是select,而是用<li><input>标签去仿造一个select,以实现对已有“option”的快速检索功能. 以<input>标签代替select的选择框,以<li>标签代替option标签.每个li标签附onclick触发js带参数的选取事件,所带参数即为option的value.<li>内附带显示text用的input标签,和隐藏的text的拼音input标签.思路就是这些. <!DOCTYPE HT…

jquery实现仿京东侧边栏

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>仿京东侧边栏</title> <style type="text/css"> *{ margin:0;padding:0; } ul{list-style: none;} .top,.dian,.jia,.fu,.mei,.b…

jQuery实现仿京东商城图片放大镜

效果图: 不废话直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> * { padding: 0; margin: 0; } ul{ position: relative; width: 500px; /*height: 500p…

基于Jquery的商城商品图片的放大镜效果(非组件)

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等这些组件大同小异. 大家感兴趣的话可以去百度一下. 今天主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显.这里是 54X54 320X320 800X800. 鼠标经过小图时大图随之切换首先看效果(参考了当当网): 首先是htm…

jquery.mobiscroll仿Iphone ActionSheet省市区联动

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 6 7 <t…

JQuery实现仿腾讯的固定导航栏

1.描述窗口滚动一定高度之后才让导航栏固定 2.要点浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); }); 3.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/cs…

vue实现星级评价效果

希望对你们有用,已经自己试过可以的才发布出来的效果如下: html: <template> <div class="evaStar"> <ul class="star"> <li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" @click="st…

在上线项目中，用Vue写一个星级评价

先看一下效果: html: <div class="big-star-box"> <img :src="imgNum>0 ? srcStar : srcNoStar" @click="imgItem(1)"> <img :src="imgNum>1 ? srcStar : srcNoStar" @click="imgItem(2)"> <img :src…

Jquery制作小星星(常用于评价)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> li{ list-style: none; float: left; font-size: 36px; color: blue; cursor: pointer; } </style> <script src="js/j…

用jQuery制作仿网易云课堂导航菜单效果

最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./css/index.css"> <script s…

Android 自定义简单控件--星级评价

效果图实现 package com.easypass.carstong.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; im…

jquery星级评论打分组件

<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jquery星级评论打分组件-nolure的博客,前端开发专业博客,前端学习资源分享</title> <meta name="description" content="jquery实现的网站星级评论打分组件" /><meta name=&qu…

使用jQuery仿淘宝商城多格焦点图滚动切换效果

1.效果及功能说明图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞的背景颜色作为辨识,后给按钮定义一个点击事件,让点击按钮后显示出相对应的图片,在没有点击的图片的情况下自动运行滚动的动画效果,每张图片的切换时间是3秒在点击按钮或者鼠标触及到图片上动画停止当鼠标移开后3秒后启动动画每个图片有可以链接到不同的地址在其中还给包含多个图片在一个div里显示出来他们不是一体…

微信小程序多商品评价评星提交

<form bindsubmit="submitComment"> <block wx:for="{{commentList}}" wx:key="{{item.g_id}}"> <view class="rating-top bgw"> <image src="{{url+item.thumb}}" class="proimg"><…